Posted by danigrrl on July 2, 2009 at 9:42pm
| Project: | Nice Menus |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
Issue Summary
I'm trying to do Sliding Doors with Suckerfish on Nice Menus and failing miserably. What I'd like to do is to give the top-level LI's a subclass of "tab" so that only they receive the background image, and the children will just have a color; however, nothing I do seems to allow that. Is this a feature that either a) can be added, or b) is intended to be added? It seems like a common-sense thing, but I can't find it anywhere.
Comments
#1
Sliding doors require span tags around the menu item -- to view, check my development site: http://mngastro.advantagelabs.com (I am using sliding doors for angled tabs)-- added the function theme_links to the template.php file to add the span tags to the menu links
my difficulty is with the last dropdown.
#2
Sliding doors require span tags around the menu item -- to view, check my development site: http://mngastro.advantagelabs.com (I am using sliding doors for angled tabs)-- added the function theme_links to the template.php file to add the span tags to the menu links
my difficulty is with the last dropdown.
#3
Ideally, it would make sense to have a different class for each level. ie. nice-menu-level-0 for top level, nice-menu-level-1 for the first child, etc.
As a work-around, you can do this:
#block-nice_menus-1 .content>ul>li { /* .content is the div surrounding the main menu ul */
css for top-level here
}
#block-nice_menus-1 li ul {
css for sub-menus
}
#block-nice_menus-1 li li {
css for sub-menu items
}
If you need more levels, just add more "li"s.
#4
#5
I agree with this. If we just had a class called "top-level" or something that was specific to the top level of the menu, that would be perfect, since I think there's already a "children" class on the sub-menus. What I'm experiencing is that the settings I'm putting for the top-level li's are passing down to the children, no matter what I try to do, and the hover state on the top tabs disappears when you move on to the dropdown.
#6
danigrrl: did you try "#block-id .content>ul>li"? it works fine for me... although not in ie6, 'cause ie6 is crap: http://www.webdevout.net/browser-support-css#css2selectors . Thankfully, it's on its way out.
#7
Nice Menus is already spitting out a fricking ton of CSS selectors, but I can see how this could be useful in some use cases. The only way it would be considered as a new feature though is to have a patch against the dev version.
#8
Heh, someone created a separate issue for this with a patch: #797692: Add menu item depth to LI I've marked that one a duplicate, so let's keep the discussion over here, but please try that patch and see if it works for you.
#9
I've attached the patch here, for easier testing.
#10
Thanks for posting this. I was having a hell of a time gettin Cufon to select the top level menu only for font replacement (despite me having the knowledge to do it with css)
This worked perfectly
#11
I had to implement this feature (depth based classes), however I was using Drupal 7 & nice_menus-7.x-2.0beta2. I didn't really want to patch the module itself (also patch is for D6 version) but found I could use a theme hook to achieve the same result. I used parts of the provided patch in #9. This may not be the correct approach, but it works :):
Put into your theme's template.php:
/**
* Helper function that builds the nested lists of a Nice menu.
*
* @param $menu
* Menu array from which to build the nested lists.
* @param $depth
* The number of children levels to display. Use -1 to display all children
* and use 0 to display no children.
* @param $trail
* An array of parent menu items.
*/
function YOURTHEME_nice_menus_build($variables) {
$menu = $variables['menu'];
$depth = $variables['depth'];
$trail = $variables['trail'];
$output = '';
// Prepare to count the links so we can mark first, last, odd and even.
$index = 0;
$count = 0;
foreach ($menu as $menu_count) {
if ($menu_count['link']['hidden'] == 0) {
$count++;
}
}
// Get to building the menu.
foreach ($menu as $menu_item) {
$mlid = $menu_item['link']['mlid'];
// Check to see if it is a visible menu item.
if (!isset($menu_item['link']['hidden']) || $menu_item['link']['hidden'] == 0) {
// Check our count and build first, last, odd/even classes.
$index++;
$first_class = $index == 1 ? ' first ' : '';
$oddeven_class = $index % 2 == 0 ? ' even ' : ' odd ';
$last_class = $index == $count ? ' last ' : '';
// Build class name based on menu path
// e.g. to give each menu item individual style.
// Strip funny symbols.
$clean_path = str_replace(array('http://', 'www', '<', '>', '&', '=', '?', ':', '.'), '', $menu_item['link']['href']);
// Convert slashes to dashes.
$clean_path = str_replace('/', '-', $clean_path);
$class = 'menu-path-' . $clean_path;
if ($trail && in_array($mlid, $trail)) {
$class .= ' active-trail';
}
// Add menu item depth.
$item_depth = ' depth-'. $menu_item['link']['depth'];
// If it has children build a nice little tree under it.
if ((!empty($menu_item['link']['has_children'])) && (!empty($menu_item['below'])) && $depth != 0) {
// Keep passing children into the function 'til we get them all.
$children = theme('nice_menus_build', array('menu' => $menu_item['below'], 'depth' => $depth, 'trail' => $trail));
// Set the class to parent only of children are displayed.
$parent_class = ($children && ($menu_item['link']['depth'] <= $depth || $depth == -1)) ? 'menuparent ' : '';
$element = array(
'#below' => '',
'#title' => $menu_item['link']['link_title'],
'#href' => $menu_item['link']['href'],
'#localized_options' => array(),
'#attributes' => array(),
);
$variables['element'] = $element;
$output .= '<li class="menu-' . $mlid . ' ' . $parent_class . $class . $first_class . $oddeven_class . $last_class . $item_depth . '">'. theme('nice_menus_menu_item_link', $variables);
// Check our depth parameters.
if ($menu_item['link']['depth'] <= $depth || $depth == -1) {
// Build the child UL only if children are displayed for the user.
if ($children) {
$output .= '<ul>';
$output .= $children;
$output .= "</ul>\n";
}
}
$output .= "</li>\n";
}
else {
$element = array(
'#below' => '',
'#title' => $menu_item['link']['link_title'],
'#href' => $menu_item['link']['href'],
'#localized_options' => array(),
'#attributes' => array(),
);
$variables['element'] = $element;
$output .= '<li class="menu-' . $mlid . ' ' . $class . $first_class . $oddeven_class . $last_class . $item_depth .'">' . theme('nice_menus_menu_item_link', $variables) . "</li>\n";
}
}
}
return $output;
}
#12
The class needs a space at the end to be consistent (though for later, see #1124728: use implode() on classes rather than muck about with spaces).
Reworked the patch.