CSS "current" class
I have a nav menu using UL, LI and images.
I have the inactive and the active working fine, but I just can't get the current working.
As the link text is actually in the image itself, I have a specific class name for each image/link.
/* inactive state */
#main_nav li a.home{
background:url(home_img.png);
}
#main_nav li a.about{
background:url(about_img.png);
}
/* hover state */
#main_nav li:hover a.home{
background:url(home_hover.png);
}
#main_nav li:hover a.about{
background:url(about_hover.png);
}What I want is the current class to be assigned to the same as the hover. This is normally easy when each image is the same, but as all my images have the link text in them, I need to assign the "current" class to each specific class.
eg
class="home"
OR
class="home current"
I have that working fine in the PHP, I just cannot get the CSS tied to the "current" with each specific class.
decibel.places posted this at 13:32 — 29th April 2009.
He has: 1,494 posts
Joined: Jun 2008
I usually apply the hover and active pseudoclasses to the a element, without classes:
#main_nav li a:hover, #main_nav li a:activeshould work with the class added:
#main_nav li a.home:hover, #main_nav li a.home:activefrom W3Schools:
the menu for this (Drupal!) site using a.active:
li#menu-479 a {background: url('/sites/default/files/theme/meier_btn_01_a.gif')}
li#menu-479 a.active, li#menu-479 a:hover {background: url('/sites/default/files/theme/meier_btn_01_b.gif')}
li#menu-739 a { background: url('/sites/default/files/theme/meier_btn_02_a.gif')}
li#menu-739 a.active, li#menu-739 a:hover {background: url('/sites/default/files/theme/meier_btn_02_b.gif')}
li#menu-481 a {background: url('/sites/default/files/theme/meier_btn_03_a.gif');}
li#menu-481 a.active, li#menu-481 a:hover {background: url('/sites/default/files/theme/meier_btn_03_b.gif');}
li#menu-482 a {background: url('/sites/default/files/theme/meier_btn_04_a.gif');}
li#menu-482 a.active, li#menu-482 a:hover {background: url('/sites/default/files/theme/meier_btn_04_b.gif');}
you may need to add padding to the a elements to display the bg image properly
ul.nice-menu li#menu-479 a {
padding: 14px 9px 25px 9px;
}
ul.nice-menu li#menu-739 a{
margin-left: 4px;
padding: 14px 17px 25px 24px;
}
ul.nice-menu li#menu-481 a {
margin-left: 4px;
padding: 14px 17px 25px 24px;
}
ul.nice-menu li#menu-482 a {
margin-left: 4px;
padding: 14px 43px 25px 8px;
}
greg posted this at 14:37 — 29th April 2009.
He has: 1,581 posts
Joined: Nov 2005
Thanks, but :active isn't really what I need.
I have two images for each page ("Home" "about" "contact" etc).
Per page I have one image for "not active" and "not current" and another image for "active" and "current".
Setting the image for non-active and non-current is fine, as is setting the other "active" image for :active, but I cannot tie the "current" to each image.
So when the user is on homepage, the CSS needs to know to use "home_active.png". for that I need it to know class="home current". As said, in the html that is done (with PHP), but I cannot get the CSS to tie ".home" class with ".current" class so when the HTL states "class='home current'" it will display the current image rather than the non-current and non-active one.
(As it happens, I use the active image for the current one too)
It has been driving me round the bend for hours now.
decibel.places posted this at 14:59 — 29th April 2009.
He has: 1,494 posts
Joined: Jun 2008
did you notice the active class
a.activein the code sample?you know the drill, a link or some more complete code will help!
I still think you should apply the pseudoclasses to the a tag and not to li....
Megan posted this at 15:06 — 29th April 2009.
She has: 11,421 posts
Joined: Jun 1999
So, basically what you're trying to do is apply two classes to an element and target them both in CSS, is that right? Why don't you use id's for the link titles? That would make it easier to do this. So instead of a home class it would be a home id (I'm assuming there is only one instance of this navbar on the page). In that case something like this would work:
#home.current (no space here)
I *think* this works - possibly not in older browsers though. Will have to check.
Or you could put the ID on the li and the .current on the a, so you'd have this
li#home a.current
or more simply
#home .current (notice the space)
Why is the text in the image anyway? Is it using a special font? Much easier to keep the text in HTML if possible (and better for accessibility, search engines etc.). Or are you doing an image replacement technique?
Megan
Connect with us on Facebook!
greg posted this at 15:36 — 29th April 2009.
He has: 1,581 posts
Joined: Nov 2005
I do usually put the text in with HTML, but on this occasion because of the way I designed the navigation images I had to do it this way, well, "wanted" to is a better word.
I'll have a go at your suggestions, although I presume I need to change both to classes.
.home to #home
and
.current to #current
or do I call id="home" class="current" in the same element?
Megan posted this at 16:19 — 29th April 2009.
She has: 11,421 posts
Joined: Jun 1999
Yes, you can try that (I'm not 100% sure if #home.current will work in all browsers...). The second part of my solution there was to put the identifiers on different elements (the ID on the li and the class on the a) which gets around that problem.
Why do you think you need to change them to classes? If they are unique elements that don't appear elsewhere on the page they should be id's.
Megan
Connect with us on Facebook!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.