Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.
Initial Email From: Jeff
Initial Email Subject: CSS menu compiles with JavaScript?
Support Case Month: April 2013
Hi,
I am using AllWebMenus Pro version 5.3 build #908 to make a CSS horizontal dropdown menu. My understanding was that it would not require or use javascript at the cost of some of the more dynamic features. When I compile the menu and link it to my webpage though, It creates a "menu.js" file (along with a "menu.css" file) and this javascript code is inserted into the head tag of my linked page as well. Unfortunately, the menu is not appearing in Chrome version 26.0.1410.43 anyway.
I want a menu that is pure CSS. Why is the javascript file even being generated and is it really necessary? I appreciate the help in advance.
Jeff
Reply From: Likno Customer Support
Dear Jeff,
When a menu is “Pure CSS”, this means that it is able to function without any need for JavaScript. Still, there is no reason to cut back on the extra features when the viewer’s browser supports JavaScript!
In our case, the generated JS file only adds some extra features such as keyboard navigation and compatibility for older browsers that could not support CSS menus (such as IE6).
If you remove the JS file you will see that your menu still looks the same and is fully functional with the mouse in all recent browsers.
Finally regarding Chrome 26, something must be wrong in your implementation, so I will need to see your page to find what is wrong. Please send me the URL so that I can have a look.
Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
Reply From: Jeff
Kostas,
Thank you for clarifying the inclusion of the javascript files but something there seems to be amiss. My menu visibility issue was a foolish error - I was using a CLASS to define the style rather than the default ID. (I would love to be able to specify this difference before compiling but Dreamweaver's "search and replace all" feature does the trick as well.)
Now if I leave the awmdata.js file attached to my index.php page then the menu appears below the header image (as it should) for only a second before popping the menu elements into the upper left corner of the page. Removing this link to awmdata.js at least puts the menu where it should be but there is also something with the size of the parent item when hovering over an element with a submenu. I also am not seeing the arrow icon I wanted to use to indicate that there is a submenu.
I seem to be required to define a static width+height for menu items. Is there no way to dynamically size a menu item to accommodate its unique size? Removing the width:0px from the #mainnav > li element seems to work but how would I opt for this within the AllWebMenus interface?
Jeff
Reply From: Likno Customer Support
Dear Jeff,
I just checked your pages and I see that you have removed most of the code from the CSS, so your menu is not really a menu anymore:
Regarding the top-left positioning, this is most probably because you have indeed set this positioning in the application. If you do not have any JavaScript, then the menu appears wherever you put the UL/LI code, but you can never have a pixel-perfect positioning this way. When you have JavaScript, then the positioning property of the application is used instead. I am guessing you have left this to the default which is top-left of window with an offset of 10px:
You could use a positioning Relative to Element with class=“container” to make sure that this works properly when you have JavaScript.
Regarding the “HasSubMenu image”, this is unfortunately one of the features that only works when you do have JavaScript enabled, as it is not possible to perform such checks with CSS. If you wanted this to work with pure CSS, then you would have to manually add the “daddy” to each LI that has a submenu, for example:
<ul id="mainnav">
<li><a href="treasurepools.x10.mx">HOME</a></li>
<li class="daddy"><a href="treasurepools.x10.mx/services">SERVICES</a>
<ul>
<li>
<a href="treasurepools.x10.mx/services/cleaning">
CLEANING
</a>
</li>
<li>
<a href="treasurepools.x10.mx/services/maintenance">
MAINTENANCE
</a>
</li>
<li>
<a href="treasurepools.x10.mx/services/construction">
CONSTRUCTION
</a>
</li>
</ul>
</li>
<li><a href="treasurepools.x10.mx/faq">FAQ</a></li>
</ul>
Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter
