AddThis Smart Layers

Dedicated to making your blog more successful

Newest Entries

Simple Drop Down Menu for Blogger Templates

 

Drop Down Menus are a wonderful and great looking solution if yyou want to add multiple links in your blog and don´t have a lot of space to spare. In addition, it makes the site more user friendly and gives it a more professional look. In this post I am going to show you how to add a customizable drop down menu to your Blogger blog.

Drop Down Menu Preview:

drop-down-menu

A live demo can be found at the top of tis blog.

How to add a drop down menu to your Blogger 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).

3. Check the Expand Widget Templates box.

4. Now search for the following code:

</head>

5. Insert the following code directly before the code above:

<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>

6. Now it´s time to customize the drop down menu (optional):

Customize-Drop-Down-Menu You can customize the menu according to your blog. This is optional. Make use of it only if you want a different look than the one already available.

The menu consists of three sections as shown in the image:

1. Main Menu
2. Drop Down Menu
3. Element of Drop Down Menu

In the code you will find some comments. Below the comments you have some editable code.

Here is the explanation of some of the attributes used in the code:

Background: #XXXXXX

This attribute decides the background of the part and XXXXXX is the hex code of the color. You can change the background of each of the three parts.

Color:#XXXXXX

The color attribute decides the color of the text and XXXXXX is the color hex code.

You can get color hex codes from these online color choosers:

ColorSchemer

ColorPicker

width: 123 px

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

7. Adding the menu:

a. Go to Design --> Page Elements.

b. Click on Add Gadget.

c. Select HTML/JAVASCRIPT.

d. Now add the following 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>

Note: Replace # by the link of the item with the URL of the page or tag you want it to lead to.

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 each m3 by m4.

e. Save the gadget. Your Drop Down Menu is live!

Good luck!

Credits: Javascript Array.

9 Comments:

Hav BwB said...

nice tutorial, but how do i make it wider?

Amarant said...

You mean the drop down menu? I think you can edit it through the template editor where you can change its size and style.

long island document scanning

jonwilson said...

I'm sure there is a way to make the drop down menu wider through this code. I don't know for sure, but my virtual assistant has done it before.

electronic document management

Janice Clements said...

I didn't know how to do this drop-down menu box before and I'm glad I saw this step-by-step procedure. I'll definitely follow it.

PC Repair Services

kimchijib said...
This comment has been removed by the author.
Miss Priss Morgan said...

I am trying to apply this code, but my menu is now hidden behind the main wrapper of blogger. My site is:
Missprissandthemister.blogspot.com
Any help would be much appreciated.

kimchijib said...

i was able to figure out how to use and implement this on my blog and it's working just fine. However, I would like to ask if it's possible to add more sub-menus of the sub-menu...let's say sub-menu of "html dropdown" on your example.
Thank you. please help..i've tried other codes but it's just doesn't work. and your code is the simplest i can implement.

FREE TIME WORKSHOP said...

GREAT! But I want to add this: When I CLICK on the "ELEMENT" of the Menu it opens a URL in A NEW WINDOW! (Please tell me how to do this!!!)

Brad G said...
This comment has been removed by the author.

Post a Comment