SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to have nav and subnav both have current button highlighted.

    I have a main navigation which highlights the currently active button because I have set <body id="xxxx"> at the top of each page, and set the ID's for each one of the <li> in my nav. My css then makes it look different if the id for the nav button is the same as the body id for the page.

    CSS CODE:

    body#all #mainnav #all,
    body#resentlypopular #mainnav #resentlypopular,
    body#published #mainnav #published,
    body#toptracks #mainnav #toptracks,

    body#users #mainnav #users,
    body#submit #mainnav #submit
    {
    background-image:url("/tabnavimages/norm_left_on.gif");
    }


    body#all #all a,
    body#resentlypopular #resentlypopular a,
    body#published #published a,
    body#toptracks #toptracks a,

    body#users #users a,
    body#submit #submit a
    {
    background-image:url("/tabnavimages/norm_right_on.gif");
    color:#333;
    padding-bottom:5px;

    }

    NAV HTML:

    <div id="mainnav">
    <ul>
    <li id="published"><a href="http://wejuketest.frontgallery.com">Recently Popular</a> </li>
    <li id="all"><a href="http://wejuketest.frontgallery.com/all.php">All</a></li>
    <span class="righttab"><li id="users"><a href="http://wejuketest.frontgallery.com/topusers.php">Users</a></li></span>
    <span class="righttab"><li id="submit"><a href="http://wejuketest.frontgallery.com/submit.php">Submit</a></li></span>
    </ul>
    </div>



    But, I have a sub navigation menu as well which I want to do the same thing. <body id=xxx> is already set on each page for the main nav, so what would i put at the top of each page to make the subnav highlight the correct button? Something like <body class="rock"> (doesn't work) or <subnav id="rock"> (doesn't seem to work either)?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Your above method is not valid as you cannot have 2 id's with the same name on the same page.

    You should just use an id in the body tag and then use a class on your lists. You can then use a class on the sublist also to highlight it as required.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    body#page1 .page1 {color:red}
    body#page1 .page1sub {background:red;color:#fff}
    body#page2 .page2 {color:blue}
    body#page2 .page2sub {background:blue;color:#fff}
    </style>
    </head>
    <body id="page1">
    <ul>
     <li class="page1">Page 1 main
      <ul>
       <li class="page1sub">Page 1 sub</li>
      </ul>
     </li>
     <li class="page2"> Page 2 main
      <ul>
       <li class="page2sub">Page 2 sub</li>
      </ul>
     </li>
    </ul>
    </body>
    </html>


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
  •