Dynamic CSS Navigation Highlighting with Expression Engine
Here's a little trick I've been using with Expression Engine to get my category menus to auto highlight.<html>
<head>
<style type="text/css">
#Nav #NavList{segment_3} {
background-color: #eee;
color: #3F7E86;
}
</style>
</head>
<body>
<ul id="Nav">
{exp:weblog:categories weblog="play" style="linear"}
<li>
<a href="/" id="NavListC{category_id}">{category_name}</a>
</li>
{/exp:weblog:categories}
</ul>
</body>
</html>
I've stripped it down to the minimum to make it easier to dissect. The two main things that you need to be looking at are the {segment_3} variable in the css and {category_id} in the id selector. The {segment_3} variable will get replaced with whatever is in the third segment of your url. So if we were to use the example url of...
http://www.31three.com/go/demo/category_highlight/C10
The css section of the code would be rendered...
<style type="text/css">
#Nav #NavListC10 {
background-color: #eee;
color: #3F7E86;
}
</style>
and the nav list would be rendered something like this...
<ul id="Nav"> <li><a href="/" id="NavListC9">Category 1</a></li> <li><a href="/" id="NavListC10">Category 2</a></li> <li><a href="/" id="NavListC11">Category 3</a></li> <li><a href="/" id="NavListC12">Category 4</a></li> <li><a href="/" id="NavListC13">Category 5</a></li> </ul>
The dynamically created css rule will now be applied only to the active category. I've used the example of categories, but you can also substitute the {entry_id} tag if you're using the {exp:weblog:entries} tag.
Here's a very simplisticworking example along with a downloadable template.
Comments
Shouldn’t the list items in your “Nav” list each have unique IDs instead of all having the id “NavListC9”?
Thanks Kim! In my haste to get this site up last night, I got a little too copy and paste happy.
Nice tip. Definitely going to use this technique once I get the entire City Church powered by EE.
Hmmm… I gotta read up on that Exression Engine stuff. Nice site BTW. Oh and welcome to blogging ;)
Hey Karinne, Expression Engine really is the best blog/cms tool that I’ve come across. It’s really really flexible, and with the new version 1.4 in the works, I think it’s really going to open up a new level of possibilities. Definitely check it out.
Silly me… I didn’t realize EE was a blog/cms tool. I thought it some new CSS 3.? stuff. Oh well… ;)
ce tutuorial uratt
Great tip, have you ever tried the DynoCat plug-in, it pretty much does this for you I think. :)
I just installed that plug-in yesterday for another site I was working on. Very nice plug-in.
Yea, very neat indeed. Saved me a good few minutes anyhow. :)
I’m lat to the party, but where can I find a link to the DynoCat Plugin?
Thanks.
Hey Kurt,
Sorry for the delay… you can find the DynoCat plug-in here.
very nice tip. I am trying to come to terms with ee as a non-blog app. i am still learning my way around it. this tip really helps a lot. thank-you. how do get the Titles to display according to the active Category? i.e when yo usitch categoris it switches the list. i can’t find any tips on doing that bit.
I’m actually cheating a little bit when I do those categories. When I set up the categories I also placed the category id # into the category description. I was then able to pass the category id # as a url segment (you’ll see the number in the url). Then I take that segment and enter it into the weblog entries tag by doing something like this…
{exp:weblog:entries category=”{segment_4}”}
Hope that helps. There are other ways to do this and I think I was just being a bit lazy.
Sorry… that should have been {segment_3}
u said “When I set up the categories I also placed the category id # into the category description. “… wow! there is no documentation on that being doable. EE is powerfull but it needs a proper manual. thx will give yr trick a try. PS how is it that segment_3 works for your CSS trick when it refers to category name and it also works on Category_ id?
Yeah. EE is very very flexible. You can get the same result by doing things many different ways. It would be really hard to try to document everything that was possible.
I just re-read your first question and I think I answered it wrong the first time. For some reason I was thinking you were referring to my portfolio section (don’t ask me why).
When you say “how do get the Titles to display according to the active Category?” Were you wondering how to make the selected nav item highlighted as per the example or actually change the <title> of the page?
- Jesse
u said: For some reason I was thinking you were referring to my portfolio section (don’t ask me why)… i think i was refering to that i.e. you have one column with the categories (and u use your NAV trick to “hilite active link) But then you also have titles of entries displayed according to the Category that is highlighted, and then when you click on a title you get a new entry. i cannot get titles to display according to current category or by category…. ie much like your portfolio section and a couple of others i noted early on
ahh… I see now. The first number in the url is the category_id, the second number is the entry_id. You can see that the first number doesn’t change for each entry in the same category.
Here’s the actual code I’m using…
[ul]
{exp:weblog:entries weblog=“portfolio” category=”{segment_3}” limit=“13” dynamic=“off”}
[li id=“navb{entry_id}”]
[a href=”/go/main/work/{categories}{category_image}{/categories}/{entry_id}/”]{title}
[br /]
[span class=“project_type”]{entry_date format=”%F, %Y”}[/span][/a][/li]
{/exp:weblog:entries}
[/ul]
I just changed the angled brackets to square ones so they would show up. Hope this helps!
I am in the process of trying your great solution out! PS this is what i have just entered for my categories in ADMIN ;
Category Name: Corporate.
Category Description: 12
the category number when created said “12”
If you can give me a user id & password I can take a look at it. Email me at jessebc@31three.com
I think I got it working for you… take a peak.
yes!! It looks like it’s working. thx!
Doh! I figured out the category-id-as-class trick by looking at your style sheets a while ago, but it never occured to me to put an ee tag within the css declaration. I just manually added all of the possible combinations in my style sheet and hoped I’d remember to update it if I added categories. This is much better. Thanks!
Thanks for the tutorial. It was helpful. Now, if only I can figure out why there is no such thing as {if category_id}.
Hey Dat,
That conditional will probably work, but only inside of the {categories} variable pair.
Thank you Jesse, great tip, implemented on my EE site and its working just fine!
A couple things, first, it may have been easier to apply a class on the body using one of the url segments and then controlling the styling all through the CSS file:
[body class=”{segment_3}”]
body.catname #navitem { /* style here*/ }
I’ve used this to remove links to the current page. I imagine this could be extended in such a way to work with categories, as well.
{exp:weblog:entries category=“1” dynamic=“off”}
{if segment_3 == url_title}
{title}
{if:else}
[a href=”../person/{url_title}”]{title}[/a]
{/if}
{/exp:weblog:entries}
btw: I feel like a small idiot. Your solution is obviously much more dynamic than my recommendation and probably a better solution. That’ll teach me for not paying attention.
Thanks for idea!
Hey Jonathan,
I haven’t thought it through completely, but It think you could take what I’m doing and place it in an external stylesheet as well. In one of the newer releases of EE, they provided a way to link to a stylesheet and still have the stylesheet parsed dynamically. You could probably have the stylesheet dynamically build a style for every possible category by doing something like this…
Stylesheet
{exp:weblog:categories weblog=“play” backspace=“1” style=“linear”}
body#C{category_id} a#NavListC{category_id},
{/exp:weblog:categories}
{
background-color: #eee;
color: #3F7E86;
}
HTML
[body id=”{segment_3}]
[ul id=“Nav”]
{exp:weblog:categories weblog=“play” style=“linear”}
[li]
[a href=”/” id=“NavListC{category_id}”]{category_name}[/a]
[/li]
{/exp:weblog:categories}
[/ul]
[/body]
That should work eh?
Hi,
let me digress a little bit here, I was wondering how did u get to do the slide show for the community church website? its pretty coll and am searching for a place i can get it. sorry if its a daft question.
Jesse can correct me on this, I am pretty sure it’s done with the wonderfull slideshow pro Flash application.
Vanni’s got it right, Sean Sperte used slideshow pro for that flash section.
thanx guys
hi guys,
sorry again, I am fairly new to this CSS stuff. I was just wondering how the code for a two level horizontal navigation (if thats what its called ;D) is done. e.g. the one for christian city church?
Hey Rodney,
Check your email in a few minutes.
Help Wanted
Beautiful site, tnx for the tutorial, great stuff!
Keep up the great work!
pixelEngine - October 25, 2005