Rowan Cottage : Dropdown

Rowan

Cottage

About

iWeb

Dropdown Menus

Ok folks, here goes, a couple of dropdown menus for you (or should it be drop down menu or even drop-down menu?). Dropdown menus are made using javascript and forms. They enable you to select a page from a menu and go to it by clicking a button. Try it here now!

Now if you want two menus, or even more, just define more functions in the header, and write more form code, but change all the 1s in the code to 2s (if you want more than two, move on to 3s or even 4s if you want!). So for the dropdown menu directly above, the code reads as follows.

Form code

Now bear in mind, I’m not detailing automatic dropdown menus here - so called jumpmenus. These will jump directly to the page once you’ve let go of the mouse whilst it’s already on a selection. Those are a bit too complicated for a simple tutorial like this.

Anyway, back to dropdown menus. To get these, you need to do several things.

Preparation

You need to know about cut and paste HTML using the textbox technique and TextEdit or some other text editor. See my earlier article for some pointers first if you’re not sure.

You need to decide what items are going to go into your menus and what pages they are going to link to. For example, in the dropdown menu above, these are the item descriptions and the page that the javascript goes to when you click Go!

Home -- Home.html

Media -- Media.html

Events -- Events.html

Blog -- Blog/Blog.html

Articles -- Articles.html

Links -- Links.html

Guestmap -- Guestmap.html

Search -- Sitemap.html

You also need to know a tiny little bit about the structure of the HTML page, because you need to paste some code into a different place in the page. You can however use Hexmonkey’s wildly popular MassReplaceIt program - I’ll tell you about that later. But don’t worry yourself over it right now, because it’s nothing to sweat about. If you already know about <head> tags you’re practically there.

What to do In iWeb

Place a textbox on the page where you want your menu to go. Now I know what you’re thinking - what size do I have to make the textbox? Well the two textboxes I used for the dropmenus on this page are 150px by 40px and 280px by 40px respectively, so you can roughly decide what size to make yours depending on what text you’re going to put in the menu and what text you’re going to put in the click button.

In the textbox, put some unique text into it, like DropMenuHTMLHere.

Publish.

You now need to find the HTML page where your dropmenu textbox is and replace the text DropMenuHTMLHere with the code for the menu. If you’re unsure where to find this HTML page, see my paypal buttons article for some pointers.

For the dropmenu above, the form code is here:

Select an option and click Go!

Want more menus?

How about another one, say, right here:

Visit our homepage!

IWEB ARTICLES
Main Articles Page
iWeb FAQ
iWeb and Site Help
Experimental Page
PayPal Buttons
iWeb Resources
Selective Uploads
Integrating a Guestmap
Graphics Tips
Autoplay Music
Hyperlinks in iWeb
Links in New Windows
Dropdown Menus
Div Switching
Favicons Meta Tags etc
Scrolling News Ticker
SimpleViewer Integration
iWeb Wish List
iWeb Discussion Point
Cool iWeb Widgets
More iWeb Widgets
iWeb Showcase

Replace the html addresses and names with your own, with each menu item on a separate line as shown.

To have the menu default to a particular selection, add selected=”selected” next to the item you want. In my example above, you can see the default I’ve selected is Articles.

To alter what goes in the click button, type what you want under value. I’ve chosen to put Go! in mine.

Now you need to add some code to the header of the page as I’ve mentioned above. This is necessary to define the javascript function that calls the page when you click the Go! button. This is the bit of the HTML that I told you about earlier. The header of the page is that code that lies between the <head> and </head> tags. Scroll up in your HTML page and you should see these two tags.

The simplest way to paste code into the header is to add it immediately before the </head> tag in the code. The function code is here:

This is where MassReplaceIt comes in useful, because you could add a search to replace DropMenuHTMLHere with the form code and another bit of the same search to replace </head> in the same page with the function code and </head>. If you want a bit more background to using MassReplaceIt, look at this page here or on Will Englefield’s site here.

Save the file. That’s it. Try it out, see if your links work OK.

Function code

Copy and paste this code into your HTML widget or textbox or page

Notice how form1 has become form2, button1 has become button2, dropmenu1 has become dropmenu2 etc. Change the number for however many menus you want on the page. You need to do this so that the browser knows which dropmenu function to call when you click the button.

That’s all there is to it. Now please don’t ask me about jumpmenus - I’ll get into serious trouble with my wife and kids otherwise. I spend enough time playing on the computer as it is! ;-)

Donate | Site Help |

del.icio.us |

diggit!

Got any comments or feedback? Want to know more? Let me know!