How To Make Pulldown/Dropdown Menu With Button On Blogger/Blogspot

Pull down menus are often also referred to as a dropdown menu or jump menu. Known as a pull down menu list will appear after the top of the menu is clicked / pressed, and a dropdown menu called anyway because after a row is clicked the menu list will appear sequentially down.

Pull down the menu / drop down menus are very useful to display a list of choices so long as it can shorten the length of the page blog / website and would create a blog / website look more elegant and professional. You can use the pull down menu to set the links blogrol, label, archive, categories, and so forth.

In this occasion I would be a review and share on how to create a drop down / pull down menu button plus an HTML-based form and command the javascript function.

Fundamentally, it is a series of options pulldown menu option tag in the selection of which are summarized in a form:

<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>

And will look like this:

To provide contents or list menu, add value and anchor text in option tag, the identity function (name) on selection, and function form:

<form name="Jump">
<select name="menu">
<option value="url link list 1">Name List 1</option>
<option value="url link list 2">Name List 2</option>
<option value="url link list 3">Name List 3</option>
</select>
</form>

Name List 1 Name List 2 Name List 3

Finally, add a command button and link javascript input option when clicking on the appropriate sequence identity (name):

<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

Oops, due to what appears on the form is the name of the first list and less informative, add the option with an empty value and text as information for visitors about the contents of the menu:

<option> – Chose The  Tutorial -- </option>

Here's the full script:

<form name="Jump">
<select name="menu">
<option"> – Chose The Tutorial -- </option>
<option value="url link list 1">Name List 1</option>
<option value="url link list 2">Name List 2</option>
<option value="url link list 3">Name List 3</option>
</select>
<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="GO">
</form>

  Examples of implementation (check all the links):

Blogger Design Blogger Tips Blogger Tricks Blogger SEO Blogger Layout Blogger Tutorial Blogger Templates

customization:
- Replace -Chose The Tutorial - with the text you want displayed on the top line pull down menu.
- Replace the word GO / other orders preferred.
Blog blogger, you can easily install it as a widget / gadget.

Dashboard >> Design >> Add a Gadget >> HTML/Javascript

That's it. Have fun!

Posted in: Blogger Tips,Blogger Tools,Blogger Tricks,Blogger Tutorials