Today I am going to show you that how to add drop down menu in blogger.I will just use a single code for this propose.As you have been realized that my all tutorials are for blogger.But it does not mean that these tutorials will not work except blogger.My all tutorials will work everywhere you need.So let's get started.
TUTORIAL OUTLINE
In this tutorial I am going to show you two different styles of Drop Down Menu.So you can use which you like.An you can modify colors according to your blog template.And can add menus and sub-menus as you wish.First the complete code is given then some detail is given about code.So first take a look in Demos Blog on both Drop down menus.
And now come to the tutorial.Here the codes of both drop down menu are given.It will be better if you copy the whole code from one of them past it past in Notepad.And when you Save As the code select All files as file type (below file name) and put .html after file name instead of .txt.In this way file will be saved as webpage and you can view the live preview of your menu after editing.Don't forget to save your file before finishing.
VERY IMPORTANT NOTE: PLEASE KEEP IN MIND THAT BEFORE START EDITING MENU COPY COMPLETE CODE AND PAST IT IN NOTEPAD AND THEN GO TO EDIT AND CLICK ON REPLACE (or press Ctrl+H) AND PUT (copy and past or type) <br /> IN FRONT OF Find what: AND KEEP Replace with: BLANK.AND THEN PRESS Replace All.THEN USE THIS CODE BECAUSE IN THIS WAY <br /> WILL BE AUTOMATICALLY REMOVED FROM ALL THE CODE.THIS IS IMPORTANT OTHERWISE CODE WILL NOT WORK.
Code for other style of Drop Down Menu.
Now I will tell you about making menu and sub-menu.And I am continuing to tutorial with the assumption that you have pasted the code in Notepad from one of the above and removed all <br /> codes from the code.Actually <br /> is used for new lines when I copy All code then new lines are also remembered and when I converted all code in to text then all enters (new lines) are converted into <br /> code which is not necessary so this is why we need to remove this additional code.
MAKING DROP DOWN MENU USING FIRST CODE
First of all find <!--------START EDITING MENU BELOW----------> in the code.All the code below this line is example of Menu and Sub-menu.You can delete this part of code and make your own menu.Or simply modify the link of menu and sub-menu and their names too and delete unnecessary menu.But if you have lots of link of pages and want to categorize all pages then you will need to make new own menus.I shall teach you about this with an example.Suppose I five links (lnk1, lnk2, lnk3, lnk4, lnk5).I will make a simple menu and two drop down menus with 2,2 sub-menus.Keep In mind that do not delete any special symbols ( i.e < " / = ) while making menu and new lines and spaces in notepad don't effect the work of code and # denotes page URL.And do not make change red background colored code (at top and bottom).The blue background colored code is for simple button (having no sub-menu).And yellow colored background code is for Drop Down Menu (menu having sub-menus).I think you have been realized that for sub menu <li><a href="#"Name</a></li> is used.And sub-menu list start with <ul> and ends with </ul>.Here is Example code.
<div class="menu">
<ul>
<li><a href="lnk1">Menu (without sub-menus)</a></li>
<li><a href="#">Menu (with sub-menus)</a>
<ul>
<li><a href="lnk2">lnk2 name</a></li>
<li><a href="lnk3">lnk3 name</a></li>
</ul>
<li><a href="3">Menu (with sub-menus)</a>
<ul>
<li><a href="lnk4">lnk4 name</a></li>
<li><a href="lnk5">lnk5 name</a></li>
</ul>
</ul>
</div>
MAKING DROP DOWN MENU USING SECOND CODE
Now I will tell you about making menu using second code.Here again after removing <br /> from all the code search for <!---------------START MAKING MENU BELOW-------------->.All the code below this line is example menu.Here something is a little bit different from above code.Here also be careful and note that you shall not make any change in red colored background code and place it carefully (top code should be at the top and bottom code should be at the bottom).As you have realized that blue code used for simple button (having no sub-menu).And yellow background colored codes are the examples of Drop Down Menu.To make more Drop Down menus just place the example code below the existing menu code modify.Here sub-menu is made with just link (<a href="page link">page name</a>).Also note that every button of menu (simple and drop-down) have special number with which it is identified.I underlined that that parts of codes.Don't forget to update this number according to button number.In drop down button two times this number is given first in Button itself code and second in the div id of it's sub-menu list.This is important otherwise buttons shall not work properly.You can change the colors of Menu in css that very easy and I think you can understand yourself.If you need detail about coloring you can ask via sending e-mail.
That's it.
<ul id="sddm">
<li><a href="lnk1" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a></li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Menu 1</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="lnk2">sub-menu</a>
<a href="lnk3">sub-menu 2</a>
</div>
</li>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="lnk2">sub-menu</a>
<a href="lnk3">sub-menu 2</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Menu 2</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="lnk4">sub-menu</a>
<a href="lnk5">sub-menu 2</a>
</div>
</li>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="lnk4">sub-menu</a>
<a href="lnk5">sub-menu 2</a>
</div>
</li>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>
</!doctype>
<div style="clear:both"></div>
<div style="clear:both"></div>
</!doctype>
When your menu is ready.Then that is time to embed in your blog.For this propose First sign blogger move to your blog Design where you want to add this menu.Then in the Design>Page Elements Click on Add a Gadget and select HTML/JaveScript from list and past all the code here.And do not give any title to this gadget.And move it where you want then press Save.That's it!
I tried my best to explain thoroughly.If still you confused then you can ask me via sending e-mail.
