SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Active Page Notation

    Is there any way in CSS to indicate on a menu item that the item is the active page?

    IE:

    menuitem1
    menuitem2
    menuitem3 >> highlight this when on page3
    menuitem4

    Thanks in advance

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Create some rules for each menu item like
    Code:
    #act_menu_itm1 {
      background: #FFF; /*This is the mouseover color*/
      font: bold 9pt Verdana;
      border: 1px solid #000;
    }
    #act_menu_itm2 {
      background: #FFF; /*This is the mouseover color*/
      font: bold 9pt Verdana;
      border: 1px solid #000;
    }
    #act_menu_itm3 {
      background: #FFF; /*This is the mouseover color*/
      font: bold 9pt Verdana;
      border: 1px solid #000;
    }
    Then in the HTML in your page, give the active menu item a class of "act_menu_itm2". At least that's how I've done it in the past.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You can automate the process slighly (at the expense of more code) by giving the body a corresponding id on each page and use that to address the active link as described in this post.

    http://www.sitepoint.com/forums/show...6&postcount=34

    Paul

  4. #4
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I do this by giving the active menu item a class of 'selected'

    So my style is like this:
    Code:
    .menu a
    {
      /* styles go here */
    }
    
    .menu a.selected
    {
      /* extra styles for selected item */
      font-weight: bold;
    }
    In my code, I indicate the active page like this:

    HTML Code:
    <div class="menu"> 
      <a href="someurl">Item 1</a>
      <a href="someurl" class="selected">Item 2</a>
      <a href="someurl">Item 3</a>
    </div>
    That way, the 2nd item appears as selected.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff


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
  •