Monday, June 4, 2012

Attractive Css Drop Down Menu Bar For Blogger

This is a another cool menu bar to your blog.
Drop down menu is the main thing that helps
to increase the attractive of your blog.You can
link with main Categories, pages, and important
posts,with  menu bar.Hence, its easy to navigate
visitors thought this menu bar.This is great design
with Css. you ca do with easy steps. Follow these
steps to add it your blog.


DEMO

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

Attractive Css Menu
#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#hb-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#hb-menu:before,
#hb-menu:after {
content: "";
display: table;
}
#hb-menu:after {
clear: both;
}
#hb-menu {
zoom:1;
}
#hb-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#hb-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#hb-menu li:hover > a {
color: #fafafa;
}
*html #hb-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#hb-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#hb-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#hb-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#hb-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#hb-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#hb-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#hb-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#hb-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#hb-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#hb-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#hb-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#hb-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#hb-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<ul id="hb-menu"> 
<li><a href="#">Home</a></li> 
<li> 
<a href="#">Categories</a> 
<ul> 
<li><a href="#">CSS</a></li> 
<li><a href="#">Graphic design</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="#">Development tools</a></li> 
<li><a href="#">Web design</a></li> 
</ul> 
</li> 
<li><a href="#">Work</a></li> 
<li><a href="#">About</a>
<ul> 
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>   

</li> 
<li><a href="#">Graphic design</a></li> 
<li><a href="#">Development tools</a></li> 
<li><a href="#">Web design</a></li> 
</ul> 

</li> 
<li><a href="#">Contact</a></li> 
<li><a href="http://www.bloggertrix.com/">Add This  »</a></li></ul>

*Replace # With your URL
*Replace Name with as your like.

7. Now save your template
 you are done.

23 comments:

  1. Great, smooth menubar thx...

    ReplyDelete
  2. hey...cool menubar!...like it. So, how to add glares in sidebar like yours

    ReplyDelete
  3. @Anonymous

    thanks

    @korer

    Thanks, whats did you mean about es in
    sidebar?

    ReplyDelete
  4. i meant the sidebar content separator images....How to remove or add them. Actually I want to remove them from post area and add new separators to sidebar.

    ReplyDelete
  5. how to set it on top of the content sheet this is how it appears now-- 'http://4.bp.blogspot.com/-_hoKcYbw7RE/T9LqnxrJA-I/AAAAAAAAAWY/ulWr68XyVMg/s320/Capture.PNG' and this is how i want it to be -- 'http://2.bp.blogspot.com/-sq9ny7wiX54/T9LqpoUEMjI/AAAAAAAAAWg/bgLc69Pj2Eg/s320/Capture2.PNG'

    ReplyDelete
  6. @korer
    i will make a post about it. keep in touch.

    ReplyDelete
  7. @Anonymous
    let me know your blog address first ?? i will give a new code to you.

    ReplyDelete
  8. Nice menubar. But why can't find the second code details in my blog?
    Thanks
    tabak

    ReplyDelete
  9. @tabak
    Can i know your Blog address, I will help you to add it.

    ReplyDelete
  10. http://dragonfisher.blogspot.hu/
    I did it: the CSS code copied for above ]]> and the HTML code copied Go To Design > Page Elements > Click Add a Gadget...looks like this!

    ReplyDelete
  11. @Tabak
    "This blog is open to invited readers only"
    So, i cant Look at your blog.

    ReplyDelete
  12. Sorry,I changed the setting. This is just a test blog..

    ReplyDelete
  13. @tabak, This menubar not support simple template.
    Try with layout template like "minima".
    Im sorry about it.

    ReplyDelete
  14. second instuction to finding (div id='content-wrapper'> is pain for any custom blog template user...juz paste the code using html/javascript gadget....since i'm using custom template, i've use this method and its work fine

    ReplyDelete
  15. Thanks a lot for your valuable guidance.

    I pasted the first set of code as instructed.

    After that, I pasted the second set of code in a HTML gadget of my blog.

    Now, the issue I am facing is that the menu bar and its sub tabs are not showing up properly.

    Request yout o knodly help me out with this.
    Thanks in advance.


    My Blog link is:
    www.datastageworld.blogspot.in



    Please suggest!

    ReplyDelete
  16. I cannot give solution without checking it,
    Did you remove Menu-bar?

    ReplyDelete
  17. My submenus aren't showing at all... Here's my blog address: http://www.fashezine.com/

    ReplyDelete
  18. Hi there. Luv your menu but can't seem to work with my blog so i neeed heeelp with it. the css doesn't work :(
    mlmmac.blogspot.com
    Thx

    ReplyDelete
  19. Hi Love this menu too but sub-menus are not showing, pls help. www.naturalistagh.blogspot.com

    ReplyDelete
  20. @Cosmin Stefan Modoran
    Contact me via "Contact Us" page.

    ReplyDelete