Drop down menus helps your readers and visitors to easily navigate through your blog's important links or categories.I hope this drop down menu will surely help you to organize your links,categories and sub-categories easily.This script for this menu was taken from dynamicdrive and bloggerized by Helper Blogger.In order to create smooth hover effect this use jQuery. The arrange of HTML is damn easy so that you can customize this menu very easily.

horizontal-drop-down-menu

Update: Demo Added

Live Menu Demo


Copy and paste whole below code in 1st text box of HTML Editor and hit preview button.

How To Add This Menu To Blogger?

  • Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)
  • Click on add a gadget link just below of Header (see image below)


  • Paste below code and save it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://helperblogger.ucoz.com/code/hb-smooth-menu.js">
</script>

<script type="text/javascript">

ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.helperblogger.com/">Home</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
 
  </ul>
</li>
<li><a href="http://www.helperblogger.com/">Create This</a></li>
</ul>
<br style="clear: left" />
</div>

Customizations


  • To change background of menu find this #414141 code tow times and replace this code two times.
  • To change font size and font family fing this code font: bold 12px Verdana; 
  • To add a link in menu use <li>
  • To add a sub-link use <ul>.
  • Replace the # symbols with page links
  • Replace the Sub Item 1.1 with Page Titles
For making color changes you can use our Hex Color Code Generator.

Help


If you need any help on customizing and adding this menu to your blog then ask it to me.I will explain you in brief as soon as time allows.I hope you will surely like this menu.

Post a Comment

  1. I appreciate the effort. I have followed the instructions and the menus won't "drop down" to the sub-menus. socalrecruitspot.blogspot.com

    ReplyDelete
    Replies
    1. Todd,I have checked my codes and as always they are working fine,Please try again and If you still getting the problem then you can send your template to us...Hope it may works for you...

      Delete
  2. Hi Raul, thanks for the great posts, I have a little problem with menu, its seems like its broken, it works but in front of every tab name stands a small "X" icon. This is the blog : http://andrijajonic.blogspot.com/

    ReplyDelete
    Replies
    1. No the menu is not broken.There is little problem in your template.

      1.Backup your template.
      2.Find below code and delete it.



      .art-blockcontent-body ul li
      {
      line-height: 125%;
      color: #324253;
      padding: 0px 0 0px 11px;
      background-image: url('https://lh3.googleusercontent.com/-BAnstcn5EDo/T5aw8bTfvLI/AAAAAAAADCY/yVlnhSUAFrI/s320/blockcontentbullets.png');
      background-repeat: no-repeat;
      }

      Delete
  3. Thats it! Thanks man :) I have just one question, how to remove those underlines under every menu name and subitem name?

    ReplyDelete
  4. Add this code just above of the </style> tag in above code

    .ddsmoothmenu a {
    text-decoration:none;
    }

    ReplyDelete
  5. Not working :( lines are still there, just to be shure I do the right thing - I pasted the code into the of YOUR menu code...or...i need to put it somewhere into my blog html code?

    ReplyDelete
    Replies
    1. Ok find this code in the menu

      .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
      color: #4D6680;
      }

      and replace it with

      .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
      color: #4D6680;
      text-decoration: none;
      }

      Delete
    2. Great! It works! Thank you a lot :)

      Btw, I tried your "Floating Twitter Follower Box With Follow Button" and you should know that isnt working, my whole blog was broken, you need to know that information and I can put it again on my blog for you to see whats happening, so maybe you can fix the problem...

      Delete
    3. One more thing - how to add a sub-link to sub-link ( like is presented on your picture ) ?

      Delete
    4. The format is same...

      Look ate above HTML Format you will watch code like this...

      <ul><li><a href="#">Sub Item 1.1</a></li></ul>

      In easiest way <ul> works as folder and <li> works as the file in that folder.

      To add sub-link to sub-link just go to your menu code.Now find for the your first sub-link you you find that link in this format

      <li><a href="YOUR URL HERE">YOUR 1s SUB-LINK TEXT</a></li>

      Before editing menu take a backup of it

      Now add below code just below it.

      <ul>
      <li><a href="YOUR URL HERE">YOUR 2nd SUB-LINK TEXT HERE</a></li></ul>

      If you want to add another sub-link add <li>.....</li> code just before </ul>

      Delete
    5. Wont work :( Can you make a short code about One folder-Two sub links and than two sub-links in each of them? Just to have something to use as a base for the rest of menu. If you have time, of course...thanks..

      Delete
  6. <ul>

    <li><a href="YOUR LINK">YOUR TEXT HERE</a>
    <ul>
    <li><a href="YOUR LINK">YOUR TEXT HERE</a></li>
    <li><a href="YOUR LINK">YOUR TEXT HERE</a>
    <ul>
    <li><a href="YOUR LINK">YOUR TEXT HERE</a></li>
    <li><a href="YOUR LINK">YOUR TEXT HERE</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

    see this image -http://i.imgur.com/fAMLS.png

    ReplyDelete
  7. Hi!
    Thanks this great tip!
    How can I change the color of letters?

    ReplyDelete
    Replies
    1. 1) To change color of letters find this code in menu

      .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
      color: white;
      }

      2) To change font color on mouse hover find this code in menu

      .ddsmoothmenu ul li a:hover{
      background: black; /*background of menu items during onmouseover (hover state)*/
      color: white;
      }

      Now change color: white with your own color you can also use our Hex Color Code Generator

      Delete
  8. Code works but the sub-links of sub-link appears only the first or second time when you crooss over with the mouse over the sub-link, after that it wont appear, just sub link appears...:(

    http://andrijajonic.blogspot.com/

    ReplyDelete
    Replies
    1. Hey please provide me simple tree menu of your drom down menu so that I can do this work for you easily....

      Delete
  9. It will be a 4 main menu links, for the first and second I need around 30 sublinks ( each of them 3 sublinks ) , for the third link I need a 5 sublinks ( each of them 2 sublinks ), for the fourth link i just need 5 sublinks.
    Do you wont me to send you my code or just the names of the links? ( because I still dont know which names it will be )
    Thanks :)

    ReplyDelete
  10. Hi there I'm having a similar problem to the guy above where my sub menus won't drop down my blog is shoehorn.blogspot.com I'm not suppose to do. IF you could help that would be great Thanks!

    Michael

    ReplyDelete
  11. how fix menu when scrolling

    ReplyDelete
  12. Thank you for sharing your sample code on creating css dropdown menu. Please share these sample codes on http://codezample.com/ so that people can easily demo your creation. Thanks!

    ReplyDelete
  13. I CANT COPY THE CODE!!!!!!!!!!!

    ReplyDelete
    Replies
    1. IT ALWAYS PASTE LIKE THIS

      Home
      Folder 0
      Folder 1
      Item 3
      Folder 2
      Create This

      - See more at: http://www.helperblogger.com/2012/03/add-smooth-jquery-multi-level-drop-down.html?showComment=1377449919442#c1208572917618209369

      Delete

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