By crutch on

How do I apply class="current" to menu items?

I know how to do it in static form.

How would it be applied to a menu item in a dynamic fashion.

Or so that the menu item, when clicked, gets class="current" applied to the

  • if on that page. Where the menu item has the same hyperlink address as the page address.

    • Comments

    Anonymous’s picture

    Anonymous (not verified) commented

    why current? can you try class="active", most menus I've encountered use it instead.

    crutch’s picture

    crutch commented

    10-4 thanks

    I don't think active is the current page. Active is the action when clicking.

    a:link (link state)
    a:visited (visited state)
    a:hover (hover over state)
    a:active (clicking state)

    I would like to have a current class to make the button a different color for the page I am on. The only way that I know to do it is in static form by applying a current class to the menu item like this:

    <div id="menu">
<ul class="solidblockmenu">
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="it.php">It</a></li>
<li><a href="this.php">This</a></li>
<li><a href="that.php">That</a></li>
<li><a href="those.php" class="current">Those</a></li>
</ul>
</div>
    Noddy’s picture

    Noddy commented

    a:active is a pseudo-class for links and has nothing to do with a class="active" within a <li>-tag. More info: http://www.w3schools.com/CSS/css_pseudo_classes.asp
    So Caketoad is right, you can use class="active" for theming the current link with CSS.
    You can see it live here: http://d6.andregriffin.com/ (it's the demo site for the excellent Framework template).

    crutch’s picture

    crutch commented

    Thanks!

    .rtnprimarylinks li a.active {color: #000000;font-weight: normal;text-decoration:none;background: #fbf690 url('../../menu-bg-active.jpg') repeat-x bottom left;}