Setting up vertical CSS Dropdown Menus
This support page is for vertical CSS drop menus only. Vertical CSS drop menu templates include a menu.css. If you do not have this file you have either a horizontal CSS menu or a Javascript drop menu. See the help.html with your template for links to edit your menu.js.
Changing menu names or links:
You can edit all the menu and submenu titles (names) and links. Open the menu.js in Notepad or any plain text editor. Check the visual link below. You will find the link code shown part way down the menu.js.
Adding a new sub menu link:
If you would like to add a new item to the popup menu, first, open the menu.js in Notepad or any plain text editor. Check the visual link below. You will find the link code shown part way down the menu.js.
Adding top level buttons:
If you would like to add a new top level menu item, or "button" on the menu, open the menu.js in Notepad or any plain text editor. Check the visual link below.
Menu widths:
Sub menus must all have the same width. You can however edit this width. Edit the menu.css to change this. See the visual below.
Menu colors:
All the colors used on the menu can be edited. Edit the menu.css to change these (see visual below). Be sure to backup your files before you do any edits. You may also need to edit the "menu.gif" and "menuon.gif" images in your picts folder.
Adding a button with no dropdown menu:
Copy and paste the line in your menu.js as indicated in the visual below: First link (no sub menu)
To make solid colored menus with no images:
If you do not want to use the menu.gif images for the top level buttons you can remove this code and have menu buttons that are a solid color and easy to edit. See visual below:
Adding a button that opens in a new window:
Your menu may include a sample new window link for the "PDF help files" menu item in your menu.js. New window links have this extra code highlighted below to open in a new browser window:
document.write('<li><a href="PDFgallery.htm" target="_blank">PDF help files</a></li>');
Multi-Level drop menus:
With the CSS drop menus you can add another level to the drop menus. Allwebco does not provide support for this type of editing and it is suggested that only experienced users try this type of menu. Below are some options for using this multi-level menu.
Be sure to make a backup of your "menu.js" and your "menu.css" before you start editing.
2009 UPDATES:
Some 2008 Allwebco templates do not include the "3LEVEL" files as indicated below. We will be adding this to all 2009 templates. Please contact us if you would like the 3rd level menu files sent to you.
RECOMMENDED: If your template has an "extras" folder: In your "extras" folder you will find a file named "menu-3LEVEL-SAMPLE.js" and a file named "menu-3LEVEL-SAMPLE.css". Copy these 2 files into your main template folder. Rename your "menu.js" to "menu-old.js". Rename your "menu.css" to "menu-old.css". Rename the "menu-3LEVEL-SAMPLE.js" to "menu.js". Rename the "menu-3LEVEL-SAMPLE.css" to "menu.css"
EXPERIENCED USERS ONLY: If your template DOES NOT and never included a "menu-3LEVEL-SAMPLE.js" in your "extras" folder, or does not have an "extras" folder: It is suggested that only experienced users try this type of menu. We have provided a zip file with a "menu.js" and "menu.css" that have this next level setup if you want to give this a try. Click to download the css-menu-2-LEVEL.zip (this menu will not work on CSS menus that include little arrows. See paragraph above.)
EXPERIENCED USERS ONLY: In your template "extras" folder: Copy the 3rd level code near the bottom of the "menu-3LEVEL-SAMPLE.css" in the extras and add the code to your menu.css. Copy 3rd level menu link groups out of the "menu-3LEVEL-SAMPLE.js" in the "extras" folder and paste them into your current "menu.js". Copy the script at the bottom of the "menu-3LEVEL-SAMPLE.js" and overwrite the script at the bottom of your "menu.js".
NOTE: Be sure to test your changes in different browsers.
