Google Style Fixed Top Menu Bar For Blogger

Posted by محمد On Tuesday, November 27, 2012 1 comments

google top menu bar for blogger

Hi Guys How Are you ? Fine ? ok, Today i will show you how to add a Google style fixed top menu bar to your Blogger Blog, using CSS - HTML And Javascript codes. You Can See A demo of This Top Menu Bar in google home Page.

  

To add this Beautiful Top Menu Bar to Your Blog You Should follow these Steps :

  • Go to Templete » Edit HTML » Click on Proced.
  • Check The “Expand Widget Templates” Box.
  • And search for ]]></b:skin>
  • Right Above ]]></b:skin> Paste This 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;

}

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 Find This Code :

<body>

Now Add This Code Just Below The Above Code

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

Now we are gonna to add The Javascript Code for This Top Menu Bar, Press Ctrl+F And search the code shown below :

</head>

Now Add The below Code Just Above : </head>

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

i Hop you Like This Tutorial and this Top menu bar

That’s All

1 comments:

Inge Van Israël said...

I've found this same tutorial on other blogs but it doesn't work, I keep getting this error:

XML-foutbericht: The entity name must immediately follow the '&' in the entity reference.

Error 500

Post a Comment

Facebook Page

Followers