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;
}