iWeb FAQ - Drop down menus

iWebFAQ.org

 

How can I add a drop down menu to iWeb?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 

Share/Bookmark

Share/Bookmark


How to add a drop down menu, sometimes also referred to as pull down or slide 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 Tear down menu instead.


If you choose to follow this tutorial please concentrate. If it doesn't work in 98% of the cases it's because people didn't follow what I wrote in my tutorial.



Chapter 1: How to add drop down menus to iWeb

Chapter 2: Troubleshoot

Chapter 3: How to customize the appearance of the drop down menu (Basics)



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 www.cssmenumaker.com and choose a menu style

2. Go to Customize and build your own menu


Click on Add Button to add a title/category to the main menu (a URL is not required for these, unless you want to add it or you don’t want to have a submenu for that category)


To add the choices to display under the category (displaying when people point their mouse over the title, hence the sub menus) hit the green “+” near the category. Then hit Add Button. Type in the title of the choice, the URL and whether you want the linked page to open in the same window or in a new window. Of course you can add multiple choices for the sub menu.


Once you added the choices for the submenu hit Back To Main Menu to add more titles to the main menu and so on.


3. When you’re done click on Preview to see if everything looks like you wanted. If it does click on Download, Download Now and you will get a folder named “menu_XXX_XXXXX” where X are numbers.

4. Inside that folder you will find a folder named “menu”. Take the “menu” folder and upload the folder to the root (main location) of your server (If you don't know what the root is or how this is done read it here).


Entering http://yourdomain.com/menu/menu_style.css

or http://web.me.com/username/menu/menu_style.css

should displays this file in your browser. If it doesn’t and you see a Not Found message instead you didn’t upload the right folder or didn’t upload the “menu” folder to the right location.


5. On your iWeb pages where you want the Menu to display add a text like HereGoesTheMenu or something which is unique on your pages (just for the menu). Best would be if the TextBox where you type that text would take the entire page/content width. To make things easier you can also type HereGoesTheMenu in the main TextBox on your page instead of having an extra TextBox for it.

6. Publish your website to a folder

7. On your computer go to the “menu_XXX_XXXXX” folder you downloaded from the site and open the Installation_instruction.html file in Safari by double clicking on it. Copy the code which looks something like this


<style media="all" type="text/css">@import "/menu/menu_style.css";</style>

<div>

<ul class="menu">

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

<ul class="sub">

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

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

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

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

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

</ul>

</li>

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

<ul class="sub">

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

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

            <li><a href="#">Sample Menu</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>

<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 and note that you need to select the whole menu code as posted here)


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

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

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

10. In Replace you need to enter the html code of the menu you built and downloaded by doing copy&paste as in step 7

11. In MassReplaceIt under Files add your website's folder

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

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 the tutorial about using MassReplaceIt I wrote here or this Alternative HTML troubleshoot page.


16. If you would ever need to edit the menu you can also just edit the code without going through rebuilding the menu on the site.


To add an item to the main menu add


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


to add an item in a submenu add


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


in the <ul class="sub"></ul>


to add an item in the main menu with a submenu use


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

<ul class="sub">

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

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

</ul>

</li>


Instead of # add the URL you want the link to point to. Instead of Sample Menu type what you want to display as the link. If you want it to open in a new window add target="_blank"


<a href="#"> gets <a href="#" target="_blank">


If you don't want it to be a link it is recommended to use nohref instead of href="#"


<a href="#"> gets <a nohref>



Chapter 2: Troubleshoot


If the menu displays as text-links instead of displaying as a menu bar or if you experience any other problem...


1. Make sure you uploaded the right folder (hence the “menu” folder you find inside the “menu_XXX_XXXXX” folder and not the entire “menu_XXX_XXXXX” folder) to the right location (the root) and that entering

http://yourdomain.com/menu/menu_style.css

or http://web.me.com/username/menu/menu_style.css

displays this file in your browser. If it doesn’t and you see a Not Found message instead you didn’t upload the right folder or didn’t upload the “menu” folder to the right location.


2. If you did everything as described in the tutorial and 1&2 didn’t help post a question on my Forum and add a link to a page where you tried to embed the menu for me to see where you went wrong. There's no way for me to tell you what you've done wrong if you do not post a link to the page where you tried to embed the menu!



Chapter 3: How to customize the appearance of the drop down menu (Basics)


You will find some basic instructions on how to customize the look of the "standard" menu you see on this page in my iWebFAQ.org E-Book (sample)




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 -