Friday 28 October 2011

Add multi level drop down menu to your blog

Posted bytenraj
Having drop down menu makes easier for navigation and also I find it necessary to have such drop down menus when we have large contents so that the visitors can choose those of their interest. I have added my drop down menu with and I am simply adding my level urls there so that visitors can easily find what they want.




If you want to have one for yourself, please follow the instructions below.


Step 1. Go to Design( Layout for updated interface) >Edit Html.

Step 2. Check the "Expand Widget Templates" check box and the press crtl+f to find following code 
      </b:skin>


Step 3.Just before the above code, copy and paste the following code
 /* start of my drop down menu
----------------------------------------------- */
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 95%;
border-radius: 50px;
}

.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;
border-radius: 50px;
}

* 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: red;
}

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

/*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;

}


/* end of my drop down menu
----------------------------------------------- */

Step 4:Now search for </head> and paste the following 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'/>

 Step 5:No find  </header> and place the following code immediately after it.

 <!-- start of my drop down menu -->
<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://www.tenraj.blogspot.com'>Home</a></li>

<li><a href='#'>Movies</a>
<!-- start of movies -->
<ul>
<li><a href='#'>English</a>
<!-- start of English movies -->
<ul>
<li><a href='#'>Horror </a>
<ul>
<!-- start of horror -->
<li><a href='#'>Horror movie 1 </a></li>
<li><a href='#'>Horror movie 2</a></li>
</ul>
</li>
<!-- end of horror -->
<li><a href='#'> Romantic</a></li>
</ul>
</li>
<!-- end of English movies -->
<li><a href='#'>Hindi </a></li>
<li><a href='#'>Korean</a></li>
</ul>
</li>
<!-- end of  of movies and start of jokes -->
<li><a href='#'>Jokes </a>
<ul>
<li><a href='#'>Funny jokes</a></li>
<li><a href='#'>Dirty jokes</a></li>
</ul>
</li>
<li><a href='#'>New category here</a></li>
<!-- end of jokes -->
</ul>
<br style='clear: left'/>
</div>
<!-- end of  my drop down menu -->


step 6: Preview the template. If it is working fine, just save the template. It should work fine.


Click here for more blogger tricks

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)