Dropdown Menu with Wyodor's method


Advantages & Disadvantages:

  1. +you can have a link below the menu. Try this one . The widget can be very small, as small as possible (e.g. 40 px x 100 px) and don't need to be where the menu displays.

  2. -you don't see the menu in iWeb, you need to publish.


Build your menu.

Download the folder "menu_XXX_XXX".

Inside this folder, you will find

  1. 2 HTML files (installation_instruction.html, sample.html) and

  2. a folder named menu  : this folder will uploaded to your server later

If you choose the same template, an small image (sub_sep.gif) seems to miss in images folder (in the menu folder) here's mine (right click > download as...)

FTP software (FTP) or Finder (MobileMe):

Upload the folder named menu into your root folder.

FTP: you need a FTP software (e.g. Transmit, Cyberduck, FileZilla etc.). the root folder name is often www,web or Public_HTML

MobileMe : Finder > Menu Bar > Go > iDisk > Web > Sites. Drag and drop menu folder into this Sites folder.

Notice that you will often find your Sitename folder and the index.html file created by iWeb in this root folder.

Get the URL of your images and the menu_style.css file,
e.g. menu_style.css URL:

  1. http://www.yourdomainname.com/menu/menu_style.css

  2. http://web.me.com/yourusername/menu/menu_style.css

  3. http://www.yourhostername/youraccountname/menu/menu_style.css

  4. http://youraccountname.yourhostername.com/menu/menu_style.css

e.g. imagename.gif URL:

  1. http://www.yourdomainname.com/menu/images/imagename.gif

  2. http://web.me.com/yourusername/menu/images/imagename.gif

  3. http://www.yourhostername/youraccountname/menu/images/imagename.gif

  4. http://youraccountname.yourhostername.com/menu/images/imagename.gif

Make sure that these URLs are true.

Text Editor:

CCS code:

Open the uploaded css file named menu_style.css with a text editor (e.g TextEdit, Fraise)

Replace all paths of the images by their URLs

.menu li a {
    background: #333333 url("images/seperator.gif") bottom right no-repeat;

.menu li a {
    background: #333333 url("http://web.me.com/youraccountname/menu/images/seperator.gif") bottom right no-repeat;

Save menu_style.css.

HTML code:

Open a new plain text in TextEdit (not a RTF!) or a new file with another text editor (e.g. Fraise)

  1. 1.Paste the code you find in installation_instruction.html, except the first line.

  2. 2.replace each target="_self" by target="_top",
    <li><a href="http://iweb.debutersurmac.com" target="_self" >Home</a>

    <li><a href="http://iweb.debutersurmac.com" target="_top" >Home</a>

  3. 3.Save your file, name it menu.txt

  4. 4.Upload this file to your server (put it into the menu file)

  5. 5. Get its URL

e.g. menu.txt URL:

  1. http://www.yourdomainname.com/menu/menu.text

  2. http://web.me.com/yourusername/menu/menu.text

  3. http://www.yourhostername/youraccountname/menu/menu.text

  4. http://youraccountname.yourhostername.com/menu/menu.text

Wyodor's javascript file:

Download this file: wyodor_mymenu.js. ©Wyodor ( right click > download as...)

You need edit this file

Open this file with a text editor (e.g. Fraise)


  1. http://www.url/of/menu.txt by the true URL of menu.txt

  2. http://url/of/menu_style.css by the true URL of menu_style.css

  1. Cmd F

Upload it to your server, put it into the menu file .

Get its URL

e.g. menu.txt URL:

  1. http://www.yourdomainname.com/menu/wyodor_mymenu.js

  2. http://web.me.com/yourusername /menu/wyodor_mymenu.js

  3. http://www.yourhostername/youraccountname /menu/wyodor_mymenu.js

  4. http://youraccountname.yourhostername.com /menu/wyodor_mymenu.js


HTML Snippet Widget:

  1. 1.Paste this code in a HTML snippet widget:

    <script language="JavaScript" type="text/javascript">

    var headID = parent.document.getElementsByTagName("head")[0];
    var newScript = parent.document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = '

    // -->

  2. 2.in this code,  change http://www.url/of/file/named/wyo_mymenus.js

  3. 3.check "apply".

  4. 4.Resize the widget as small as you can.

Text box:

In a new text box, write this dummy word: _MyMenu_


Don't customize this text box.

Move this text box where you want to display your drop down menu.

Bring this text box to front. Send the objects (images , shape, other text boxes) near this special text box backward.


Visit your website (clear browser cache, refresh your page).

Special thanks:

Special thanks to Wyodor.

His demo and his explanation : http://cafenoir.atspace.com/roodhout/How_To_Do.html

Other Wyodor 's demos :

horizontal menu :



Drop down menu



Vertical menu






< Previous  |  Home  |  Next  >