Using the Minisite Drop Menu Addon on Other Templates

Allwebco drop down menu template applications

Adding the menu addon to a Minisite:
See the "help-addon-dropmenu.html" included with the Minisite drop menu addon to add this application to a Minisite template.

Editing the menu:
See the Setting up horizontal CSS Dropdown Menus support page for menu editing details, including adding new menus items and editing the menu colors.

menu ver 3.11mini 2010:
The following information applies to the addon "menu ver 3.11mini 2010". The version number can be found at the top of the "drop-menu.css". You can contact Allwebco for an updated version if you have a "3.1mini 2009" version.

Adding the menu addon to non-Minisite websites, or template models:
The Minisite drop menu addon can be used on other template models or existing websites, however, this is recommended for more experienced users and not recommended for templates that already include a drop menu. Below are some modifications you may need to make.

The Minisite drop menu addon is specifically designed for The Minisite Templates, however, it can be added to any website or template. Here are some modification you may need to do.

1. If adding this as a second menu to your template; In the unzipped "mini01-addon-dropmenus" folder from your download, rename the "menu.js" to "menu-drop.js". Add this line of code to each page you want the menu on:
   
   <script language="JavaScript" type="text/javascript" src="menu-drop.js"></script>
   
   
2. Do all steps on the "help-addon-dropmenu.html" included with the Minisite drop menu addon, but skip the copy images over step.
3. You may want to change the menu width. In menu version "3.11mini 2010" edit this code in the "drop-menu.css". You can use numbers like 500px or percents like 100%:
   
   .Dmenuwidth { width: 750px; }
   
   
4. The images included in the addon may have the same names as images you already have in your template. If they do and this is a 2nd menu you are adding; Rename the images in the addon "picts" folder. Then search for ".gif" in the "drop-menu.css" and edit the image names in this file with your new image names. Now you can copy over the images to the template "picts" folder.
5. If this is a menu replacement, copy over only the "menu-arrow.gif" from the addon. You may then need to do some editing in the "drop-menu.css" so the colors and fonts are the same as your old menu. See "Editing the menu:" above on this page.
6. Some templates include a "floating" left menu and the drop menu will be under this menu. In cases like this, you may need to experiment with where you add the minisite drop menu code to your HTML pages. You may need to add the menu.js line to the HTML page immediately after the page "body" tag, or you may need to add the menu just below the header or inside the "MAIN TABLE" area.
7. If your template or website includes clickable Flash items, you may need to use Flash detect code to have the Flash work in all browsers when set to transparent. You will need to check on the Adobe Flash support website for details on making Flash transparent with detection code. Otherwise, place the menu below any Flash on the page.
8. The "drop-menu.css" used in this addon may include "like" CSS code and cause formatting issues on your pages. If so, you will want to check the class names in the "drop-menu.css" against class names in your CSS file and make sure there are no "like" classes.
9. Be sure to test in multiple browser software like IE, Firefox, Safari and Google Chrome.

Note for iPad templates:
If adding the drop menu to an iPad html5 template model you will want to either use the included graphic logo option, or edit the "header.js" and change the "var logolayer" from "yes" to "no" for the drop menus to work properly.

Overlapping and Flash transparency:
If you are adding the drop menu above a Flash animation on the page, you may need to make your Flash code transparent.

In some 2010 and later templates "transparency" is a variable set in the "header.js" near the top named "var flashmode". If you do not have this variable check the following:

Example: If the drop menu is showing under the Flash header edit the template "header.js" something like the following adding transparent in 2 places. Add the 2 areas highlighted in red.

document.write(' <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="'+flashwidth+'" HEIGHT="'+flashheight+'" id="logo">');
document.write(' <PARAM NAME="movie" VALUE="logo.swf">');
document.write(' <PARAM NAME="quality" VALUE="high">');
document.write(' <PARAM NAME="bgcolor" VALUE="#'+color+'">');
document.write('<PARAM NAME="wmode" VALUE="transparent">');
document.write(' <EMBED src="logo.swf" quality="high" wmode="transparent" bgcolor="#'+color+'" WIDTH="'+flashwidth+'" HEIGHT="'+flashheight+'" NAME="logo" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT><br>');


You can also check on the Adobe Flash support website for details on making Flash transparent. Otherwise, place the menu below any Flash or video on the page.



Related Topics:
Links Not Working After an Edit
Adding and Removing Pages
Editing .js Files
CSS Drop Menu Help