CSS Menu from List with Sticky State

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Menu from List with Sticky State

terrybarnes

10:19 am on Feb 4, 2009 (gmt 0)

I have a menu that i've created from a bulleted list but what I'd ideally like to do is have the same menu/code appear across all 10 pages of the site but for there to be a sticky state on the menu item when in the relevant section.

Currently I've got this:

For the active/sticky menu item but doing it this way would mean having different code across all pages. Usually I'd quite happily do this but I'm actually using Wordpress to create the site so I'd like to include this code in the same header file throughout the site.

I'm doubting if there's any way to set this up using CSS alone but if anyone can guide me a little bit then that'd be very much appreciated.

swa66

12:13 pm on Feb 4, 2009 (gmt 0)

If you code an id or class on a wrapper or body to indicate where the page is in structure it can be done by matching the classes

so assume you have five sections: "one" "two" "three" "four" "five"

and you use html like:


...
  <body class="one">
  ...
    <li id="one">...
    <li id="two">...
    <li id="three">...
    <li id="four">...
    <li id="five">...
...

And css like:


  .one #one, .two #two, .three #three, .four #four, .five #five { 
    ...; /* active style goes here */ 
  }

you can let the body tag (or a wrapper or so) decide what section the menu will show as active while the menu can always remain the same identical html.

terrybarnes

12:22 pm on Feb 4, 2009 (gmt 0)

Thanks for this. This is great for most sites but as I'm developing the site in Wordpress I'm using the header.php to include the the menu and so the body id would remain the same throughout all pages. I think I've found a way of doing it after a bit of hunting around so I'll report back later if I manage to get it to work.

terrybarnes

9:20 pm on Feb 4, 2009 (gmt 0)

Okay, if you search for "Current Nav Highlighting: Using PHP to Set the Body ID" in Google you'll see what I was after. This is a really good video tutorial on how to dynamically produce a body id tag. You can then add these elements to your CSS and when those pages load then the relevant style will display.