iWeb FAQ - Drop down and tear down menus

iWebFAQ.org

How can I add a drop down or tear down menu in iWeb?

La stessa pagina in italiano Die gleiche Seite auf Deutsch

How to add a tear down menu or slide down menus and drop down menu to iWeb created websites is something asked really frequently. Unfortunately there was no answer to it for a while... But now there is...

Chapter 1: How to add drop down menus to iWeb

Chapter 2: How to add tear down menus to iWeb

Chapter 1: How to add drop down menus to iWeb

Here’s an example (links open in a new window because I’ve set them to do so, except iWeb FAQ):

1. Go to this website to choose a menu style and build your own menu (Thanks to Tomade)

2. Once you’re done with that download it and you will get a folder named “menu_XXX_XXXXX” where X are numbers. Rename that folder to “menu” (without quotes).

3. Now take the whole folder and upload the folder to the root (main location) of your server. So that entering

yourdomain.com/menu/index.html or yourdomain.com/menu/Installation_instruction.html

in your browser brings up the example page.

For MobileMe users: drop the folder into your iDisk/Web/Sites/ folder.

4. On your iWeb pages where you want the Menu to display add a text (code) like HereGoesTheMenu or something which is unique on your pages (just for the menu)

5. Publish your website to a folder or MobileMe

6. On your computer go to the “menu” folder and select the “index.html” file which contains the code/example of your menu. Depending on the menu this file could also be called “Installation_instruction.html”. Right click on it (ctrl-click) and select “Open with” and choose “TextEdit”. You will see something like this:

7. Go here to download MassReplaceIt (freeware). Once you downloaded it open it.

Read the the Alternative HTML FAQ to know how MassReplaceIt works (do it!)

8. In MassReplaceIt under Find enter HereGoesTheMenu or whatever code you typed where you want the menu to show up

9. In Replace you need to enter the html code of the menu you built and downloaded by doing copy&paste. In the example above the code would be

<div>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>

</div>

(this is an example, do not copy and paste this code, copy the code of the menu you built which you find in the “index.html” or “Installation_instructions” file as described above). Note that you need select the whole menu code as posted here (including the <div> tags).

10. Some of the menus need you to add some code to the <head> part of the page too. In the example of this page you see that there’s this line of code before the </head> tag:

Now we slightly change this code:

We included the “menu” folder into the path by adding /menu/ since that’s where our menu files are stored.

On MobileMe if you use the default http://web.me.com/YourUsername address the code will be

Now we need to setup another Find&Replace for this code to be added to the <head> part of our pages. In MassReplaceIt hit the “+” button. Under Search type:

</head>

under Replace:

11. In MassReplaceIt under Files add the folder of your website

- 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. Note that selecting the iDisk it will take some time until you can proceed to select /Web/Sites/

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

12. Save the MassReplaceIt Query

13. Click “Replace” and the HTML code will be added to your pages

14. Upload your website to your server using your FTP application (unless you use MobileMe then it’s already online)

15. Re-run MassReplaceIt every time you (re-)publish

Important note about MassReplaceIt settings:

- In Options select Search=Contents, Location=Entire file/Filename, Options=Search whole words

- In Preferences When adding a folder toa search list=Add a folder, Search folder’s name and contents

- In MassReplaceIt go to Mask click on "Add" "Search items whose:" select "Extension" From the other tear down menu select "is" and then type ".html" (without "") and click on "Add..." and select "All criteria, must be satisfied to search a file". Doing this speeds-up the process of searching.

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.

Chapter 2: How to add tear down menus to iWeb

Here’s an example:

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

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

<html>

<head>

<!--

function land(ref, target)

{

lowtarget=target.toLowerCase();

if (lowtarget=="_self") {window.location=loc;}

else {if (lowtarget=="_top") {top.location=loc;}

else {if (lowtarget=="_blank") {window.open(loc);}

else {if (lowtarget=="_parent") {parent.location=loc;}

else {parent.frames[target].location=loc;};

}}}

}

function jump(menu)

{

ref=menu.choice.options[menu.choice.selectedIndex].value;

splitc=ref.lastIndexOf("*");

target="";

if (splitc!=-1)

{loc=ref.substring(0,splitc);

target=ref.substring(splitc+1,1000);}

else {loc=ref; target="_self";};

if (ref != "") {land(loc,target);}

}

//-->

</script>

</head>

<body>

<!--

.combobox {

background-color: #000000;

color: #CCCCCC;

font-size: 8pt;

font-family: verdana;

font-weight: normal;

font-style: none;

}

-->

</style>

<form action="dummy" method="post"><select name="choice" size="1" class="combobox" onChange="jump(this.form)"

<option value="">Title of the menu</option>

</select>

</form>

</body>

</html>

Replace the Title of the menu with the title you want to display when the tear down menu loads. This will not be a link unless you with a link code as the other ones

Replace http://yoururl.com with the URL (address) of the page you want to open when people select that choice

Replace _top with _blank if you want to have the page opening in a new window instead of opening in the same window as you placed the menu

Replace name of the page with the title which 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 where it says .combox

If there are special characters in the titles you want to use 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 and paste the code in an HTML Snippet and hit Apply.

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 in the appropriate section of the Forum. 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. If you have questions about it post them there and I will probably try to give you an answer.

Thank you for visiting and supporting my website.

- Cédric -

iWebFAQ.org on Facebook

My other websites:

www.wordpressfaq.org
www.phpbbfaq.net
www.ebookstoretoday.com
www.canzoniere.org
www.musicwiki.info

iWeb FAQ Webmaster Guestbook Forum E-Books

Buy my iWebFAQ.org
E-Book (15$) (reviews)