Setting up Template Menus (Non-Drop)

Menu editing using Allwebco web templates

Once you have downloaded your Allwebco template you'll probably want to change the menu names or add or remove pages. Menu buttons are controlled by the "menu.js". You'll want to edit this file using Notepad, TextEdit or other plain text editing software.


Changing Link Names:
Open the "menu.js" in any plain text editor, like Notepad in Windows or TextEdit on Mac, and look for a line similar to one of the menu styles below. Edit the menu name by editing the code highlighted in red as in these examples.

Each menu link may be 1, 2 or 3 lines of code.


Menu Style #1 (responsive):

document.write('<a href="about.htm">About</a>');


Menu Style #2:

document.write('<td>');
document.write('<a href="about.htm" class="menu">About</a>');
document.write('</td>');



Adding a Link and a New Page:
See also adding and removing pages. Open the "menu.js" in Notepad and look for some lines similar to one of the styles below. Select the lines of code, choose "edit", "copy" then select somewhere below the lines and choose "paste". This will create a new link or button. Then, you will need to change the link or button name as well as the page name .htm code. In other words, every button or link has two parts to change after pasting. Change the code highlighted in red below. You can then either rename one of the current .htm pages or create a new page by copying and pasting a page similar to the one you want to use. Be sure the "new-webpage.htm" that you create and the button .htm code (in red below) match exactly. Once uploaded the webpage names are case sensitive.

Note: Do not use spaces in .htm page names. Use a - (dash) for any space.


Menu Style #1 (responsive):

document.write('<a href="about.htm">About</a>');


Menu Style #2:

document.write('<td>');
document.write('<a href="about.htm" class="menu">About</a>');
document.write('</td>');



Removing a link or page:
Open the "menu.js" in Notepad and look for a group of lines similar to the ones in the above examples. Delete the 1, 2 or 3 lines of code that comprise the menu tab. In some templates you will be removing only one line of code. There may be problems removing the first or last link. It's best to edit the first or last link instead (see above) and delete a different link.


Menu fonts and colors:
In "non-drop" menu templates, the menu colors with be in the bottom section of the .css file included with your template ("style.css" or "coolstyle.css" or "corporatestyle.css" or "mobi-style.css"). See the "help.html" included with your template download for the correct support links for your fonts, colors and menu.

Find the following note in your .css file(s).

/* START THE CODE FOR THE MENU */


Note for older template menus:
Templates with a copyright before 2009. If you have edited the very first link in the menu this may cause a problem because of the coding. You might get the wrong page to show up even though you have edited correctly. Look for the button name to have a <form action="page_name.htm"> before and a </form> after. These are called tags. Once a tag is opened it usually needs to be closed. As in the following example:

<span class="menu">some text</span>




Related Topics:
Links Not Working After an Edit
Buttons are Too Long
Adding and Removing Pages
Getting Started
Editing .js Files