iWeb Tip #3 – 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!
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?
correction… I tried inserting: target=”_blank”
in between the url and the title of the option value.
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.
this is drop down does anyone know how to make this drop up thank in advance
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?
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.
I love (and will support when possible) this site. Is there a way to change the color from blue? If yes, how?
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>
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.
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?
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.
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
Hi there, congrats for the site!
I’ll wanna know8if is possible) change the font size… how to?
thank you,
Gonzalo