Creating Drop Down Menu On Blogger

What is Drop Down Menu? Drow Down Menu is a column contains link inside that poeple usually would make it to save some place from a long list of link on the site. It's alike to the Archive Widget when it's set to drow down style, look at the example Drop Down Menu below:

All links inside Drop Down Menu can be set to point to a specific page, so if the anchor link provided in the menu is clicked it will lead to a page as the address that's been set to refer to in the anchor link clicked. In case of my example above, i set them to lead to this page, so if you click on them you'll go to nowhere, you'll be still here.

You could put as many links just realy as you want in the menu, it could be usefull if you have a long list of link on your site, like your Bloggrol maybe?. You might don't want to display your bloggrol with a long list on your site, beside it doesn't describe you as a proffesional publisher, it also hurts everybodys' eyes that may see it, including you who own the site (perhaps?).

Well, there are two options to choose to make a Drop Down Menu, one option is to make it without Execute Button and one another is with Execute Button. Let's just check the forms below to know how do they look like.

1. Without Execute Button

Copypass the code below somewhere you want the Drop Down Menu to show up.

To be the lesser arrangement the code looks like the following:

< form name="jump">< select name="menu" onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex] .value;" value="GO">
< option value="#">Link Set To Display 1




< / select>< / form>


*Replace the "#" accents with urls whose page you want to link.
*Replace the Link Set To Display 1, 2, 3, 4 and 5 with text anchor/query according to pages whose urls you linked.

It will result in the below Drop Down Menu.



2. With Execute Button

Copypass the code in the text box below somewhere you want the Drop Down Menu to show up.

To be the lesser arrangement the code above looks like the below:

< form name="jump">< select name="menu" onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex] .value;" value="GO">





< / select>
< input onclick="location=document.jump.menu.options[document.jump.menu.selectedIndex] .value;" type="button" value="Get It"/>< /form>


It will result in the below Drop Down Menu.



Here, if you'd like to change the Execute Button (Get It) with an image, you can change the code in red with the below.

To be the lesser arrangement the code above looks like the below.

< a href="javascript:jumpMenu()">< img border="0" src="img url"/>< /a>< /form>

*Just change the line in red with your image url.

That's all. Check my Drop Down Menu on top right if you wanna know how does it work exactly.

0 comments:

Post a Comment