Monday, June 20, 2011

How To Add Cool Horizontal CSS Menu Bar For Blogger

This is nice menu bar to your blog,add it to your blog.

Horizantal CSS Menu,menu bar
Demo here

1. Log in to your blogger account and Go to Design >>page Element

2.Click Add gadget and Select 'HTML/JavaScript' 

3. Now paste paste below code

<style>
#nav1 {
 margin: 0;
 padding: 6px 7px 0;
 height:37px;
 background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvUt00Qc_kZU2mURLZ1rs57LLQ-h83zN4qEvDWqoLbDpT19Q_FR6X3Z78CyZ6iMejnzBtRUteecwl9R4AUaFh4uQXGx4pKd-HF4qs0K66GinEQx3PV7mTfX5BvYJwGvYYfsm4vS8_VYWuO/s320/image1.png) repeat-x 0 -110px;
 line-height: 100%;

 border-radius: 3em;
 -webkit-border-radius: 3em;
 -moz-border-radius: 3em;

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav1 li {
 margin: 0 5px;
 padding: 0 0 8px;
 float: left;
 position: relative;
 list-style: none;
}


/* main level link */
#nav1 a {
 font-weight: bold;
 color: #000000;
 text-decoration: none;
 display: block;
 padding:  8px 20px;
 margin: 0;

 -webkit-border-radius: 1.6em;
 -moz-border-radius: 1.6em;

 text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav1 a:hover {
 background: #000;
 color: #fff;
}

/* main level link hover */
#nav1 .current a, #nav1 li:hover > a {
 background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsEwWJj3j0DxkKMpXQ2bxq6lk_r6lawer-DugSINiJ_lKIYtWILIYD3-NfZc7i28y8Nzu6FrbjdVNf0iszWWZOFB0AuK9EB0Hru0wo-lCFEjazYmv-3H1XtzURWjT-l59NxMU1d2QERhz7/s320/image1.png) repeat-x 0 -40px;
 color: #444;
 border-top: solid 1px #f8f8f8;

 -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 box-shadow: 0 1px 1px rgba(0,0,0, .2);

 text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav1 ul li:hover a, #nav li:hover li a {
 background: none;
 border: none;
 color: #666;

 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#nav1 ul a:hover {
 background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsEwWJj3j0DxkKMpXQ2bxq6lk_r6lawer-DugSINiJ_lKIYtWILIYD3-NfZc7i28y8Nzu6FrbjdVNf0iszWWZOFB0AuK9EB0Hru0wo-lCFEjazYmv-3H1XtzURWjT-l59NxMU1d2QERhz7/s320/image1.png) repeat-x 0 -100px !important;
 color: #fff !important;

 -webkit-border-radius: 0;
 -moz-border-radius: 0;

 text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav1 li:hover > ul {
 display: block;
}

/* level 2 list */
#nav1 ul {
 display: none;

 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 35px;
 left: 0;
 background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvUt00Qc_kZU2mURLZ1rs57LLQ-h83zN4qEvDWqoLbDpT19Q_FR6X3Z78CyZ6iMejnzBtRUteecwl9R4AUaFh4uQXGx4pKd-HF4qs0K66GinEQx3PV7mTfX5BvYJwGvYYfsm4vS8_VYWuO/s320/image1.png) repeat-x 0 0;
 border: solid 1px #b4b4b4;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav1 ul li {
 float: none;
 margin: 0;
 padding: 0;
}

#nav1 ul a {
 font-weight: normal;
 text-shadow: 0 1px 0 #fff;
 font-weight: bold;
 color: #000000;
}

/* level 3+ list */
#nav1 ul ul {
 left: 181px;
 top: -3px;
}

/* rounded corners of first and last link */
#nav1 ul li:first-child > a {
 -webkit-border-top-left-radius: 9px;
 -moz-border-radius-topleft: 9px;

 -webkit-border-top-right-radius: 9px;
 -moz-border-radius-topright: 9px;
}
#nav1 ul li:last-child > a {
 -webkit-border-bottom-left-radius: 9px;
 -moz-border-radius-bottomleft: 9px;

 -webkit-border-bottom-right-radius: 9px;
 -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav1:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
#nav1 {
 display: inline-block;
}
</style>
<ul id="nav1">
<li class="current"><a href="/">Home</a></li>
<li><a href="3">level1</a>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

* Replace with # your links.
* Replace with  link  your names.

4. Now save 'HTML/JavaScript'.  you are done.

7 comments:

  1. nice post,keep it up.

    ReplyDelete
  2. I saw your blog and I think your post really helpful !

    ReplyDelete
  3. hello! this is doesnt work on my blog. using picture template. hope you can help me out. thanks

    ReplyDelete
  4. This is working perfect, what is your blog address?

    ReplyDelete
  5. thanks for the post man..
    i just added the code and the bar is good. But i cannot click the link1,link2,... it disappears when i place my cursor on it..

    http://delphintest.blogspot.com/

    ReplyDelete
  6. i check ed your blog friend,all 6 links are working fine.

    ReplyDelete
  7. @BloggerTrix:

    Please add some more menus to your collection, We would love to see more great stuff from you.
    Keep it up.

    BTW
    I have created 4 menu bars in 4 colors(Red,greem,blue,black) so it can be used on any blogger theme.

    http://blogshippo.blogspot.com/2011/09/how-to-add-professional-horizontal-css.html

    ReplyDelete