Today I am sharing another great example of CSS3,in today's tutorial I am sharing a multi level drop down menu which works with pure CSS3 and any single image is not included in this menu.As is works with pure CSS3,it does not affect the loading speed of your blog as compared to jQuery menus and other menus which works with script.Previously I shared a horizontal menu with CSS3 but one of my loyal readers asked me to create a multi level drop down which works with pure CSS3,that's why I kept my word and sharing this menu today.This menu is designed by Rethnaraj Rambabu of bloggermint I have fixed some CSS tweaks to work fine with blogger.Now lets go to the menu and see how to install it on blogger blog.See the demo of menu first by clicking on green button below, 



Live Menu Demo


How To Add This Menu To Blogger?

This menu can be easily installed on any blogger blog in 2 steps.In first step we will implement the CSS part of of the menu in template and in last Second Part we will add HTML part of menu as a HTML/JavaScript widget.Also the HTML mark up of the menu is so clean and neat so that new bloggers can also easily add it to their blog,if can't them I am here :D :)

1. Adding The CSS Code


  1. Go to Blogger Dashboard > Template
  2. Click on Edit HTML
  3. Hit Proceed button
  4. Find below code in your template


]]></b:skin>

add below code just above it,

/* Drop Down Menu By helperblogger.com */
#nav {
 float: left;
 font: bold 12px Arial, Helvetica, Sans-serif;
 border: 1px solid #121314;
 border-top: 1px solid #2b2e30;
 overflow: hidden;
 width: 100%;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}

#nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

#nav ul li {
 float: left;
}

#nav ul li a {
 float: left;
 color: #d4d4d4;
 padding: 10px 20px;
 text-decoration: none;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
 border-right: 1px solid rgba(0,0,0,0.2);
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* Drop Down Menu By helperblogger.com */
#nav ul li a:hover,
#nav ul li:hover > a {
 color: #252525;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover, 
#nav ul li li:hover > a {
 color: #2c2c2c;
 background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 border-bottom: 1px solid rgba(0,0,0,0.6);
 border-top: 1px solid #7BAED9;
 text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* Drop Down Menu By helperblogger.com */
#nav li ul {
 background: #3C4042;
 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 left: -999em;
 margin: 35px 0 0;
 position: absolute;
 width: 160px;
 z-index: 9999;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
 left: auto;
}

#nav li ul a {
 background: none;
 border: 0 none;
 margin-right: 0;
 width: 120px;
 box-shadow: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 border-bottom: 1px solid transparent;
 border-top: 1px solid transparent;
}

.nav ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.nav ul li ul li {
    display: list-item;
    float: none;
}

.nav ul li ul li ul {
    top: 0;
}

.nav ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

#nav li li ul {
 margin: -1px 0 0 160px;
 visibility: hidden;
}

#nav li li:hover ul {
 visibility: visible;
}
/* Drop Down Menu By helperblogger.com */

Save your template.

Now we have implemented the styles of the menu,lets go to the HTML part.

2. HTML Part


  1. Now go to Page Layout
  2. Click on Add a Gadget (below header,see image below)
  3. Select HTML/JavaScript
  4. Paste below code inside it,

<div id="nav">
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Portfolio</a></li>
  <li><a href="#">One Dropdown</a></li>
  <li><a href="#">Three Levels</a>
  <ul>
   <li><a href="#">Level 2.1</a></li>
   <li><a href="#">Level 2.2</a></li>
   <li><a href="#">Level 2.3</a></li>
   <li><a href="#">Level 2.4</a></li>
   <li><a href="#">Level 2.5</a></li>
  </ul>
  </li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>
</div>

Change the links and texts as you wish save your menu.

Customizing The Menu

Before adding this menu customize your links and link names and replace above with your own.To do the customizations I highly recommend you to use our HTML Editor,with using the HTML Editor you can see the live preview of your menu when you do some changes.Also it will help your to learn CSS and HTML,like I have learned many things using HTML Editor.

Follow below simple steps to use the HTML Editor.

  • Add the CSS code between <style> and </style> tag.
  • Just below of it paste the HTML Part
  • Hit Preview button.

Any Help

By following above steps,if you can't create menu which you want then simply contact me with your queries also if you cant add links and drop downs then send me a raw structure of your menu,I will send you the customized code.

Peace And Blessings Buddies :) Happy Blogging :)

Post a Comment

  1. nice menu brother.. But not compactable with IE, open your demo link with IE. is there any solution for this ?

    ReplyDelete
    Replies
    1. It took me 2 days to find this but you forgot to add this to the top of the page.


      $$$$$html xmlns="http://www.w3.org/1999/xhtml"$$$$$

      Replace the last lines $$$$$ with < and > because blogger wouldnt let me post the html tag fully.

      Delete
    2. did you update this in your post?
      i hope so.

      Delete
  2. i am unable to add it to my blog help //

    ReplyDelete
    Replies
    1. Can you send me a copy of your template,because I can not fix the problem through commenting.

      1.Download a copy of your template
      2.Open it using notepad
      3.Save it as .txt file
      4.Attach it in mail

      My Email - rahul@helperblogger.com

      Delete
  3. Rahul I think you menu drop only once I mean from 'Three Levels" to only '2.3" Can You please help me by creating d menu 4 me.
    Can You help me how to drop to the third

    Eg:-
    Cricket:-
    ODI:-Latest
    I can go to ODI on my menu but not to Latest...Thanks,please help

    ReplyDelete
    Replies
    1. Yeah you are right I have just noticed this.I will try to put more drop downs in this menu as soon as I got some time :) Until then you can use other drop down menus.

      Delete
  4. Thank you for sharing this great menu!! :) But how and where do I change the color of the background and line? :)

    ReplyDelete
  5. Hi!

    I found this code and installed it on my blog, it looks great, but I have a problem. My drop down menu has up to three levels in some cases but it's only showing the first level and is completely omitting the other two. When I test it on the HTML Editor is works perfectly, but in my blog is like is blocked or something. Could you help here please. I would really love to have this on my blog.

    Blog: Journey with Words
    @: http://soireb.blogspot.com/

    Thank you

    ReplyDelete
    Replies
    1. Can you send us a copy of your template

      Delete
    2. Hi, I sent you the email. Thank you.

      Delete
  6. hi admin please help me. where a change its background color.i do not change it please help me. my blog : http://hadiuits.blogspot.com/

    ReplyDelete
  7. Please Tell Me How To Make The Level 2.3.1 I cant make it

    ReplyDelete
  8. broooo its nice but
    is ka clor kasay change hoga??????????
    im waiting ur msg

    ReplyDelete
  9. Was there ever a fix for the third drop down level?

    Also, how can I get this to work in IE? I've installed it on my blog and it works great in Firefox and Chrome but when in IE, the sub level menu items are shifted over to the right. Please help. I've been trying to fix this for 2 days. Thank you.

    ReplyDelete
  10. i have problem with this menu, i added it to my website but drop down menus is not shown,help me....

    website link:www.appndsoftcorner.com

    ReplyDelete
  11. hey...i followed the steps..but still its not comming the way it should come please check it.... www.devesh-worldsbest.blogspot.in (see at the bottom end ,i kept it there as it looks bad at the top)...and tell me what should i do now??

    ReplyDelete
  12. Hi, how can I center this menu?

    ReplyDelete
  13. Hi, how can I center this menu?

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. thank you very much.....it s helped me,,

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top