Drop Down Menu for Blogger Part 2

Ok....now I had to search through a few different html codes and information, and tried a couple different versions before I found one that I could actually get to work with my blospot.

So here's the low down if you are in the market to add this handy dandy little feature to your blog.

First.....don't be overwhelmed....it's basic copy and pasting.  And the details come with adding your links.

I found my information on this blog.  But I am going to reiterate for you.

Follow these steps to add a drop down menu to your Blog:
1. Go to Design->Edit Html
2. Download Full Template (This is to backup your template, so that you don’t lose any data).

(I could not get this to work so instead I copied and pasted all this lingo into a different file so that if anything got ruined I could just copy and paste the original information back into the template and be worry free. :)

3. Check the Expand Widget Templates
4. Now search for the following code:
</head>

Insert the following code directly above that code...

<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #5970B2;
/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{
/*background color of main menu on hover*/
background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
/*background color of drop down menu */
background: #FFFFFF;
/*border of the drop down menu*/
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
/*background color of each menu element*/
background: #FFFFFF;
/*text color of each menu element*/
color: #2875DE;
/*font of each menu element*/
font: 11px arial}
#sddm div a:hover
{
/*background of each element on hover*/
background: #49A3FF;
/*font color of each menu item on hover*/
color: #FFFFFF}
</style>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = &#39;visible&#39;;
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>

You can customize the menu according to your blog. This is optional and use it only if you want a different look than the one already available.

When you find something that looks like this....Color:#XXXXXX you can edit the XXXX's to be a color code which you can find any color code at this link. Otherwise the looks of the drop down will be all the blue settings as shown in my blog.

width: 123 px

The width determines the width of each element. You can increase or decrease the width according to your choice.

I had to make mine wider so the words wouldn't overlap.  Just keep changing the number and then viewing the blog until it is a size that suits your blog template.(after completing the next step)

Next you need to add the actual menu code and information.

a.Go to Design&gt;Page Elements
b.Then click on Add Gadget
c. Then select HTML/JAVASCRIPT
d.Then Add the code
<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

The # sign is where you would enter your link so when you click on that dropdown it brings you directly to that page.

The text where it says home or download is what will be the tab along the menu bar.  Edit these to what is going to correspond within the sub menus. 

The  part after the #"&gt;Dropdown is the sub menus.  edit this part with the name of your menu list, and edit the corresponding # with the link that goes with that label.

To add more tabs or more dropdowns....

Replace <a href=”#”>Order</a>
with the following code:

<a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Home</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
 
This is for the third menu, for the fourth replace again and edit each m3 with m4, etc. for however many more tabs and dropdowns you want to add.

Now the detail part is making all those edits, figuring out what dropdowns you want what titles you want and what order you want them in!

Have fun! :)