[Solved] Active navigation using an included .php header

[runofthemill]

In designing this page (http://www.garderobeonline.com/garderobepage/update/sortingpage.php), I realized it would be simpler to have the navigation as a separate .php file, but I also want to have the navigation highlight the active page. When the navigation was part of the HTML of each page, i assigned the #active class to the corresponding link to apply this CSS:

Code:

color: #7c935d;
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
margin: 0 2px 0 2px;
text-decoration:none;
border: 1px solid;
border-color: #913d3b;

Is it possible to apply an active state to each page? Here’s the code for the header

Code:

Member Login

• New York

|

• Beverly Hills

|

• Las Vegas

|

• Orange County

|

• San Diego

|

• Tokyo

• Sample Closet
• |
• Services

  ---

  • Endless Closet Space
  • Luggage-Free Travel
  • Design-House Archiving
  • Cyber Closet Only

  ---

  • + More
    • Consignment
    • Closet Organization
    • Personal Services
• |
• Become A Member
• |
• The Loft
• |
• Press Room
• |
• Partners
• |
• Home

I saw this code in the CSS help forum, but it seems to be only applicable to wordpress as it returns a directory and isn’t much help to me.

Code:

#71643

runofthemill

Member

Awesome! Method #3 worked perfectly. Thanks!

#71844

quelake

Member

I use another method;

I assign a unique body-ID to every page by using the filename:

Code:

“>

In your css you can then simply add styling for the active state of that page (filename is without ".php" of course);

Code:

body#filename1 ul#navigation li a.button_that_needs_to_have_active_state,
body#filename2 ul#navigaton li a.button_that_needs_to_have_active_state_here {
“behaviour for active state”

}

[runofthemill]

Awesome! Method #3 worked perfectly. Thanks!

[quelake]

I use another method;

I assign a unique body-ID to every page by using the filename:

Code:

“>

In your css you can then simply add styling for the active state of that page (filename is without ".php" of course);

Code:

body#filename1 ul#navigation li a.button_that_needs_to_have_active_state,
body#filename2 ul#navigaton li a.button_that_needs_to_have_active_state_here {
“behaviour for active state”

}

[Author]

Posts