Multi-tiered css menu that marks the active section?

I would like some recommendations for examples of multi-tiered CSS menus that include somehow marking the active section, whether that one is on the first or the second tier. I found a nice, clean css setup for a menu with submenus on hover, but that adds the complication of needing to indicate which section the user is on in some other fashion.

The in-progress design (with the current menu) is at http://www.westeros.org/Test. This particular part of the site has little in the way of submenus, but another section has submenus for every item.

The way I usually indicate the active section/page in a menu is to apply a class to it.
The question is, how do you apply the class to just that one item?
That depends of your set-up. Are they all static html pages, or are you using some back-end processing?
I generate my menus from a php array which as it processes identifies if a value matches the current page, and if so inserts class="current" into the <li> so it gets styled differently.

I use a CMS, ExpressionEngine. I could probably manage to pull URL segments from that. But the current example I have is just for submenus on hover, whereas I’d probably need them to be persistent and horizontal rather than vertical to be able to mark up current subsections.

There is probably a javascript method to insert a class into the current item, but js is not my subject.
I think a simple, ‘dirty’ html/css way may be to give each item an id, then style that individually on each page.

<style>#home{background:#fff}</style> <!-- different id for each page -->
</head>
<body>
   <nav>
      <ul>
         <li id="home"><a href="home">Home</a></li>
         <li id="updates"><a href="updates">Updates</a></li>
etc...

…but I’m not too keen on that.

1 Like

I like your example, as I think around 25% of surfers has javascript off by default nowadays.

Pulled a seven year old CSS active link example where you use classes in the current page’s body tag and the nav links:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Current Page's Active Nav Link</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
.home .home  a,
.about .about a, /* this sub-page's parent link */
.about.team1 .team1  a,
.about.team2 .team2  a, /* this sub-page's sub-menu link */
.about.team3 .team3  a{
    color: green;
    cursor: default; /* avoid clicks on active link */
}
.team1 .about  a,
.team2 .about  a, /* this sub-page's parent link */
.team3 .about  a{
    cursor: pointer; /* show pointer on sub-pages parent links */
}
</style>
</head>
<body class="about team2">

<ul id="nav">
    <li class="home"><a href="#nogo">Home</a>
    </li>
    <li class="about"><a href="#nogo">About</a>
        <ul>
            <li class="team1"><a href="#nogo">Team 1</a></li>
            <li class="team2"><a href="#nogo">Team 2</a></li>
            <li class="team3"><a href="#nogo">Team 3</a></li>
        </ul>
    </li>
</ul>

</body</html>

I think this example could do for OP wish in post #3 for active submenu links too.

2 Likes

Thank you both, will look more closely at those suggestions. I am a bit leery of anything that needs to go on an individual page because of my template setup; its a pretty large site and it would be a lot of templates to update as opposed to just having it in a separate template that I can embed.

What I like to do is give the body tag of each page an identifying class, then on the one template that holds the navigation, have a php conditional on each navigation list item that checks whether the page class matches that list item, and if so, adds an id=“current” to that list item.

I’m trying to type this on a tablet so it’s awkward typing the code for this. If you want to see it and nobody gets to it first, I will give it to you when I can get back to my laptop.

4 Likes

The nav links’ CSS is the same on all pages, the problem is how to insert the appropriate class(es) in the body tag. That can preferably be done serverside.

Clientside you can skip this method and just use javascript to insert an active class in the menu/submenu according to the url of current page. That script can also delink the active nav (sub)link, that’s good.

With an sitename-class/id and/or page class(es) in the body tag, we hwo uses userContent.css for styling sites as we go would appriciate that.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.