RapidWeaver FAQ - Drop down menu







Share/Bookmark


How can I add a drop down or slide down menu in RapidWeaver?


Here's an example of this menu...



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 of your server (
What is the root of a server/website?). MobileMe users drop the folder into your iDisk/Web/Sites/ folder.

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 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 you find where it says “2) Copy and paste the code below to the desired spot in your site” 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 which you find in the “index.html” or “Installation_instructions” file as described above). Note that you need to select the whole menu code as posted here (including the div tags).

6. Paste the code into your post or page where you want the menu to appear
7. Once you added the code to RapidWeaver select it and go to "Format", "HTML" choose "Code".

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>



General troubleshoot


If the menu displays as text 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
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.

3. If you did everything as described and 1 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 what’s wrong.

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
RapidWeaverFAQ.org E-Book (15$) (sample)


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

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share