Monday, 24 June 2013

// // 8 comments

Best css drop down menu list for blogger

List of drop down menu
Today I am going to post a list of css drop down menu for your blog or website. This drop down menu Fully created in CSS and it does not effect your blog or website load time. Now a days most of blogger use drop down menu to make blog or website more attractive. Drop down menu is a best way to attract your visitors to visit again on your blog. Drop down menu play effective role in the development of an effective and user friendly blog. This drop down support almost every browser. You can easily change the color according to your website color scheme. If you have any problem in changing color feel free to ask by using comment box below.


How to Add Drop Down menu to your blog:


1. Go to Blogger.com and click on template.
2. Backup your template before adding it.
3. Click on Edit Html and Find the Code by using CTRL+F.
4. Find following Code ]]></:skin>  and add below Css code just above it. 

1. Black Shiny Drop Down Menu:


Latest drop down menu
                                                                         
                                                                                      Live Demo..

#menu-bar {
width: 95%;
margin: 0px 0px 0px 0px;
padding: 7px 7px 15px 11px;
height: 23px;
line-height: 100%;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
box-shadow: 0px 5px 11px #2C2C66;
-webkit-box-shadow: 0px 5px 11px #2C2C66;
-moz-box-shadow: 0px 5px 11px #2C2C66;
background: #FFFFFF;
background: linear-gradient(top, #999999, #404040);
background: -ms-linear-gradient(top, #999999, #404040);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#404040));
background: -moz-linear-gradient(top, #999999, #404040);
border: solid 0px #6D6D6D;
position:relative;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 6px 0px;
padding: 0px 1px 0px 7px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: normal;
font-family: verdana;
font-style: normal;
font-size: 13px;
color: #DDE7DB;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 6px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-shadow: 1px 2px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #01394F;
background: linear-gradient(top, #FFFFFF, #FFFFFF);
background: -ms-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
color: #000000;
-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: 0px 1px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #3220D4 !important;
background: linear-gradient(top, #ECECEC, #65636E) !important;
background: -ms-linear-gradient(top, #ECECEC, #65636E) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#ECECEC), to(#65636E)) !important;
background: -moz-linear-gradient(top, #ECECEC, #65636E) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 3px #FFFFFF;
}
#menu-bar ul {
background: #FFFFFF;
display: none;
margin: 0;
padding: 0;
width: 188px;
position: absolute;
top: 23px;
left: 0;
border: solid 0px #FFFFFF;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-box-shadow: 0px 2px 16px #060522;
-moz-box-shadow: 0px 2px 16px #060522;
box-shadow: 0px 2px 16px #060522;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:14px 0px 10px 15px;
color:#191919 !important;
font-size:12px;
font-style:normal;
font-family:verdana;
font-weight: normal;
text-shadow: 4px 2px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}

Greenish Drop Down Menu: 



                                                                                   Live Demo..


#menu-bar {
width: 95%;
margin: 0px 0px 0px 0px;
padding: 12px 24px 16px 16px;
height: 26px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 0px 5px 0px #646B62;
-webkit-box-shadow: 0px 5px 0px #646B62;
-moz-box-shadow: 0px 5px 0px #646B62;
background: #FFFFFF;
background: linear-gradient(top, #5F9599, #2C3025);
background: -ms-linear-gradient(top, #5F9599, #2C3025);
background: -webkit-gradient(linear, left top, left bottom, from(#5F9599), to(#2C3025));
background: -moz-linear-gradient(top, #5F9599, #2C3025);
border: solid 0px #6D6D6D;
position:relative;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 0px 0px;
padding: 2px 1px 0px 7px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: normal;
font-family: georgia;
font-style: normal;
font-size: 13px;
color: #DDE7DB;
text-decoration: none;
display: block;
padding: 7px 20px 6px 20px;
margin: 0;
margin-bottom: 0px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
text-shadow: 0px 2px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #000000;
background: linear-gradient(top, #FFFFFF, #F5E6F2);
background: -ms-linear-gradient(top, #FFFFFF, #F5E6F2);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F5E6F2));
background: -moz-linear-gradient(top, #FFFFFF, #F5E6F2);
color: #000017;
-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: 0px 1px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #000000 !important;
background: linear-gradient(top, #213F40, #65636E) !important;
background: -ms-linear-gradient(top, #213F40, #65636E) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#213F40), to(#65636E)) !important;
background: -moz-linear-gradient(top, #213F40, #65636E) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 3px #FFFFFF;
}
#menu-bar ul {
background: #FFFFFF;
display: none;
margin: 0;
padding: 0;
width: 188px;
position: absolute;
top: 26px;
left: 0;
border: solid 0px #FFFFFF;
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
-webkit-box-shadow: 0px 2px 16px #060522;
-moz-box-shadow: 0px 2px 16px #060522;
box-shadow: 0px 2px 16px #060522;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:14px 0px 10px 15px;
color:#191919 !important;
font-size:12px;
font-style:normal;
font-family:verdana;
font-weight: normal;
text-shadow: 4px 2px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 17px;
-webkit-border-top-left-radius: 17px;
-moz-border-radius-topleft: 17px;
border-top-right-radius: 17px;
-webkit-border-top-right-radius: 17px;
-moz-border-radius-topright: 17px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
-moz-border-radius-bottomleft: 17px;
border-bottom-right-radius: 17px;
-webkit-border-bottom-right-radius: 17px;
-moz-border-radius-bottomright: 17px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}

5. After adding this code click on Layout >> Add a gadget>> HTml and Javascript abd this below code.

<ul id="menu-bar">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Products Sub Menu 1</a></li>
   <li><a href="#">Products Sub Menu 2</a></li>
   <li><a href="#">Products Sub Menu 3</a></li>
   <li><a href="#">Products Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

6. Click on Save button and Enjoy drop down menu on your blog.

Customization:


1. Change # with the link you use.
2. If you want to change the color of drop down menu. Use comment box i guide you how you can change the color easily.


Need Help?


If you need any help about drop down menu. Leave comment below by using comment box. I am always here to help you. 
Your feedback is important for us please give feedback about drop down menu.

8 comments:

  1. I appreciate the tips, but I am having problems with the drop down showing up.

    ReplyDelete
  2. Nice tips...I'm gonna try it on my www.frabidel.com tomorrow

    ReplyDelete
  3. sir can u plz tell me how to can i create further sub-divisions from the sub-menu?

    ReplyDelete
    Replies
    1. hey. thnx for tutorial.but i still need help
      My only 1st submenu is visible..
      plz catch the error.
      here is my blog
      http://explorevariousthings.blogspot.in/

      Delete
  4. I really appreciate your providing this. However I can't figure out how to do things like change the box color to white and have no shadow or move the words farther apart or change the font style. I just don't know enough about code to do that. I can change the font color and the tab names though. Could you point me in the right direction?
    Thanks, Charlie @pickledokra.blogspot.com

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. I can't believe it but I read the code and messed around with it and figured out how to do everything I needed. I only have one problem now. When I hover over a tab with a drop down menu the the menu drops down but the word that they were associated with either disappears or turns white. (I think I probably have accidentally set it to change white because #ffffff is my background color.) I am not sure where the change should be to fix that. Can you tell me the lines that need to change. I am using the font color #666666. - See more at: http://myallproject.blogspot.com/2013/06/best-css-drop-down-menu-list-for-blogger.html?showComment=1384200792822#c8537177775676297139

      Delete