Google Style Top Fixed Menu Bar Created in CSS and jQuery


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


CSS and jQuery menu bar
wanna add Google style top fixed menu bar to your blogger blog? Introducing Google style top fixed menu bar looks to integrate Google Plus with all other Google products. I believe it would be a great idea to make a tutorial on how to create this black menu bar using both simple jQuery and CSS. The style of the elements of this menu seems exactly to those found on Google web page. Lets see how to do it.

Before Before we adding this CSS Google style fixed menu bar to your blog/site, please take a look at the demo CSS gadget screenshot provided below and get an idea of what we are going to make right here. If you wanna feel the demo in real action you may click here.


Google Style Top Fixed Menu Bar
 How to fix this menu bar to the top of your blog/website
Let's divide this task into three parts. Adding skin of your menu bar, means adding CSS part, adding Markup-HTML and Markup-JavaScript parts. So lets begin with adding CSS part. Let me tell you how to do do this, please follow below steps carefully.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
/*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;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}

 Adding Markup-HTML
So we have successfully added the skin of this menu bar. Now lets go to the second part. That's adding Markup-HTML. Press Ctrl + F and search the code shown below.

<body> 

Now add the below code just Below/After searched body tag

<div class="menu">
<ul>
<li class="single-link"><!-- Using class="single-link" 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="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="http://orkut.com">Orkut</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="http://gmail.com">Gmail</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="https://www.google.com/calendar">Calendar</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="https://docs.google.com">Documents</a>
</li>
<li class="single-link"><!-- Using class="single-link" 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 --> <a href="#">More<span class="arrow"></span></a>
<!-- Drop Down menu Items --><ul>
<li><a href="http://www.google.co.in/reader">Reader</a></li>
<li><a href="https://sites.google.com">Sites</a></li>
<li><a href="http://groups.google.co.in">Groups</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/imghp?hl=en&tab=wi">Images</a></li>
<li><a href="http://maps.google.co.in/maps?hl=en&tab=wl">Maps</a></li>
<li><a href="http://translate.google.co.in/">Translate</a></li>
<li><a href="http://books.google.co.in">Books</a></li>
<li><a href="http://scholar.google.co.in/">Scholar</a></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>
</li>
</ul>
</div>

 Adding Markup-JavaScript
Now we are gonna get in to the final steps to bring this Google Style menu bar in action. For adding Markup-JavaScript. Press Ctrl + F and search the code shown below

</head>

Now add the below code just Above/Before searched head tag

<script>
$(function ($) {
$.fn.fixedMenu = function () {
return this.each(function () {
var menu = $(this);
$("html").click(function() {
menu.find('.active').removeClass('active');
});
menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
//displaying the drop down menu
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
}
else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find('.active').removeClass('active');
}
})
});
}
})(jQuery);
</script><script>
$('document').ready(function(){
$('.menu').fixedMenu();
});
</script>

Preview your blogger template and if you are satisfied you can save your template. Now you're done!


You never need to hesitate if you are facing any problem while your installation of this menu bar. Feel free to ask via comment or our contact form and we are so glad to help you. Happy blogging:)