iWeb Tip #16 – Navigation Menus in iWeb

97
24913

Navigation Menus in iWebThis iWeb tip is all about navigation menus in iWeb.  I’ve had many request to get into menus.  Simple navigation is pretty simple in iWeb and you can make the navigation pretty customized.  Drop down menus get a little more complicated in iWeb, however it is possible.  This tutorial will show you how, so here we go.  Let’s start simple and go more and more complex.

View Demo »

The built in iWeb Navigation:

First as you probably have noticed iWeb gives you a navigation menu at the top of the page automatically and with each added page it adds a new text button at the top that is the same name as whatever you named your page in the sidebar.  It’s pretty convenient sure, but lacks any constumization at all to out site.  So if you want to keep it simple than just keep the built in navigation

Your own Text Navigation:

If you want to have a similar look as the built in navigation, but want to customize it.  The first thing to do is to go into the page inspector > Page Tab, and uncheck “Display navigation menu”.  That will take the auto-navigation off.  But now you have no links or ways to get to the other pages of your site.  So what you do is, simply make a text box type the name of your pages as you want them to appear, style it (i.e. fonts, sizes, etc, but don’t worry about color yet), then go to the hyperlink inspector and highlight the text word button one at a time and enable them as a hyperlink going to your pages.  Then go into the Hyperlink Inspector > Format tab to style the colors of the “Normal” state, the “Rollover” state, “Visited” state, and “disabled” state.  Then your done.  Copy and paste the text box onto all the other pages now and you have yourself a cutom text navigation.

note: I recommend creating all of your pages first, then make your Text Navigation so that you can link them to the pages and proceed to copy them to the other pages as well.  Also remember that any font that is not websafe could cause problems.  So if you font is a special font you can guarantee that the font will show up by making it an image.  To do that go to the Graphic Inspector and give the text box a shadow then bring the shadow opacity down to 5%.  You won’t be able to see the shadow, but now your text will be turned into an image.

Graphic Menu:

Another great way to stylize your navigation is to use graphics in iWeb.  You can use the shapes to create some pretty good looking menus.  Here’s an example simply using two rounded cornered square shapes and a text box.

Here’s my quick workflow for this menu: 1) Create shape 2) Size shape according to site size desires 3) Add gradient color with darker on bottom and lighter on top 4) Add 2pt white stroke 5) add shadow 6) Duplicate shape (Option + Drag shape, now you have to of the same shape) 7) On 2nd shape, remove shadow and stroke, and change top gradient color to white with 26% opacity and bottom gradient color to white with 11% opacity. 8 ) size the 2nd shape so it’s half the size height-wize as the 1st shape.  (this effect gives you the shine look) 9) Add stylized text box over the top of shapes.

Photoshopped Rollover Menu:

If you really want to spice up the graphic menu and own photoshop, then here’s a cool way to do it.  Take the same graphic menu that we created earlier and copy and paste it into photoshop. To do that you hightlight the 1st shape and press command + c to copy, then jump over to photoshop and press command + n or File>New and photoshop will see that you have something copied to the clipboard and will default to that size.  But you need to change the color mode from “Greyscale” to “RGB Color”.  Then press comman + V in photoshop or press Edit>paste and your shape you made in iWeb will be in photoshop.  You’ll need to add a shadow to your shape here (if wanted/needed) cause the shadows don’t copy over.  You can then copy and paste your highlight shape (the 2nd shape) in there too.  You can even copy and paste the text box if you want also, but you can just as well type the text in photoshop too.  Once it looks pretty good in photoshop, hold your mouse down on the crop tool until you see the slice tool.  Use that to draw boxes over the different buttons of your menu.  For example our graphic menu above has 5 buttons on it, so you would draw 5 squares with the slice tool.  Then choose file > save for web & devices, and be sure that it says to save as a PNG 24, choose your location to save and file name (I recommend naming them “up”) and hit save.  You will then see the result is a folder called images with your 5 sliced boxes as individual graphics.  These are your “Up” graphics.  Meaning this is what the buttons look like when they are just sitting there…when their up.  Then you go back in and find the main shape layer and use some photoshop trickery to change the color slightly.  You could change the hue so it’s a different color, the brightness, etc.  Whatever you do, we just want something that looks different.  So that when they rollover they see something change.  It could even be the text.  Once you have that looking different, choose file>save for web and devices again, save as PNG 24, choose save location (should be the same place as before), name (I recommend “over”), and hit save.  You will then have another images folder with your “over” images.  These are the images that will swap out when the user rolls their mouse button over the graphic.  We now need to put these graphics on our server (meaning MobileMe iDisk or your own server from say RAGE iWeb Web Hosting). At this point go to my rollover tip and follow those instruction on how to get the rollover effect now that you have the graphics, and the result is something like this:

You can see the working version in the demo.  If you’d like here is the photoshop file you can download to get you started.

Drop Down Menus in iWeb:

This is a big one.  I’ve had a lot of request for this.  The problem with drop down menus is that they get a bit complicated.  I wish they were as easy as a simple html snippet to paste in, but it’s not.  So I’ve tried to make this as simple as possible.  To do this you must understand (and I’ll try to explain this the best I can) that the first and foremost problem with putting dropdown menus into an html snippet is that drop down menus require a lot of room to drop down over the top of your content and every object in iWeb (shapes, text boxes, snippets, etc) is layered, meaning one is above another.  So what happens is that the html snippet needs to always be on the top layer above all your text boxes and shapes, etc, but if you have any links under your snippet they will not be clickable because you snippet needs to be as big as your longest and widest drop down link and everything else on your page will be underneath it, again making any links under the snippet unable to be clicked.  So I’m going to show you first how to get around this with out using html snippets where we modify the code after publish to get the desired effect.  Then I’ll show you how to do this using HTML Snippets (as long as you understand that everthing under your snippet will not be clickable ;-).

1) Drop Down Menu without HTML Snippet:

First simply make your links from a text box.  Similar to our text navigation above.  Then simply publish your iWeb page.  Find your publish html page and open it with an HTML editor (coda, espresso, textedit, etc) and add the below code right before the </head> tag:

[iWeb-Code=’Drop Down Menu2′]

You then change the code to customize it to your site and style.  The items your going to want to change are the items outlined in the comment code.  You’ll see to change font size, color, and most importantly your links which are outlined by “Menu1” and “Menu2”

Then you find in the code the text that you linked and add the line of code in blue, making sure the code looks like this:

<a href="My_Page_in_iWeb.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" title="My_Page_in_iWeb.html">The Linked text that people see</a>

You’ll notice that in the head tag code there is text called menu1 and the link code that matches also has a menu1 in it.  That how you put them together, and you can add as many sublinks as you’d like in the head code where the menu1 is.  Just copy the line and keep adding another menu1[3], etc etc.  That is only for one button.  If you have more buttons that need it, just copy the whole menu1 part in the head code, paste it below the 1st menu1 part and change it to menu2, then in your links do the same and change it to say menu2 and so on (Hopefully that makes sense).  Once your done, just save it and your in business.  Be sure to test it out, once it is working successfully put online and your set.  I’ll have a video tutorial on this as well as I tend to do with the more complicated tutorials.

2) Drop Down Menu Using IzzyMenu:

Another way to create drop downs is to go to IzzyMenu.com.  It’s totally free (just dodge the ads), then you can build a drop down menu in a nice little drop down menu creator, then they let you download your complete menu.  Once downloaded you’ll see some ads on it, you can get rid of these by opening up the IzzyMenu.html in an editor and delete this last line of code:

<div style="clear:both; text-align:center; padding:10px;"><a href="https://www.templateo.com"><img style="border:1px solid black;margin-bottom:5px;" src="templateo600x100.jpg" /></a><br /><a href="https://www.izzywebsite.com/go?izzymenudownload"><img src="download.jpg" border="0" /></a></div>

You can also delete the ad images usually called “download.jpg” and “templateo600x100.jpg”.  Alright, we’re almost ready.  You need to do one more thing to make it work properly in iWeb.  Because it’s going to be in an HTML Snippet we can’t have the links be “_self” links, we need them to be “_parent” or “_top”, so we need to go through our links in the IzzyMenu.html and make sure all the links open with the “_parent” code. So add this code target=”_parent” after each link so it looks like this:

<li class=”item_active“><a href=”https://www.iwebunlimited.com” target=”_parent“onMouseover=”cssdropdown.dropit(this,event,’dropmenu_101′)”><span>iWeb Tips</span></a></li><li><a href=”https://www.iwebunlimited.com/videotutorials/videotutorials.html” target=”_parent”><span>Video Tutorials</span></a></li>

<li><a href=”https://www.iwebunlimited.com/links.html” target=”_parent“onMouseover=”cssdropdown.dropit(this,event,’dropmenu_104′)”><span>Links</span></a></li>

<li><a href=”https://www.iwebunlimited.com/qanda/qanda.html” target=”_parent“><span>QandA</span></a></li>

<li><a href=”https://www.iwebunlimited.com/html_snippets.html “target=”_parent“><span>HTML Snippets</span></a></li>

Now that your links are working, you might notice the code in red.  That is what button you would like to have active on the page.  So if you wanted, you could make a duplicate of this menu for each button on your menu and just move the red code around to go on the page you want active.  If you don’t want it, just delte the code.

And boom we are done.  Post the Izzy Menu including all the folders that came with it on your server, perhaps in a folder called “izzymenu” and test it out by going to your url. i.e. https://www.mysite.com/izzymenu/IzzyMenu.html or https://web.me.com/myusername/izzymenu/IzzyMenu.html (mobileme users put the izzymenu folder in the idisk>Web>Sites>here).  Once you see your menu is working, we use the iFrame code to get it into iWeb.  Yay! We’re set.  Again remember that because it’s in a snippet any links under the drop down won’t be clickable.

3) Other Drop Down Menu’s to iFrame in:

CSS Play Download »

Free CSS Download »

Menu Matic Download »

Flash Menus:

Flash navigation can sometimes add a neat look and feel to your site and over 90% of all computers have flash installed on their machines.  But as we most know, that the iPhone does not have flash, as well as many other mobile devices.  So that’s why if you go this route you add some text links at the bottom of the page.  That way people can still navigate if they don’t have flash.

Simply go to FlashComponents.net and browse through their emence library of flash menus and purchase it, modify it (usually using the xml code), post it, and iFrame it in.  Don’t forget to make sure your links are _parent or _top.


Hope this helps you get some great navigation menus in iWeb.

97 comments

  1. James 10 February, 2010 at 12:34 Reply

    Have they changed the MobileMe address for access to the html file lately? I put my IzzyMenu folder and files under the Site folder on MobileMe and when I link the iFrame, it says that it cannot find the page I am looking for. I also tried to put the folder and files in the Public folder and when I reference it in the iFrame, it actually only brings up my MobileMe file directory and not the html file. Thoughts? Thanks Jason.

  2. AmethystScarab 12 February, 2010 at 00:13 Reply

    Hi. I watched the video tutorial 3 times now and followed to a T, but I can’t for the life of me get a drop down menu to appear. If I’m correct all you need is to drop this code in to get the drop down menus.
    – onClick=”return clickreturnvalue()” onMouseover=”dropdownmenu(this, event, menu1, ‘150px’)” onMouseout=”delayhidemenu()”

    I don’t know if it’s an errant space of smthng between lettters but I’m having a real hard time getting drp downs and that seems easiest

  3. Triggertrix 16 February, 2010 at 02:42 Reply

    Hi, i tried all of the Methods (almost, ok) that are described above. But all i get is a wired looking Menü without any Styles as the best Result. Can you help, please, i know you Guys surely have better things to do, but….

  4. Eternal Polk 22 February, 2010 at 07:26 Reply

    Just wanted to say this site is the hotness!! Opened up iWeb for me to use more and the video tutorials are on point!! I was not able to get drop downs using the first method but was able to with the “izzymenu” method. I’m using the adobe template and will put some hints up and a link when done.

    Thanks for this…it’s invaluable!!

  5. Nicole 2 March, 2010 at 22:05 Reply

    hey there,

    Thanks so much for such a great site. I was absolutely thrilled to get my nav bar up and running from izzy menu and have managed to get all the way to publishing to my own domain. It looks the way it should but is not linking to the appropriate pages and refreshing the window for the linked page.

    Any hints? I would be extremely grateful.

    http://www.nicolehannadesign.com

    There are two nav bars on the home at the moment, the drop down that is not quite working and the static link bar.

    thanks

  6. Benjamin 5 March, 2010 at 11:57 Reply

    This site is amazing! Thank you for making iWeb so easy!

    I have one question. I love your menu bar at the top. I understand how to make it but how do you add the search option? I have the widget for adding a google search but I prefer your rounded search box. How do I do that?

    Thank you.

  7. Robert 22 March, 2010 at 12:51 Reply

    iwebunlimited:

    i am having an issue with this code. For some odd reason if I start a brand new page in iWeb, I can get this to work, however; if i use this code in my existing page, it will not work??? i have even recreated the menu bar on my home page of the site, tried the code again, and still nothing. if possible, can you please view the source code and give me a pointer.

    Thank in advance.

    • Robert 22 March, 2010 at 14:25 Reply

      I think I figured it out now. The coding you have listed on this page makes the error for some reason? When i viewed the source of the “View Demo” page and copied that code, everything started to work??? Just a heads up, maybe this is why some people are having issues…

      Thanks…

  8. Dax 24 March, 2010 at 15:42 Reply

    HI-
    Great info! I was curious if you had suggestions on how to add images to a drop down menu along with text in iWeb?
    Thanks,
    Dax

  9. DD 7 April, 2010 at 11:56 Reply

    Hello! You are a wonderful resource for all of the iwebbers out here, who’s become bored with the limitations of the software.

    I got a small (?) problem. The links that I have created open the new page in a new window. How can I prevent this from happening?

    Thanks again!!

    • iWebUnlimited 14 August, 2010 at 23:09 Reply

      It depends on which menu you choose to do. All the HTML snippet methods you don’t, but the post-publish ones you do.

  10. metalchopstick 25 May, 2010 at 13:07 Reply

    Is there a way to make a sub menu within the drop down menu for the “Without HTML Snippet” example? I have a menu item with several different sub categories that I would like to make an additional drop down menu for.

    Thanks!

  11. Tevald 24 June, 2010 at 01:19 Reply

    Hi

    I LOVE your work – good going! and I use a lot of you tips. Lately I implemented the IzzyMenu in iFrame and it works GREAT … in Safari & FireFox – however I just discovered that in Explorer 8 the area of the iframe is NOT transparent…leaving a white box covering everything under the iframe not visible – 80-90% of all visitors are using explorer… is there a work-around?
    Thx 4 everything
    Tony

  12. Mike 10 July, 2010 at 14:50 Reply

    Hi, Just a quick tip for you and the readers. You can drag your colours directly from the iWeb colour palate into coda and it will convert it to the hex code for you.

  13. JJ 19 July, 2010 at 13:15 Reply

    I have tried every single way on my Mac, but none seem to work. All of the menus don’t look right. HELP!

    • iWebUnlimited 14 August, 2010 at 23:08 Reply

      JJ, for anyone to help we need a link to a page so we can look at your code so we can help you out. Post a link to the pages that don’t work and me or someone can help you. I’ve tested all these codes myself and all of them work. A good idea sometimes is to look at my example pages (that are working) and then press option + command + U and you can see the code that I have on my page and that usually can help.

  14. Hunter 23 July, 2010 at 17:07 Reply

    Hi,
    I’m following the dropdown with just HTML and was wondering if there is code I can add to make it “drop UP” as it were. I have my nav bar on the bottom of the page so that would be perfect!

    Thanks,

    Hunter

    • iWebUnlimited 14 August, 2010 at 23:03 Reply

      Sorry Hunter, this paticular code just drops which ever way it needs to. For example you can take a look at the site http://salivatestkitsstore.com you’ll see that the drop down menu is working on the top links and the bottom links. The top links go down and the bottom links go up. Simply because of the location of the buttons. So I guess if you did your navigation at the bottom of your page it would go up, but if it’s at the top it will automatically go down.

  15. Paul 8 August, 2010 at 09:23 Reply

    Hi,

    I have gone through the tutorial on drop down menus without html snippet and this is terrific. I would give it a try but in the video you seem to copy 2 different section of html code in the demo.html page. I have found the second one but cannot find the longest section. Would it be available by any chance on a sub-site or elsewhere ?

    All the best and thanks for this help; it is great not to use Dreamweaver and keep it simple using native Mac software.

    Paul

    • iWebUnlimited 14 August, 2010 at 23:02 Reply

      Daniel, I don’t know what code your missing, but all is there. Try watching the video tutorial I made if you’re stuck.

  16. Kelsey Deets 21 August, 2010 at 10:22 Reply

    Good blog! I genuinely love how it’s simple on my eyes and the information is well written. I am wondering how I can be notified whenever a new post has been made. I have subscribed to your rss feed which must do the trick! Have a nice day!

  17. Jeff 21 August, 2010 at 19:28 Reply

    hey Iwebunlimted,

    I have a slight dilema iwith the Izzy menu. I was able to import the menu and edit the code how I want the menu to appear, but when i go to the live site and use the menu the links load up in the html snippet, not the entire page.

    I am new to web design and I am sure I am missing a key component. here is the site if you could take a look to help me out.

    http://www.kranksforkids.org

    LOVE THE SITE!!!

    JEFF

  18. Donna 26 August, 2010 at 07:54 Reply

    Hi, I am having a problem placing the menumatic navigation bar into iweb (my website is not published online yet). I edited the downloaded index file so that it looks the way I want it to on the browser, however when I paste the html snippet on iweb, it just shows a bullet-point verticle text. Can you pls help?

    Thanks,
    D

    • iWebUnlimited 26 August, 2010 at 08:59 Reply

      Hey Donna, yeah. Try taking a look at my video tutorial on this in the video tutorial section. That should help you get squared away.

      • Donna 26 August, 2010 at 11:40 Reply

        Thanks for the prompt reply! Actually I did watch the video, but in the video (step 5) you used CSS play, not menumatic. I am not sure if menumatic is done any differently? I followed the video pretty much to the tee…

  19. Donna 27 August, 2010 at 09:29 Reply

    Hmm…you still haven’t really responded to my inquiry. I noticed about also that whenever someone asked a similar question to me, you gave them the same default answer to refer to the video tutorial…

    • iWebUnlimited 27 August, 2010 at 14:10 Reply

      Donna, Sorry this is a one man operation here and it’s hard to get to all comments on every post. But I try to help out when I can. You can see from my example of Menu Matic on the example page (https://www.iwebunlimited.com/examples/navigation/navigation.html) that to get MenuMatic to work you have to actually iFrame it onto your website. You’ll see that my menu here is actually located here https://www.iwebunlimited.com/examples/navigation/menumatic/index.htm and it’s just an html page, then it’s iFramed into iWeb using the iFrame code. That way the style stays intact. You could actually post the whole HTML in a snippet just be sure to include all the code included the head and body sections from top to bottom. Either way you do it it should work, just be sure you change all your links to be “_parent” so they work correctly.

      • Donna 27 August, 2010 at 21:46 Reply

        Thanks so much. I think the key missing link in the menumatic navbar creation is iFrame. Although you did mention it in one line on the latter part of the instructions, it wasn’t clear to me. I recommend you do a separate tip on iFrame alone and how to use it for navigation bars! Thanks!

Leave a reply

Facebook
Twitter
YouTube