glepiza
asked on
Drupal menu block
Hello Experts,
I was wondering, is there a way to add a different class to the each link in the drupal menu block? I can add a class to the block using the block class module, but I don't know how to add a class to each link of the menu block.
Attached goes a pic of the structure of my meny block using firebug.
I will really appreciate your help.
Thanks in advance,
Winter
PS. Also, do you know how can I rename that .leaf class?
Picture-9.png
I was wondering, is there a way to add a different class to the each link in the drupal menu block? I can add a class to the block using the block class module, but I don't know how to add a class to each link of the menu block.
Attached goes a pic of the structure of my meny block using firebug.
I will really appreciate your help.
Thanks in advance,
Winter
PS. Also, do you know how can I rename that .leaf class?
Picture-9.png
ASKER
Hi Thomas!, thanks for your answer, I am going to take a look at it.
I am trying to add an sprite image to the block menu to show active, hover and and visited state. That is why I need at least to have the class of each link
Thanks :)
I am trying to add an sprite image to the block menu to show active, hover and and visited state. That is why I need at least to have the class of each link
Thanks :)
Hmm, I don't see why you couldn't just use the classes you've already been given. The A tags have the "active" class if they are the page currently open. You can use pseudo classes for the rest, http://www.w3schools.com/css/css_pseudo_classes.asp.
The you could apply a CSS property like the attached. If it doesn't make sense refer to these,
http://www.w3schools.com/Css/pr_text_text-indent.asp
http://www.w3schools.com/css/pr_background-image.asp
Sounds like you want something similar to this, http://drupal.org/project/menu_icons. The module probably could be hacked a bit to do what you want.
The you could apply a CSS property like the attached. If it doesn't make sense refer to these,
http://www.w3schools.com/Css/pr_text_text-indent.asp
http://www.w3schools.com/css/pr_background-image.asp
Sounds like you want something similar to this, http://drupal.org/project/menu_icons. The module probably could be hacked a bit to do what you want.
.menu a {
text-ident: 30px;
background-image:url('regular.gif');
}
.menu a.active {
text-ident: 30px;
background-image:url('active.gif');
}
.menu a:hover {
text-ident: 30px;
background-image:url('hover.gif');
}
.menu a:visited {
text-ident: 30px;
background-image:url('visited.gif');
}
ASKER
Thanks Thomas,
I think I am going to use your advice. I wanted to add specific class to each link to be able to use one sprite image that contains the three link states instead of using different images for each link state. To use an sprite image I need to use a different background position to each link class. But I have a feeling that is going to take me longer than I expect to add those classes unless I use some javascript, what do you think?
Thanks again!
I think I am going to use your advice. I wanted to add specific class to each link to be able to use one sprite image that contains the three link states instead of using different images for each link state. To use an sprite image I need to use a different background position to each link class. But I have a feeling that is going to take me longer than I expect to add those classes unless I use some javascript, what do you think?
Thanks again!
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
Thanks Thomas!
ASKER
Could you please let me know what documentation should I read to add theme functions? I may want to give it a try later on, not today though :) Thanks.
ASKER
Thanks so much Thomas, I would give you more points if I could. Thanks very much.
Winter
Winter
What exactly are you trying to achieve?