iWeb Tip #3 – Drop Down Navigation in iWeb


Drop Down Navigation in iWeb

Here’s a tip that will allow you to have a neat little drop down navigation menu in iWeb.  It might be handy for a site map, quick links, or even the main navigation of your site.  Here’s how:

See Demo »

This drop down will take the viewer to the link immediately on click.  Here’s how to do it:

Step 1:
Simply paste the following code into an HTML Snippet

<select id="menu" onchange="parent.window.location=this.value">
<option>--Drop Down Menu in iWeb--</option>
<option value="https://www.iwebunlimited.com">iWebUnlimited.com</option>
<option value="https://www.imaginatestudio.com">My Web Design Company</option>
<option value="https://www.learn2mac.com">Learn2Mac.com</option>
<option value="https://www.apple.com">Apple.com</option>
<option value="https://www.apple.com/ilife/iweb">iWeb on Apple.com</option>
<option value="https://www.google.com">Google</option>

Step 2:

Replace the items in RED with your URLs and your link text and your set.  It’s that easy!

Step 3:

Have Fun!


  1. Brett 16 March, 2010 at 16:50 Reply

    AWESOME feature and works great… but is there any way to get the links to open in a new window? I tried the following:

    but it didnt seem to work.

    Any Ideas?

  2. Robbie 12 June, 2010 at 17:49 Reply

    I did this menu and works but when you return to the page the menu title is not in the box. It is where you clicked to go to the wanted page?
    Any ideas. I read in the other menu tip that _parent was added to the line of text. i don’t know what that will do or the meaning of it, just noticed it.

  3. Paul Thurwachter 24 October, 2010 at 17:03 Reply

    Hi. When I input the code into the HTML snippet, the drop down menu appears fine in the iWeb program, but once I publish the site, I can’t see the drop down menu at all on the site. In fact, it’s the case for Flash in iWeb as well. I feel like I’ve tried everything. Can anybody help?

  4. Linda Siegel 26 January, 2011 at 08:03 Reply

    Make sure your HTML snippet is out in front of all other objects on the page. It can be a little tricky, so make a copy of the page before trying to get it behaving right.

    • iWebUnlimited 14 February, 2011 at 10:38 Reply

      You can always go into the CSS file and change the color of the text that way, or you could just put in some font styles right in the code. You would just add the font color code before the a tag, then just end it with the closing font tag. Here’s an example below:
      <font color="red"><a href="http://…">Your Button</a></font>

      • Joseph 8 March, 2011 at 15:55 Reply

        That’s cool. I guess you can just change to something like ? Will that work? Could you also write a line including how I could change the font size, and tell me what words/symbols to change for what size i want? Assume I know nothing.

        • Joseph 8 March, 2011 at 15:56 Reply

          Well it didn’t show where I wrote code in the comment, sorry. Do you just change the word font at the end to a font like arial?

  5. umberto 31 March, 2011 at 18:18 Reply

    Hi Jason

    First of all, many thanks fore your share of knowledge.

    At top you say that we could use this “drop down navigation menu in iWeb,,,,,, even the main navigation of your site”.
    Can you explain me how can I do that?
    Thanks once again.

  6. Doug 21 August, 2011 at 20:19 Reply

    awesome tips. quick question, my menu opens up the first link you click on in a new window and then any following stays in that window. ive tried _parent, _self etc… to no avail. please help. site is harmlesscoconut.com

    thanks so much

Leave a reply