By ye olde admin on

hello,

i made a custom tabbed menubar, that uses background pngs for list items of the different menuitems.

now, the classnames which drupal prints out are something like:
menu-476

how can style these elements elegantly without hardcoding these class names in the css?

eg. at the moment i would have to do style:

#nav ul li.menu-123 a:link,
#nav ul li.menu-123 {
	background-image:url(images/menu/news.png);
}
#nav ul li.menu-123 a:hover,
#nav ul li.menu-123.active a {
	background-image:url(images/menu/news_active.png);
}
#nav ul li.menu-321 a:link,
#nav ul li.menu-321 {
	background-image:url(images/menu/blah.png);
}
#nav ul li.menu-321 a:hover,
#nav ul li.menu-321.active a {
	background-image:url(images/menu/blah_active.png);
}

which seems very dirty to me ....

any suggestions welcome.

thanks

Comments

danny englander’s picture

danny englander
(he/him)
commented

You probably want something like Menu Attributes to help solve this issue.

Danny Englander | Twitter | Instagram

ye olde admin’s picture

ye olde admin commented

hello and thanks for the tip for menu attributes.
however, it does not solve my problem since my goal would be to not have to write a style for every background image.
you see, my menuitems have already an id which i could use to load a background image with, dynamically.

in my custom menufunction i can then use:

if (empty($link['id'])){
	$bg_image="inactive.png;";
}else{
	$bg_image=strtolower(check_plain($link['id']))."_".$is_active".png";		
};
$output .= '<li'. drupal_attributes(array('class' => $class)).'style="background-image:url('.globalAdr().path_to_theme().'/images/menu/'.$bg_image.')">';

this works very fine, however i dont seem to find a way to do this for a:hover, which would change the backgroundimage also pseudo classes are not allowed inline.
hmm, guess i have to resort to javascript for this one.

gausarts’s picture

gausarts commented

If dynamic or uncertain menu items is a must, I think menu icons may fit the need.
There is a patch for :hover in the issue queues if that is not committed yet.

love, light n laughter