Drop down menu

How can I add a drop down menu to my website?

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

Entering http://yourdomain.com/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 using the Raw HTML plugin
7. How to add it to your theme replacing the theme's menu is described in my WPFAQ.org E-Book (sample)

General troubleshoot

If the menu displays as text or if you experience any other problem...

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.

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 WPFAQ.org E-Book (sample)

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

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
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

Comments are closed.