Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unordered list and highlighting 'active page' - rant/help

Discussion in 'Website Coding & Programming Forum:' started by Levi, Oct 5, 2013.

  1. Levi

    Levi Moderator Staff Member

    Ok so I'm doing my new website and something I thought would be fairly simple is turning out to be completely annoying/stupid/pita.
    I'm using unordered lists to create my menu, menu layout works fine, links all work etc etc
    Start styling it up and get it working fine for hover using the ul li a:hover and setting a background colour. Thought highlighting the 'active page' would work the same way using ul li a:active but no.... this doesn't work like the other selectors when used with unordered lists, it works fine with normal links :angry:
    So seeing as I want to highlight some anchor links which are also in a unordered list I now need to figure out some work around so if anyone wants to suggest anything would be greatly appreciated.
    I've found a jquery/javascript script for the anchor list and I know I can add a class to the menu to 'highlight' the required background but seriously this is what :active is for so it's got to be easier than me needing to use javascript or additional markup!!!!
  2. :active is used to apply styling to an element that is being clicked on, not to style the currently active page.
    If you want to style the link for the current page, just add a class to the li such as:
    li class="active" { color: #0f0; }
    <li class="active">link></li>
  3. Levi

    Levi Moderator Staff Member

    See thats where I differ in opinion, active means thats where I am, :focus should highlight the link on click (like it does on contact forms)
    And that 'class' is how I found I need to fix my main navigation, doesn't work for anchor text menu on the same page... see stupid semantics, using 'active' in the 'right' way would have covered both these issues without needing extra markup or javascript :angry:
  4. Well, you can argue with W3C's definition all you want, but it's not going to change how it behaves!
    Seriously though, adding that tiny bit of extra CSS isn't going to hurt anyone or anything! If you need some more help with it, put a link up to the test page and I'll have a look.
  5. Levi

    Levi Moderator Staff Member

    ok.... anyone got any decent tutorials or scripts (ideally with smoothscroll) to do the damned sub-menu highlights.... main menu, piece of cake, sub menu it's just not going anywhere, waypoints.js has pretty much zero info as to how to get that working lol
    I know I need jquery, I know I need waypoints.js, I know I need waypoints to change the class of the sub-menu li but I'm just not getting anywhere.... javascript, I just hate the stuff or it hates me, I haven't quite decided....

Share This Page