iWeb FAQ - Navigation menu FAQ

iWebFAQ.org

The navigation is the heart of a website. If the navigation is bad the whole website is bad. A good navigation is really important thus on this page you will find everything you need to allow a perfect navigation through your iWeb created website.

La stessa pagina in italiano Die gleiche Seite auf Deutsch

CONTENTS OF THIS PAGE:

1. The navigation menu doesn’t display (Go to: General troubleshoot)

2. Three ways of organizing your website if it has a lot of entries sorted in different categories/upper level Groups

3. Create your own navigation menu (change dimensions, font, ...)

4. About vertical menus in iWeb

5. How can I have pages which do not display in the navigation menu?

6. How can I have pages without the navigation menu?

7. How can I duplicate/repeat the navigation menu at the bottom of the page?

8. How can I have a menu in an iFrame like the iWebFAQ menu I see on the right side on this site so that I don’t have to update all pages each time I add a page?

9. How can I have drop down/tear down menus in iWeb?

10. Add an external link to the navigation menu

11. Make a Redirect

12. How to change the colors of the links on a Blog summary page

2. Three ways of organizing your website if it has a lot of entries sorted in different categories/upper level Groups:

You can’t build a second automatically generated navbar in iWeb. But you can easily make one manually.

- First

Build a textfield containing textlinks or picture-links to the pages you want to have a link to, then copy the textfield and paste it to all the pages it applies to. The textfield could be either vertical or horizontal. You see an example of this method at your right on this page and for the horizontal at the bottom of this page.

-Second

Another way you could organize your website is: having a site for every single upper level group so that the nav bar displays the links applying to the groups and then make a textfield linking to the different groups. So when you add a new entry it gets automatically updated (if you add a new group it doesn't and you will have to edit and copy&paste). I think you’re most likely to add a new entry than add a new group that’s why generating entries automatically makes more sense than generate groups automatically.

- Third

Build the pages of the categories. Those pages will be index-pages. On the index pages put the links of the entries of that category. Make sure that only the categories show up in the iWeb generated menu and the entries don’t. To make sure that the entries don’t show up in the menu have a look a look at point 5 of this page.

3. Create your own navigation menu (change dimensions, font, ...)

Unfortunately you can’t change the dimensions, the font, color and style of the iWeb navigation menu. Hence if you want to change the menu the easiest way would be to create your own navbar disabling the one created by iWeb (Have a look at point 6 of this page).

As previously told the first thing to do is create a Text Box

In that Text Box write the name of the pages you want to display in the navigation menu

Select the name of a page and open the Inspector, go to the Link Tab and check the “Enable as a hyperlink” box, select “To: One of my pages” and select the page you need. Of course you can also add links to external pages having them opening in a new window and whatever.

There you can also customize your navigation menu: decide which colors the links in the navigation menu should have by clicking on “Format”. Of course you can also decide which Font to use and so on. You could also have images instead of text links.

Once you’re happy with its look select the whole textbox, copy it and paste it to the other pages as well.

Creating your own navigation also helps Google indexing your site as described at point 2 of the Google FAQ.

4. About vertical menus in iWeb

You could use the textfield menu as previously mentioned on this page.

Further if you resize the nav bar (in iweb) to narrower width, the nav bar becomes vertical. As you will see doing this will move the whole page downwards so what you will have to do is take the main text area and move it upwards hitting Command(Apple).

5. How can I have pages which do not display in the navigation menu?

1. Open iWeb then select a page you don't want to display in the top navigation bar

2. Open the Inspector and go to the 'Page' tab

3. Uncheck the "Include page in navigation menu" box

4. Now this page will not appear in the navigation menu but the navigation menu will still appear on that page as the "Display navigation menu" is checked (unless you uncheck that one too)

6. How can I have pages without the navigation menu?

1. Open iWeb then select a page you don't want the top navigation bar to display

2. Open the Inspector and go to the 'Page' tab

3. Uncheck the "Display navigation menu" box

4. Now this page will appear in the navigation menu but the navigation menu will not appear on that page as the "Include page in navigation menu" is checked (unless you uncheck that one too)

7. How can I duplicate/repeat the navigation menu at the bottom of the page?

- I would recommend you to manually build a menu using a textfield inserting textlinks. This will help search engines to index your pages because search engines can’t look through the menu as it is javascript rendering. It will also help those visitors of your page using Internet Explorer as they might have some problems displaying the javascript rendering navigation menu. However when you add a new page you would have to insert a new link and copy&paste the textfield to the other pages as it wouldn’t update automatically.

- If you want to duplicate the iWeb javascript rendering navigation bar have a look at this post in the Apple iWeb Discussion Forums

(I’m not allowed to paste the code on my site)

8. How can I have a menu in an iFrame like the iWebFAQ menu I see on the right side on this site so that I don’t have to update all pages each time I add a page?

(basic HTML code knowledge recommended, but can also be done by copy&paste my codes and simply change a few things)

Please note that if you want to enable MobileMe’s comment feature post-publishing HTML editing may cause the MobileMe comment feature to not-work on those pages (workarounds are presented in the Feedback/comments FAQ on this site).

The advantage by adding a menu in an iFrame is that you don’t have to update the menu on all your pages each time you want to add a new page in it (like copy&paste a textfield to all pages replacing the old one). Instead you just have to update on one page: the menu page and that’s it.

What you do is:

1. Create a new page in iWeb which will be the menu page (Blank White or Black)

2. Give it the dimensions of the menu (Inspector=>Page Tab=>Layout) and the background color you want. Note that you can hit the magnifying glass and then choose the color you want from an image, a page on the web or whatever.

3. Now you need to write the html code of the menu. The following is part of mine:

<body>

a {

color: #0000FF;

text-decoration: underline;

}

a:hover {

color: #0000FF;

text-decoration: none;

}

a:visit {

color: #FF00FF;

text-decoration: underline;

}

</style>

<b>iWebFAQs</b>

<br />

<br>

</font><font size="2">- <a href="http://iwebfaq.org/site/iWeb_Troubleshoot.html" target="_top">General Troubleshoot</a><br>

<br />

- <a href="http://iwebfaq.org/site/iWeb_Two_computers.html" target="_top">Two Computers</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Feedback_Comments.html" target="_top">Feedback/comments</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Statcounter.html" target="_top">Statcounter</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Retrieve_Website.html" target="_top">Retrieve Website</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Transfer_Site.html" target="_top">Transfer website</a><br />

- <a href="http://iwebfaq.org/site/iWeb_YouTube.html" target="_top">YouTube videos</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Folder_FTP.html" target="_top">Folder FTP</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Google.html" target="_top">Google</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Photos.html" target="_top">Photos FAQ</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Backup_Website.html" target="_top">Backup</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Friend.html" target="_top">Content for a friend</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Two_out_of_one.html" target="_top">Two out of one</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Multiple_websites.html" target="_top">Multiple websites</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Favicons.html" target="_top">Favicons</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Downloads.html" target="_top">Downloads</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Newsletters.html" target="_top">Newsletters</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Music.html" target="_top">Music & PopUp windows</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Forum.html" target="_top">Forum</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Forms.html" target="_top">Forms, Widgets, HTML Snippets</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Calendar.html" target="_top">Calendar</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Wrap_text.html" target="_top">Wrap text around an object</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Domains.html" target="_top">Personal Domains</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Footer.html" target="_top">Footer</a><br />

- <a href="http://iwebfaq.org/site/iWeb_iframe.html" target="_top">Scrolling Textbox or iFrames and Frames</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Navigation_menu.html" target="_top">Navigation menu FAQ</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Special_characters.html" target="_top">Special characters</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Multilingual_sites.html" target="_top">Multilingual sites</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Business_solutions.html" target="_top">Business solutions</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Templates.html" target="_top">Templates</a><br />

- <a href="http://iwebfaq.org/site/iWeb_Movies.html" target="_top">Movies and flash content</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Blogging.html" target="_top">Blogging</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Alternative_HTML.html" target="_top">Alternative HTML</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Google_Docs.html" target="_top">Google Docs</a><br>

- <a href="http://iwebfaq.org/site/iWeb_iWork.html" target="_top">iWeb and iWork</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Tables.html" target="_top">Tables</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Anchors.html" target="_top">Anchors</a><br>

- <a href="http://iwebfaq.org/site/iWeb_Guestbook.html" target="_top">Guestbook</a></font><br>

</p>

</div>

</body>

Change the name of the pages and the url to the pages. Change the width style parameter and add a height parameter if needed. Customize the link colors (you will find instructions on that on the frames page). You could also use image buttons instead of text for the links (instructions on the frames page previously linked).

And of course you can also make a horizontal menu by removing the <br> parts.

4. Once you did the menu code (we need the html code because we need the target=”_top”) paste it into an html snippet on the menu page we built in step 1&2.

5. On the pages where you want the menu to appear make a textbox with the following text MenuGoesHere1 (if you have multiple menus change the 1 into 2, 3, 4, ...) and make the textbox being the size of the menu.

6. Publish your website to MobileMe or to Folder

7. Download MassReplaceIt (it’s free) and open the application

8. In the Search field type MenuGoesHere1

9. In the Replace field paste the iFrame html code that embeds the menu page in the pages you wrote MenuGoesHere1 on. Here is my code:

<iframe src=

"http://iwebfaq.org/frames/Frames/iWebFAQmenu.html"

style="width:147px; height:1250px;

border-color:#990033;

border-style:solid;

border-width:0px"

scrolling="auto" >

</iframe>

Change the url to the url of the menu page:

http://baseurl.com/sitename/pagename.html

(baseurl.com=web.me.com/username/ for MobileMe publishers)

Change width height parameters to fit your case. Note that if a scrollbar is needed you will have to take into account on this code.

10. In Files add your website

(first be sure that in the Preferences=>General=>When adding a folder to a search list”=>”Add the folder” is selected)

- If you’re not using MobileMe and you export to a folder you have to select the folder you export your website to.
- If you’re using MobileMe you have to select the Sites folder on your iDisk.

If you can’t choose the iDisk because you don’t see it go to Finder/Preferences/Sidebar and check the box near the iDisk

11. Hit Replace all and MassReplaceIt will search for files it has to make changes to

12. Again hit Replace All and changes are made

13. Save the query for the next time you publish so you will only have to hit the Replace button

14. Now when you want to add a new page to the menu you only have to edit the html code of step 3, republish and that’s it.

15. Done.

Note: You have to repeat the procedure from step 11 to 12 every time you re-publish.

If MassReplaceIt didn’t work. If MassReplaceIt didn’t find any of the TextBoxes to replace with HTML codes. Read this MassReplaceIt & HTML troubleshoot page.

9. How can I have drop down/tear down menus in iWeb?

(It doesn’t work with HTML Snippets! Follow the instructions!)

Here’s an example:

1.First we need the HTML code for the drop down menu, so here it is for a five choices menu:

Copy and paste it into a texteditor so you can modify it as explained further on...

<!--

.combobox {

background-color: #000000;

color: #CCCCCC;

font-size: 8pt;

font-family: verdana;

font-weight: normal;

}

-->

</style>

<form>

<option selected value=””>Title of the menu </option>

<option value="http://iwebfaq.org/site/iWeb_FAQ.html" target="_top">iWebFAQ.org</option>

</select>

</td></tr>

</form>

Replace the Title of the menu with the title you want to display when the drop down menu loads. This will not be a link unless you put a url between the “”.

Replace “url of the page” with the url (address) of the page you want to open

Replace name of the page with the name of the page that should appear in the menu

To add more choices simply add more lines like this:

Of course you can also change the background color and all that stuff by modifying the style part of the code.

If there are special characters in the urls you will have to replace them with the html code

Example: “é” would be replaced with &eacute

A list of these codes can be found here.

2. Once you modified the code go to iWeb. Where you want the menu to appear on your pages make a Text Box with some text like “DropDownMenuHere” so you’re sure it doesn’t appear anywhere else on your site. You can add it to more than one page if you want to.

3. Publish your website to MobileMe or to Folder

4. Download MassReplaceIt (it’s free) and open the application

5. In the Search field type DropDownMenuHere

6.In the Replace field paste the code of the drop down menu

7. In Files add your website

(first be sure that in the Preferences=>General=>When adding a folder to a search list”=>”Add the folder” is selected)

- If you publish to a folder choose the folder you publish to from iWeb

- If you publish to MobileMe select your iDisk/Web/Sites/ folder where iWeb publishes to.

If you can’t choose the iDisk because you don’t see it go to Finder/Preferences/Sidebar and check the box near the iDisk

8. Hit Replace all and MassReplaceIt will search for files it has to make changes to

9. Again hit Replace All and changes are made

10. Save the query for the next time you publish so you will only have to hit the Replace button

11. When you want to add a new page to the menu you only have to edit the html code, republish and that’s it.

Note: You have to repeat the procedure from step 8 to 9 every time you re-publish.

If MassReplaceIt didn’t work. If MassReplaceIt didn’t find any of the TextBoxes to replace with HTML codes. Read this MassReplaceIt & HTML troubleshoot page.

10. Add an external link to the navigation menu

To inlcude an external page in the iWeb menu follow these steps:

1. Add an empty (Blank) page either Black or white or whatever

2. Name the page whatever you would like it to appear in the menu

3. Copy & paste the following code in an HTML Snippet

parent.location.replace('url of the external site');

</script>

4. Replace "url of the external site" with the url of the external site and that's it.

11. Make a Redirect

Sometimes you need to redirect your visitors automatically from one page to another

To do that copy and paste the following code into an HTML Snippet

var url ='url of the page';

var delay = 4;

var d = delay * 1000;window.setTimeout ('parent.location.replace(url)', d);

</script>

Replace url of the page with the url of the page you want people to be redirected to

The number 4 in the code stands for the delay time of the redirection, you can change it to fit your case

You coulod also use the " Add an external link to the navigation menu" code

12. How to change the colors of the links on a Blog summary page

1. Create your Blog and your first entry

2. Switch to the first page of the blog and make a new text box

3. Write something in it and turn it into a link (no matter what you write or what you link it to)

4. Go to the link format tab of the Inspector and choose the colors and settings you want to have the blog entries page links on the first blog page

5. Now select the Blog summary part of the Blog (where the entries display in)

6. With the Blog summary part selected switch to the entries page and then switch back. The link colors are now changed and you can delete the TextBox you made at step 2

iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s presented by Cédric and hosted by HostExcellence.com

I would like you to give me feedback on this page by commenting here. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what.

Thank you for visiting and supporting my website.

- Cédric -

My other websites:

www.musicwiki.info

www.ipse-dixit.org

www.canzoniere.org

Welcome Webmaster iWeb FAQ Guestbook Forum