Styling menu probs - active marker not working, need some guidance
Posted: Sat Apr 29, 2006 4:05 pm
Hi All,
Well, I'm getting on nicely with CMS MS and have created templates, stylesheets and have modified a menu. My problem is twofold, have a look at this markup (I've simplified it here for ease of reading):
You can see I've got an active page marker, #active and a class applied to each . The designer wants every link to be different and use a background image with a hover! Anyway I've got all the image backgrounds working ok and hover effect but the active marker is not working because of a problem with my styling. Here is the styling for the hovers and active link:
This has been driving me mad all day! Can anyone shed some light into what I've obviously done wrong?
Thanks
Sarah
p.s. I forgot another related problem. Look at this markup:
hot water
Because CMS MS menu manager uses the page name for the style class (menutext}"> ) it seems that spaces are not allowed in class names because the styles don't work on this link!! Ideas anyone, can I modify menu manager to remove spaces from $node->menutext for this istance? If tried using a preg replace to look at the string i.e. page name and then remove the space but I don't know how to use this within menu manager.
Anyway I hope you guys can put me straight with this and the problems above.
Well, I'm getting on nicely with CMS MS and have created templates, stylesheets and have modified a menu. My problem is twofold, have a look at this markup (I've simplified it here for ease of reading):
Code: Select all
<ul class="menu_horiz">
<li class="home" id="active"><a href="index.php?page=testing" class="active"><span class="hide">home</span></a></li>
<li class="hot water"> <a href="index.php?page=hot_water"><span class="hide">hot water</span></a></li>
<li class="heating"> <a href="index.php?page=heating"><span class="hide">heating</span></a></li>
<li class="biodiesel"> <a href="index.php?page=biodiesel"><span class="hide">biodiesel</span></a></li>
<li class="contact"> <a href="index.php?page=contact"><span class="hide">contact</span></a>
</li>
</ul>Code: Select all
#menu_horiz li.heating a:hover, #menu_horiz li.heating a:active,
#active .heating a:link, #active .heating a:visited,
#active .heating a:hover, #active .heating a:active {
background-image: url(uploads/images/button_heating_active.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
}This has been driving me mad all day! Can anyone shed some light into what I've obviously done wrong?
Thanks
Sarah
p.s. I forgot another related problem. Look at this markup:
hot water
Because CMS MS menu manager uses the page name for the style class (menutext}"> ) it seems that spaces are not allowed in class names because the styles don't work on this link!! Ideas anyone, can I modify menu manager to remove spaces from $node->menutext for this istance? If tried using a preg replace to look at the string i.e. page name and then remove the space but I don't know how to use this within menu manager.
Code: Select all
$menuclass = preg_replace('/\s+/', '', {$node->menutext});