Setting up horizontal CSS Dropdown Menus
This support page is for horizontal CSS drop menus only. Horizontal CSS drop menu templates include a "menu.css" (on Chrome templates this will be in your template "css" folder. If you do not have this file you have either a Vertical 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 popout area of the drop 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.
Top Level Menu widths:
Each top level menu button has it's own width that you can set in the menu.js. See the visual below.
Submenu widths:
Sub menus must all have the same width. You can however edit this width. Edit the "menu.css" file (on Chrome models this file will be in your template "css" folder) to change this. Example: Edit the "menu.css" or "blue-menu.css" in 4 or 5 places. See the visual below.
Menu colors:
All the colors used on the menu area can be edited. Edit these colors in your "menu.js". See visual below.
On Chrome templates: Edit the applicable CSS color file in the "css" folder to change colors. Example: Edit the "blue-menu.css" if you have the css.js set for blue. 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/color folder. Example: Edit the "menu.gif" in the "blue" folder inside the "picts" folder. All CSS color files include notes so you will know what area to edit. Also see the Chrome template help page.
Adding a button with no dropdown menu:
Copy and paste the line in your menu.js as indicated in the visual below: Last 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. Remove the "background-image" code in 3 places in the css file in your css folder. See visual below:
Adding a button that opens in a new window:
Your menu should 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:
Multi-Level drop menus:
With the CSS drop menus you can add another level to the drop menus. We do not provide support for this type of editing and it is suggested only experienced users try this type of menu. Below are 2 ways to use this multi-level menu.
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.
Be sure to make a backup of your menu.js before you start editing.
Copy menu link groups out of the "menu-3LEVEL-SAMPLE.txt" in the "extras" folder and paste them into your current menu.js.
In your template "extras" folder you will find a file named "menu-3LEVEL-SAMPLE.txt". Copy this file into your main template folder. Rename your "menu.js" to "menu-old.js" and rename the "menu-3LEVEL-SAMPLE.txt" to "menu.js"
