Apr 01

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

<form>
<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>
</select>
</form>

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!

13 Responses to “iWeb Tip #3 – Drop Down Navigation in iWeb”

  1. Brett says:

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

    but it didnt seem to work.

    Any Ideas?

  2. Robbie says:

    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. Jason says:

    this is drop down does anyone know how to make this drop up thank in advance

  4. 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?

  5. Linda Siegel says:

    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.

  6. Lumumba says:

    I love (and will support when possible) this site. Is there a way to change the color from blue? If yes, how?

    • iWebUnlimited says:

      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 says:

        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 says:

          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?

  7. umberto says:

    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.

  8. Doug says:

    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

  9. Gonzalo says:

    Hi there, congrats for the site!
    I’ll wanna know8if is possible) change the font size… how to?
    thank you,
    Gonzalo

Leave a Reply