SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    current open navigation!

    Hello,

    I want to ask if there is a way in CSS to indicate the link which the user is in its page currently!, for example look at top of sitepoint forums you will find that the link 'forums' appears in white color at the moment.

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,355
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, add a class name to the "current" link, the SP one uses a class called class="active"

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    with css alone, no. css only takes off from where html left it:



    html code:

    <a accesskey="6" id="tabc" class="active" href="/forums/" title="Our friendly, vibrant and well-informed community">Forums</a>




    css code:

    ul#navlist li a.active {
    color: white;
    font-weight: bold;
    }

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    Yes, add a class name to the "current" link, the SP one uses a class called class="active"
    There was a recent poll thread about using active as a class name.

    It is not a good idea since it is prone to cause confusion with newbs in regards to the pseudo class :active

    For current page highlighting I always advise using .current as the class name.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    My preferred way to do this is for each page to have a class on the body tag. For example, the Contact page would have a class on the <body> tag such as class="contact".

    <body class="contact">

    So in my style sheet I would then have styles for the links in their normal state...

    #menu li a {...}

    ... and special styles (with higher specificity) for the current links:

    .contact #menu li a {...}

    That way you can serve up the same menu on all pages (and feed it in with an include etc.) rather than having a different menu on each page, littered with .current styles).

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I agree ralph, page specific css can be much cleaner on the html by just setting a class on the body. Then styling the css as you have shown.

    The only advantage I see to the .current classes is that it keeps things very simple for a small site where the nav links will rarely or never change.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Similar to what Ralph said , I class the body of each page. for example home page would be <body class="home">, the about page <body class="about"> this is simple to do even if you are using a CMS. Then I class every LI ( or anchor) on the Navigation. I can the n have a "double rule"

    .home .home, .about .about{active styles rule go here}

    incidentally you could apply this to anything not just menus.. for example you could add a class to your side bar so taht the home sidebar has a different style than the page sidebar... possibilities are endelss


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •