Horizontal Multi Level Drop Down Sub Menu Links Blogger

Horizontal Multi Level Drop Down Sub Menu Links Blogger,you can show submenus in drop down form in top menu of your blogger as this is drop down menu to show of the subcategories under the certain category to make of the browsing for the reader easy and simple to find what he wants,as this was used in wordpress blogs but now you can use it in blogger blogspot too.

Demo of Horizontal Multi Level Drop Down Sub Menu Links:- Horizontal Menu Links Demo

The tutorials i hold before on horizontal top menu links for blogger without the drop down sub menu are below:-
1)Top Menu Links For Blogger
2)Horizontal Menu Links For Blogger
3)LinkList As Horizontal Top Menu Links For Blogger

Now let’s carry On with our tutorial

Just Go To Layout > Edit Html

And Search For </b:skin>

Now add these below Css codes before it-

.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{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn’t work in IE*/
opacity: 0.8;
}

Now search for </head> and place the below codes before it.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>
<script src=’http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt’ type=’text/javascript’/>

Now Search for below codes-

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’Testing templates (Header)’ type=’Header’/>
</b:section>
</div>

And add the below codes after the above codes:-

<div class=’ddsmoothmenu’ id=’smoothmenu1′>
<ul>
<li><a href=’http://www.anshuldudeja.com’>Item 1</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>
<li><a href=’#’>Sub Item 1.3</a></li>
<li><a href=’#’>Sub Item 1.4</a></li>
<li><a href=’#’>Sub Item 1.2</a></li>
<li><a href=’#’>Sub Item 1.3</a></li>
<li><a href=’#’>Sub Item 1.4</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>
<li><a href=’#’>Sub Item 1.3</a></li>
<li><a href=’#’>Sub Item 1.4</a></li>
<li><a href=’#’>Sub Item 1.2</a></li>
<li><a href=’#’>Sub Item 1.3</a></li>
<li><a href=’#’>Sub Item 1.4</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>
<li><a href=’#’>Folder 2.1</a>
<ul>
<li><a href=’#’>Sub Item 2.1.1</a></li>
<li><a href=’#’>Sub Item 2.1.2</a></li>
<li><a href=’#’>Folder 3.1.1</a>
<ul>
<li><a href=’#’>Sub Item 3.1.1.1</a></li>
<li><a href=’#’>Sub Item 3.1.1.2</a></li>
<li><a href=’#’>Sub Item 3.1.1.3</a></li>
<li><a href=’#’>Sub Item 3.1.1.4</a></li>
<li><a href=’#’>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href=’#’>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=’http://www.anshuldudeja.com/’>Item 4</a></li>
</ul>
<br style=’clear: left’/>
</div>

Thats It Now Preview It.If its working fine just save your template.

You can download the tutorial and files needed for back up from given link Files And Tutorial

Change the names and links whatever you want to be shown in your blogger in above codes as you have to do this manually but its good if you wanna show sub category under some category.
You can make look your blog as you have subcategories for categories in your blogspot blog by hiding the labels in sidebar widget and giving the category names so as you can create subcategory of any.
Its so easy,i hope will like this tutorial.
Source:-Dynamicdrive

58 Comments

  1. akash May 4, 2009
  2. These Mommy Moments May 4, 2009
  3. Anshul May 5, 2009
  4. Anshul May 13, 2009
  5. Shivani Saini May 13, 2009
  6. Anshul May 13, 2009
  7. Peter Larson June 27, 2009
  8. Peter Larson June 28, 2009
  9. Anshul June 28, 2009
  10. Peter Larson June 28, 2009
  11. Anshul June 28, 2009
  12. Peter Larson June 29, 2009
  13. Anshul June 29, 2009
  14. Peter Larson June 29, 2009
  15. unknown July 24, 2009
  16. Anshul July 26, 2009
  17. Jack August 31, 2009
  18. Anshul August 31, 2009
  19. Maor B. September 8, 2009
  20. Maor B. September 8, 2009
  21. Anshul September 8, 2009
  22. Maor B. September 8, 2009
  23. Maor B. September 8, 2009
  24. Anshul September 8, 2009
  25. Hill Country Scouts October 16, 2009
  26. NonStop Networks, LLC October 17, 2009
  27. Anonymous November 10, 2009
  28. Crystal November 13, 2009
  29. Ducamel01 November 23, 2009
  30. Anshul November 24, 2009
  31. kiran December 16, 2009
  32. FACULDADE DE DIREITO - UFRRJ January 10, 2010
  33. FACULDADE DE DIREITO - UFRRJ January 10, 2010
  34. Anshul January 11, 2010
  35. Lord Zero2 March 3, 2010
  36. Tammy March 26, 2010
  37. Anshul March 26, 2010
  38. Tammy March 26, 2010
  39. Tammy April 15, 2010
  40. Anshul April 16, 2010
  41. Sankara Subramanian C April 18, 2010
  42. Anshul April 22, 2010
  43. Sankara Subramanian C April 22, 2010
  44. Krishna June 24, 2010
  45. Pink Mooki June 24, 2010
  46. Anshul June 24, 2010
  47. Balu July 21, 2010
  48. Anshul July 22, 2010
  49. Balu July 24, 2010
  50. Anshul July 25, 2010
  51. A Moms Rantings July 27, 2010
  52. Etc..Etc.. September 25, 2010
  53. filokalos October 14, 2010
  54. doshanivarthi May 18, 2011
  55. SHIVASHEESH YADAV July 17, 2011

Leave a Reply