top_menu

Sunday, 23 September 2012

How to create google like top bar using css and jquery

.

For all its products, google has a common top bar which remains fixed through out the page scrolling. This helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects.

Creating this is easy using CSS and jQuery.

google top bar




The HTML Code

<div class="mainbar" >
<div style="float:left;">
<ul class="mainMenu" >
<li class=""><!-- for links with no dropdown -->
<a target="_blank" href="http://plus.google.com">+You</a>
</li>
<!-- Using class="current" for the link of the current page -->
<li class="current">
<a target="_blank" href="http://www.google.co.in/">Web</a>
</li>
<li class=""><!-- for links with no dropdown -->
<a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
</li>
<li><!-- Do not add any class for links with dropdown -->

<!-- Drop Down menu Items -->  
<li style="border-right:0;">
 <dl class="staticMenu">
    <dt><a class="" href="settings" onClick="return false;">Account<span class="arrow"></span></a></dt>
 <dd>
<ul class="mainMenuSub" style="right: -1px; left: auto; display: none;">
<li><a href="http://www.google.co.in/reader">Reader</a></li>
<li><div class="mid-line"></div></li>
<li><a href="http://blogsearch.google.co.in">Blogs</a></li>
<li><div class="mid-line"></div></li>
<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
<li><div class="mid-line"></div></li>
</ul>
 </dd>
</dl>
</li></ul> </div></div>

The Javascript

<script>
var SubMenutimer;
var last_o;
$(".mainbar").ready(function() {
$(".staticMenu dt a").click(function() {
$(this).parents(".staticMenu").find(".noti_bubble").hide();
$(".staticMenu dd ul").not($(this).parents(".staticMenu").find("ul")).hide();
$(".staticMenu dt a").not($(this)).removeClass("selected");
$(this).parents(".staticMenu").find("ul").toggle();
if($(this).parents(".staticMenu").find("ul").css("display") == "none"){
 $(this).removeClass("selected");
}else{
 $(this).addClass("selected");
}
});

$(".staticMenu dd ul li a").click(function() {
var text = $(this).html();
$(".staticMenu dt a span").html(text);
$(".staticMenu dd ul").hide();
});

$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("staticMenu")){
 $(".staticMenu dd ul").hide();
 $(".staticMenu dt a").removeClass("selected");
}
});
});

function openSubMenu(o){
cancelSubMenuClose();
if(last_o) $(last_o).parent().find("div").hide();
last_o = o;
$(o).parent().find("div").show();
}

function closeSubMenu(){
SubMenutimer = setTimeout("close()",500);
}

function cancelSubMenuClose(){
clearTimeout(SubMenutimer);
}

function close(){
$(last_o).parent().find("div").hide();
}

</script>

The CSS to add some styling

@charset "utf-8";
/* CSS Document */
*{
 margin:0;
 padding:0;
}
html{overflow-y:scroll;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;background-color:#e8e8e8;color:#808080;}
body{font-size: 11px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;color:#333;line-height:1.28;margin:0;padding:0;text-align:left;direction:ltr;unicode-bidi:embed}
hr
{
color: #e9e9e9;
background-color: #e9e9e9;
}

div.mainbar{
 top:0;
 z-index: 999;
 padding:0px 10px;
 position:fixed;
 width:100%;
 background:#2D2D2D;
 height:30px;
 
}

ul.mainMenu{
 list-style:none;

}

ul.mainMenu li{
 float:left;
 /*border-right:1px solid #bcb6aa;*/
 padding:0px;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;

padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.mainMenu li a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
display:block;
 }
.mainMenu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.staticMenu dl{ }
.staticMenu dd { position:relative; }

/* DT styles for sliding doors */
.staticMenu dt a {
padding:5px 4px 5px 4px;
margin-bottom:1px;
display:block;
font-weight:bold;
color:#fff;
line-height:15px;
text-decoration:none;
}

.staticMenu dt a.selected{
background:white;
position:relative;
z-index:99;
padding-bottom:6px;
color:#3366cc;
}

/* UL styles */
.staticMenu dd ul {
display:none;
list-style:none;
position:absolute;
cursor:pointer;
}

ul.mainMenuSub{
position:absolute;
top:-2px;
left:-1px;
padding:2px;
border:1px solid #b4a291;
background: white;
}

ul.mainMenuSub li{
border:0;
width:123px;
}

ul.mainMenuSub li.seperator{
width:223px;
height:2px;
display:block;
background:url(/images/mainmenusep.png) repeat-x;
margin-bottom:6px;
margin-top:4px;
overflow:visible;
}

ul.mainMenuSub li a:link{
display:block;
font-weight:bold;
text-align:left;
overflow:hidden;
padding:2px 4px 3px 19px;
color:#3366cc;;
text-decoration:none;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}
ul.mainMenuSub li a img{

border:0;
}

ul.mainMenuSmall li{
width:173px;
}

div.mainMenuSubTwo{
display:none;
left:220px;
position:absolute;
top:3px;
z-index:99;
background:white;
}

div.mainMenuSubTwo ul{
border:1px solid #b4a291;
padding:2px;
background:white;
}

a.MainSubExpandable{
background:white url(/images/mainmenuexpandable.png) no-repeat right top;
}


4 comments:

  1. Hi there, after reading this amazing piece of writing i am also delighted to share my know-how here with mates.
    Also visit my web site - {

    ReplyDelete
  2. Hi to eveгy one, it's truly a fastidious for me to pay a quick visit this site, it contains precious Information.
    Also see my page > bidvertiser review

    ReplyDelete
  3. Ι am nοt sure ωherе you're getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for excellent info I was looking for this info for my mission.
    Review my webpage ; Free wordpress hosting

    ReplyDelete
  4. Good work !!!
    There is a white spot just below the arrow.
    To fix that just change
    border-color:#C0C0C0 transparent transparent;
    in arrow class.

    ReplyDelete