iWeb FAQ - Tear down menus

iWebFAQ.org

 

How can I add a tear down menu to iWeb?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


How to add a tear down menu to iWeb created websites is something asked really frequently.


If the example on this page is not what you were looking for have a look at Drop down menu instead.



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>

<title></title>

<head>

<script>

<!--

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>

<style type="text/css">

<!--


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

<option value="http://yoururl.com*_top">name of the page</option>

<option value="http://yoururl.com*_top">name of the page</option>

<option value="http://yoururl.com*_top">name of the page</option>

<option value="http://yoururl.com*_top">name of the page</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.

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:


<option value="http://yoururl.com*_top">name of the page</option>


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.




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


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

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark