iWeb FAQ - Navigation menu FAQ

CONTENTS OF THIS PAGE:

- Two ways of organizing your website if it has a lot of entries sorted in different categories/upper level Groups

- Create your own navigation menu

- About vertical menus in iWeb

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

- How can I have pages without the navigation menu?

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

- 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?

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

Two 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 10 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.

Create your own navigation menu

As told in the previous question 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.

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.

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.

About vertical menus in iWeb

You could use the textfield 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).

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)

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)

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)

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 .Mac’s comment feature post-publishing HTML editing may cause the .Mac 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://alyeska.altervista.org/en/iWeb_Troubleshoot.html" target="_top">General Troubleshoot</a><br>

<br />

- <a href="http://alyeska.altervista.org/en/iWeb_Two_computers.html" target="_top">Two Computers</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Feedback_Comments.html" target="_top">Feedback/comments</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Statcounter.html" target="_top">Statcounter</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Retrieve_Website.html" target="_top">Retrieve Website</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Transfer_Site.html" target="_top">Transfer website</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_YouTube.html" target="_top">YouTube videos</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Folder_FTP.html" target="_top">Folder FTP</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_iWeb_Google.html" target="_top">Google</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_iWeb_Photos.html" target="_top">Photos</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Backup_Website.html" target="_top">Backup</a><br />

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

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

- <a href="http://alyeska.altervista.org/en/iWeb_Multiple_websites.html" target="_top">Multiple websites</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Favicons.html" target="_top">Favicons</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Downloads.html" target="_top">Downloads</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Newsletters.html" target="_top">Newsletters</a><br />

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

- <a href="http://alyeska.altervista.org/en/iWeb_Forum.html" target="_top">Forum</a><br />

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

- <a href="http://alyeska.altervista.org/en/iWeb_Calendar.html" target="_top">Calendar</a><br />

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

- <a href="http://alyeska.altervista.org/en/iWeb_Domains.html" target="_top">Personal Domains</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Footer.html" target="_top">Footer</a><br />

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

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

- <a href="http://alyeska.altervista.org/en/iWeb_Special_characters.html" target="_top">Special characters</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Multilingual_sites.html" target="_top">Multilingual sites</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Business_solutions.html" target="_top">Business solutions</a><br />

- <a href="http://alyeska.altervista.org/en/iWeb_Templates.html" target="_top">Templates</a><br />

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

- <a href="http://alyeska.altervista.org/en/iWeb_Blogging.html" target="_top">Blogging</a><br>

- <a href="http://alyeska.altervista.org/en/iWeb_Alternative_HTML.html" target="_top">Alternative HTML</a><br>

- <a href="http://alyeska.altervista.org/en/iWeb_Google_Docs.html" target="_top">Google Docs</a><br>

- <a href="http://alyeska.altervista.org/en/iWeb_iWeb_iWork.html" target="_top">iWeb and iWork</a><br>

- <a href="http://alyeska.altervista.org/en/iWeb_Tables.html" target="_top">Tables</a><br>

- <a href="http://alyeska.altervista.org/en/iWeb_Anchors.html" target="_top">Anchors</a><br>

- <a href="http://alyeska.altervista.org/en/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 .Mac or to Folder

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

8. In the Search field type MenuGoesHere

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

<iframe src=

"http://alyeska.altervista.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 page:

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

(baseurl.com=web.mac.com/username/ for .mac 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 .Mac and you export to a folder you have to select the folder you export your website to.
- If you’re using .Mac 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.

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

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://alyeska.altervista.org/en/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 .Mac 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 .Mac 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.

We would like you to give us feedback on this page by commenting here. Tell us if it was helpful. If it wasn’t tell us why. If you think something is missing tell us what.

If you have a question please make sure it is relevant to the content of the page. Look through our FAQs and look where it fits best. If you can't find any FAQ on the topic post on the main page of our FAQs. Please do not post your question to the main page if there's a relevant FAQ. However we recommend you to post questions to the AppleDiscussionForum for iWeb.

Thank you.

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.

Short URL of this page: http://navbar.iwebfaq.org

Welcome News Poems Journeys Photos Music Other iWeb FAQ