If I had a pound for every time I had been asked this question I would, without doubt, be a rich man by now. The one thing that all iWeb users seem to want to know is how to add a drop-down navigation bar to the top of their iWeb sites.
The reason this tutorial has been so long coming is simple. I wanted to wait until I could work out an ‘easy’ way to do it.
Before we start there are a few things you will need; the first of which is the URLs for all of the pages in your iWeb site when they are published to the internet.
Next you need to open up your browser and navigate your way over to purecssmenu.com and register for an account; if you don’t you can’t get the code for your nav-bar.
The reason I have chosen purecssmenu for this nav bar is purely ease of use. You can, of course, sit in front of your Mac and type out lines of CSS and HTML and then test it in a browser until it looks good; or you can use purecssmenu. In a nut shell it’s a WYSIWYG navigation bar designer which (if you don’t want to use one of their templates) gives you loads of options for building drop-down navigation specifically to fit your iWeb site’s design.
The well-designed GUI of purecssmenu allows you to add as many buttons as you like and of course, add the correct URL (as mentioned earlier-put it in the ‘Link’ box, bottom middle) for each one. You can then tweak the colors and fonts (using the ‘Parameters’ tab on the left) until you are happy.
Once you have designed the nav-bar of your dreams, you can select the ‘Download’ button to download a folder to your Mac.
Within that folder will be a page containing all of the code for your navigation and (if you used them in your design) a folder containing images.
Now it’s time to open iWeb. Obviously you will have to get rid of the standard nav-bar (using Inspector) and when/if you do you may notice that your page contents shifts up and you lose space at the top of the page.
Rather than drag everything down manually use Inspector to add or increase the size of the page ‘Header’.
Next, it’s time open the page you downloaded from purecssmenu; but not in a browser, in a html editor. Don’t worry though we are not editing it, we just need to see the code so we can copy it. Then go back to iWeb and drag a HTML Snippet into the new header area you created earlier.
Paste the code into that snippet and press ‘Apply’.
Your menu should now appear, but it’s not ready yet. To begin with you will have to drag the HTML Snippet height so that it will incorporate your drop-downs.
One thing I noticed when I tried out my menu for the first time was that the longer drop down parts sometimes went behind photographs and images that I had laid out at the top of the page. This is easily fixed however.
If you right-click (Ctrl+click) on the relevant image(s) a menu will appear. If you imagine your iWeb page as a series of elements all layered on top of each other then you can work out that the images are on a layer higher up the stack. All you have to do is ‘Send Backward’ the offending element (ie an image).
You can also use the ‘Arrange’ menu in the top tool bar.
Of course, you would think that bringing the nav-bar up to the top layer would suffice, but iWeb already thinks that it is; this is to do with the fact that the nav-bar is in the header portion whereas the rest of the content should be in the Body of the iWeb page.
You could ‘Send to back’ the image and then ‘Bring Forward’ as required, it just depends on how much you have on your web-page. This stage really is a case of ‘make adjustment then test’, ‘make another adjustment then test’ until you are happy.
If your downloaded folder contained another folder within it called ‘Images’ then now is the time to put that it in the right place. To do that you will have to save your iWeb site to a local folder and then navigate to it using ‘Finder’.
Your nav-bar will still work without the image, but there is no harm in highlighting which parts of your menu drop down is there?
Those of you with images can now publish your site using a third-party FTP app (if you aren’t with MobileMe) or copy/paste in Finder (if you are). If you didn’t have an image folder to copy then you can just publish as normal because you have used an HTML Snippet to add the menu.
Will you be using a drop-down menu on your iWeb site? Leave a comment and let us know, so we can take a look.