iWeb for Musicians

Build Your Own Navigation

Main Navigation:

 

Navigation

To help visitors find their way around your website you have to provide the tools so that they don’t get lost or confused and give up in despair. Websites are for informing people - not to make them play head games. Unlike a maze, you can escape a website with one click and never look back.


You’ve probably noticed by now that this website is divided into “Sections”. All of these sections are listed in the “Main Navigation” across the top so that if you get bored with one, you can quickly jump to another.


Each section has a “Sub Navigation Menu” to guide you through it. I have subtly made you aware of it by using the title “Navigate This Section:”.


I guess you have been wondering why I don’t use the standard iWeb navigation that generates itself as you add pages. You can’t easily alter the look, style and function of this menu and, if you have more than a few pages in your website, it starts to get out of control making your page look top heavy.


A lot of the visitors to your site will be those poor unfortunates using Internet Explorer on a PC. If Javascript is turned off in this browser, your menu will appear as a black dot!


The main reason for not using the default navigation is that it uses the pages names. From the point of view if SEO this is a deal killer. The actual page names that appear in the URL should contain keywords separated by a hyphen for the search engine spiders. Those in the navigation should make sense to us humans.


Important Note: If you do use the default navigation, at least provide an HTML version as well. You can add this to the footer as can be seen at the bottom of this page.

Building your own menu has a lot of advantages. You can....

Choose your own fonts and colors.

Have your links underlined or not.

Use different combinations  of colors and rollover colors.

Make it horizontal like my main menu or vertical like the sub menu.

Duplicate it at the bottom of long pages.

Insert hyperlinks to “external” pages which may be another site you have.

And so on.....

The menu is made in a text box, the links created in the “Link” inspector and then the whole thing is copied and pasted to each page of your site.

Here’s an example using different web-safe fonts and colors ............

Run your mouse down it to see the color changes.

Next Page

To create a "Back To The Top" button, select your button image as a hyperlink and set the URL to that of the page and add #.....


http://www.domain.com/Page-Name.html#


If you don't have a button, control click the one below, download it to your desktop and drag it onto the iWeb page.

To create your own text navigation, uncheck the box next to “Display navigation menu” in the Page inspector for each page of your site.


Build your own in a text box, create the hyperlinks using the Link inspector and then copy and paste it to each page of your website.

Menu in a Text Box

Copyright © Roddy McKay - 2009 - All Rights Reserved

Next Page

Find out more about adding custom features to a website...

If you want to make your own menu using CSS and HTML in a snippet, a simple example is shown below using a non web-safe font and the @font-face rule in the stylesheet.


You can style this until you are blue in the face and use a huge amount of available fonts from various sources.


View the source code of this page in the browser to see the CSS styles and the HTML layout. Copy it, paste it into a Snippet and add your own URLs.

CSS Drop Down Menu - Click HERE for an example

Next Page

The image to the left shows an accordion style drop down which can be uses for menus, content or even a complete website.


Click the image for more examples...

Accordions