iPad Templates
| Homepage |
| Allwebco Design |
| iPad Templates |
| Allwebco Hosting |


Image

Allwebco iPad Drop Menu Add-On:
HTML5 Version: To be used only in Allwebco iPad web templates

Important Note About Widths: When adding top level buttons do not allow your menu total width to exceed 766 pixels. To gauge this, shrink the browser to the width of the page lower content area. Your menu should not be wider than the content area.

Step 1:
Unzip the Addon: | Click for unzip help
After your download, locate the ipad-addon-dropmenus .zip file. Unzip this folder or copy the files in this zip file into your main iPad template folder.

Step 2:
Copy Files:
In the unzipped "ipad-addon-dropmenus" folder, copy the "menu-3LEVEL-SAMPLE.js" file in the "extras" folder into your template "extras" folder. Copy the 2 CSS files, the "menu_drop.js" and "help-addon-dropmenu.html" into your main iPad template folder.

Copy the 2 image files in the "picts" folder in the zip file into your template "picts" folder. These images are for the 3rd level option.

Open the "help-addon-dropmenu.html" that you copied to your template folder in your web browser.

Step 3:
Setup the Menu CSS Code:
This addon will use the menu code from your "coolstyle.css" for the top level menus, adding the following will setup the drop menu CSS code for the popup menu colors and layers so the menus will pop open.

Select either black or white below for the popout menu colors. Add the code from one of the 2 boxes below as the very first line above all other code in your "coolstyle.css".







Step 4:
Add Menu To Each Webpage:
The drop menu will only be added to the top of each page and not the bottom. The bottom will still use your current "menu.js". The drop menu must be added to each individual page. To add the drop menu, edit any of your HTML pages, locate the following code on about line 23 to 27 and edit "menu.js" to "menu_drop.js"

<script type="text/javascript" src="menu.js"></script>

Edit the above line to the following in 1 place in each HTML page:

<script type="text/javascript" src="menu_drop.js"></script>

Step 5:
Test Your Pages:
Open any one of your template HTML pages and try the drop menus. They should be working now. If these are not working try the steps on this page again from the start.



Options:


Edit the Drop Down Menus: | Drop Menu Editing | Adding Pages
This addon includes horizontal CSS menus. You can edit the menus as you need and add and remove links and pages. You will edit the "menu_drop.js" in a text editor to change the menu names and add items. Click for CSS horizontal menu help.

Menu Options: | More Details
There are options at the top of the "menu_drop.js" that you can change for "align" and "padding". Only edit the width option if you are having a menu "wrap" problem.

Fixing Menu Wrapping:
If you have added many top level menu buttons, you menu may start to "wrap" to the next line. If this occurs, edit the "menu_drop.js". Make the "var fixwrap" a "yes" and edit the "var menuwidth" with different width numbers until the menu stops wrapping.

Menu Align & the First Menu Line:
You can align the menu to the left, right or center in the "menu_drop.js". If you change the alignment, you may need to add a first line to the left of the first menu button. The following is how you can add a line to the first button by adding the "firstmenu" class to the first top level menu button.

<a href="index.html" class="menulink menu menuD firstmenu">Main</a>

Menu Colors: | More Details
Click the above link for info on drop menu colors, widths and other options.

Using a 3rd Level Drop Menu: | Drop Menu Editing
3rd level menus may not work on some mobile devices and should be avoided if possible. To setup and use a 3rd level: rename your "menu_drop.js" to "OLD-menu_drop.js" and then move it into the "extras" folder. Copy the "menu-3LEVEL-SAMPLE.js" from the "extras" folder into the main template folder. Rename this file to "menu_drop.js". Edit your new 3rd level "menu_drop.js" with your links.

NOTE: The 3rd level style menu can only be left justified and can not be centered or right justified.

Adding Pages: | Click for more details
You can add pages to your website by copying and pasting any one of the template pages and renaming it to whatever you need. You can then add links from the other pages and add links to the page in the menu by opening the "menu_drop.js" and copying and pasting one of the link buttons below itself. There are notes in the "menu_drop.js" to indicate the code to copy.



COPYRIGHT © Allwebco Design Corporation
Unauthorized use or sale of this script, images or any files included in this download is strictly prohibited by law. By purchasing this script you are authorized to use this on a single Allwebco template, website or any template from another company. You are also authorized to modify all included files for this single site use.