Active Menus breaks if "ul.menu li" list-style-position is set to inside
DaniOrama - October 4, 2008 - 13:30
| Project: | Active menus |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | kmonty |
| Status: | needs review |
Description
Hello, I'm using Zen theme and I'm having a lot of problems with Activemenu in those browsers, I cannot click the bullets in Opera and IE, in Chrome it shows an Error when I try to expand and it stays collapsed. Any ideas? Thanks
#1
Doesn't work with all themes. Evidently not with Zen. Would need a patch on either Zen or activemenus.
#2
Same here, the recent update broke my templates
#3
the recent update doesn't work anymore in my Firefox, Chrome, Flock, Safari, Opera and IE7. all tested in Windows xp os and all updated to last avaible version.
Hope in a new release (the old one!!!) :-)
#4
I'm having the same problem. I'm going to do my best to solve this issue over the next two weeks (time permitting).
#5
#6
I just installed a fresh copy of Zen and ActiveMenus worked fine. Clearly it was something I did to my subtheme specifically. If I figure out what I did, I'll report back so people can attempt to fix their own themes.
Since this isn't a general Zen issue, I'm reducing the Priority since it does not effect all Zen users (maybe even a slim minority).
If anyone can share code regarding any modifications to the activemenus xhtml/css, please post it here.
#7
This was my problem for those of you who are interested.
I had set this css:
ul.menu
{
margin: 0;
padding: 0;
}
ul.menu li
{
list-style-position: inside; /* Incase the menu is expandable/collapsable, let activemenus display the appropriate icon */
}
Turns out activemenus requires the list-style-position to be set to "outside." This also means I have to have my padding-left property set to at least 1em. This isn't noted in the documentation, so maybe that would be a good addition. I'm going to see if I can patch the jQuery to allow for more flexible css rules.
#8
#9
The problem with setting list-style-position to inside was found starting at line 25 of activemenu.js. Basically, activemenu originally checked to see if the user had clicked in the padding between the UL and LI. When you set list-style-position to inside and the UL's padding-left to 0, it becomes impossible to activate the click action (as there is no space to click, as the +/- icon is inside the LI).
The original code:
var offset = Drupal.mousePosition(e).x - Drupal.absolutePosition(this).x;var padding = $(this).css('padding-left');
// Determine if we are in the selection area.
if (offset < (padding.slice(-2) == "px" ? parseInt(padding) : 18)) {
My solution was to instead check to see if the user clicked in the space between the UL and the first A. Maybe someone knows a better way to tackle this, however it works fine with both the Garland and Zen theme:
var offset = Drupal.mousePosition(e).x - $(this).children('a:first').offset().left;// Determine if we are in the selection area.
if (offset < 0) {
#10
This sounds like a good idea.
I'd appreciate some testing results. What themes tested? What browsers? What outcome?