Posted by ctmattice1 on February 17, 2010 at 9:04pm
I'm working on a drupal 6 site that is using images in the menu. Getting them in was fairly easy using
ul.menu li,
li.expanded,
li.collapsed /* drupal override /
{
min-height:1px;
width:100%;
margin: 0 0 0 0.2em;
}
li.leaf {
height:70px;
width:100%;
background: url(images/Bar.jpg) repeat-x;
text-align: center;
padding: 1.1em 0 0 0; / LTR */
margin: 0;
}The problem I'm having is on child menu's, they are inheriting the image as well. If a css guru could help me it would so much be appreciated. All I really want is the main category to be imaged but none of children or the childs children if I'm making any sense.
as an example if I use the standard D6 menu item "Administration" all I really want is "Administration" imaged and none of it's submenus, but I'm looking to use the same image for all parent menu items.
Please help
Thanks in Advance
Comments
override the decendant selector
li.leaf li{background-image:none;}
Or just be more specific
primary ul.menu li { css stuff }
you have to put the number sign in front of primary of course. But it is being filtered out on this site.
Craig Bertrand
I'm Lost
@CraigBertrand; "primary ul.menu li { css stuff }"
I see the primary {css} stuff in the 6.1 version of zen, I don't see it in the 6.2.dev version. There is a varaible called $primary_links in zens template.php file but I'm not sure how I would apply it to what I'm attempting.
@portulaca;"li.leaf li{background-image:none;}"
Nope, doesn't work - when this is in I still get the child with background image.
I've looked at menu.inc but can't figure out how to get the parent link imaged. if there are children and the menu is set to collapsed then the li.collapsed is in effect which is gives just text as li.leaf is not called. when collapsed link is clicked and expanded then li.expanded is in effect. In either case all the childred get the image but not the parent. If it's a single menu item great it gets imaged.
I'd like to figure this out but for what I'm after I can setup a custom block to do what I'm looking for. Still looking for a answer to this as I think it would be a great feature for a theme to have any parent menu item have a image but not their children. Best yet would be if the parent could reside in either the navigation menu, the primary links menu, or the secondary links menu with a option to either turn "on or off", "any or all" parent images in theme settings.
got link?
It's hard to debug without looking at the site. If you see classes that appear on the children li have you tried using those to set the background-image to none?
li.collapsed,
li.expanded{
background-image:url(someimg.png);
}
li.collapsed li,
li.expanded li{
background-image:none;
}
If this doesn't give you ideas how to solve it you'll have to link us to the site.
Modifying the CSS expanded and collapsed
Hey, just to let you know I spent an hour on trying to figure this out. I am doing the same thing on my site (well trial site - I don't really use Drupal and am just now getting into it).
Once I found the solution I kicked my self in the ass for I wasn't paying attention to what was being changed.
use the CSS style: "list-style-image" instead of "background" or "background-image"
Ex:
li.expanded, li.collapsed {
list-style-image: none;
}