A simple Drop Down Menu For Blogger

Drop Down Menus are great for adding multiple links in your blog and yet they require very little space space. In addition it makes the site more user friendly and gives it a more professional look. I am going to show you how to add a customizable drop down menu to your blogger blog.

Drop Down Menu Preview:

Live Demo

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).
3. Check the Expand Widget Templates
4. Now search for the following code:

5. Just place the following code before the code above.




6. Customize the drop down menu(optional):

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.

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

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.Then click on Add Gadget

c. Then select HTML/JAVASCRIPT

d.Then Add the Following code

• onmouseover="mopen('m1')"
  onmouseout="mclosetime()">Home
  
  onmouseover="mcancelclosetime()"
  onmouseout="mclosetime()">
  HTML Drop Down
  DHTML Menu
  JavaScript DropDown
  Cascading Menu
  CSS Horizontal Menu
  
  
  


• onmouseover="mopen('m2')"
  onmouseout="mclosetime()">Download
  
  onmouseover="mcancelclosetime()"
  onmouseout="mclosetime()">
  ASP Dropdown
  Pulldown menu
  AJAX Drop Submenu
  DIV Cascading Menu
  
  
  


• Order


• Help


• Contact

Note: Replace # by the link of the item and if you want to add the menu, say the third element.

Replace Order by the following code:
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Home


onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
HTML Drop Down
DHTML Menu
JavaScript DropDown
Cascading Menu
CSS Horizontal Menu


This is for the third menu, for the fourth replace each m3 by m4

f. Save the Gadget and the work is over. The Drop Down menu is live!