css Menu GeneratorQuestions and Answers... CSS Menu Generator: Questions & Answers |
Features:
-
Can I Save Menu Structure?
Yes, since version 3 you can.
To save current menu structure - click "save" button (top-right); To open -- use the "open" button.
-
Can I Save Color Settings?
Yes -- after version 4.0 this is finally possible.
In fact, there are many save/load options. You can save given settings as "preset" or save the whole project.
-
Browser Compatibility?
I tested the menus with IE6, IE7, IE8, FF 2, FF 3, MZ 1.7, Opera 9, Safari 4. In the previous version there were troubles with IE6, but now they are fixed...
-
Does generated menu require JavaScript?
No, the menus doesn't require JavaScript. All the menus are css-only
More Help:
-
How to get help?
Just play with the tool. Generate some menus, take a look on the generated "template"...
I realize that I must write some more tutorials and guides, and I will try to fill this soon or later. Just check the "help" section from time to time...
-
Centering the menu
The program currently doesn't support centering in the WYSIWYG editor and if you want to get the menu centered you must play with the css settings...
Read this blog post in order to start (or wait for next version of the program which should fix that)
-
Can I use the menu with Homestead/Yahoo Site Builder?
The tool was never designed to work with such online site builders. I never used those things and I cannot be of big help in case of troubles. There are some (more or less) successful usage cases in Homestead Site Builder. But still -- I can't promise you it will work. Don't buy the tool if you plan to use it for such sites, please. Test with the free version because I can't promise it will work at all...
Troubles:
-
Menu doesn't popup in IE7 or 8 or 9
Sometimes the menu works in some versions of IE, but doesn't in others. And sometimes it is because of wrong DOCTYPE definition. Check the very first lines of your html file, if they look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
or this (old WYSIWYG editors used to miss the DOCTYPE at all):
<html>
then you may get a problem with IE7, 8 or 9. It seems IE is very sensitive to this doctype definition (or the lack of doctype definition). The proper one should be like these:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Read this page for proper DOCTYPE definitions:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Take a look on this blog post too:
IE and proper !DOCTYPE definitions
-
Menu popups behind flash movie (there is an object on top of the drop-down menu)
If you have a flash movie right on top of the page (or similar object), you may see the drop-down menu going behind (under) the object. If that happens, you may need to play around with the z-index settings in the css code and with the object embedding code itself. Each case could be different, but here is the general rule...
1) Go to the CSS code and add z-index values to the menu selectors:
.mainmenu{
z-index:999;
width: 15em;
padding: 0;
float: left;
}
.mainmenu ul {
z-index:999;
float: left;
width: 100%;
list-style: none;
line-height: 1;
color:#000000;
background: #b5b594;
padding: 0;
border: solid transparent;
border-width: 1px 1px;
margin: 0 0 0 0;
}
Then, the tricky part arrives. The workaround is to change the flash object wmode parameter to opaque. If the edit software you are using supports changing flash object params with some properties window -- look for the wmode setting If not -- you must find this inside the html code for the flash object itself (something like that):
<object height="355" width="730" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" id="movieObject">
<param name="movie" value="movie.swf">
<param name="play" value="false">
<param name="loop" value="false"><param name="quality" value="autohigh">
<param name="wmode" value="opaque">
<embed src="movie.swf" width="730" height="355" pluginspage="http://www.macromedia.com/go/getflashplayer" PLAY="false" loop="false" QUALITY="high" wmode="opaque">
<noembed><a href="http://www.macromedia.com/go/getflashplayer">Flash Required</a></noembed>
</embed>
<div style="position: absolute; top: 25px; left: 0px;"><a href="http://www.macromedia.com/go/getflashplayer">Flash Required</a></div></object>
- In IE, when you mouse over the main item, the drop down appears, but when you
try to choose one of the sub-menu items, it disappears
That happens in some cases when the top-level menu background is transparent. (The problem occurs only in the original css menu with no background images, the css menu "plus" version doesn't have such problems) It looks like IE doesn't like transparent backgrounds here... However, to fix that bad behavior, we just need to add transparent background image (invisible for the visitors but visible for the IE browser). Here is how to do it:
In the style.css file (where the menu css is), you have similar to this code (lines 20-29):
.mainmenu ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
color:#FFFF00;
background: #000080;
padding: 0;
border: solid #A0A0A4;
border-width: 1px 0;
margin: 0 0 1em 0;
}
You need to add a background-image file here (as shown in bold below):
.mainmenu ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
color:#FFFF00;
background: #000080;
padding: 0;
border: solid #A0A0A4;
border-width: 1px 0;
margin: 0 0 1em 0;
ackground-image:url(transparent.gif);
}
Now, download the transparent.gif image from here (right-click and "Save As...") and upload it to your server (in the menu root folder)
-
"Check for Updates" Button doesn't work
The reason for this is, usually, in some antivirus/firewall software installed on your computer.
Please, check also your internet connection.
-
Vertical / PullDown menu doesn't work in old IE6!
It works now, because I rewrote the code in version 3.0.
Just download the latest version from the download page.
