31Three

Creative services for the design-challenged developer

Weblog

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.

pixelEngine
October 25, 2005

Beautiful site, tnx for the tutorial, great stuff!

Keep up the great work!

Kim Siever
October 25, 2005

Shouldn’t the list items in your “Nav” list each have unique IDs instead of all having the id “NavListC9”?

Jesse Bennett-Chamberlain
October 25, 2005

Thanks Kim! In my haste to get this site up last night, I got a little too copy and paste happy.

Sean S
October 26, 2005

Nice tip. Definitely going to use this technique once I get the entire City Church powered by EE.

Karinne
October 27, 2005

Hmmm… I gotta read up on that Exression Engine stuff. Nice site BTW. Oh and welcome to blogging ;)

Jesse Bennett-Chamberlain
October 27, 2005

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.

Karinne
November 01, 2005

Silly me… I didn’t realize EE was a blog/cms tool. I thought it some new CSS 3.? stuff. Oh well… ;)

naspa
December 18, 2005

ce tutuorial uratt

Nathan Pitman
January 03, 2006

Great tip, have you ever tried the DynoCat plug-in, it pretty much does this for you I think. :)

Jesse Bennett-Chamberlain
January 03, 2006

I just installed that plug-in yesterday for another site I was working on. Very nice plug-in.

Nathan Pitman
January 03, 2006

Yea, very neat indeed. Saved me a good few minutes anyhow. :)

Kurt
January 22, 2006

I’m lat to the party, but where can I find a link to the DynoCat Plugin?

Thanks.

Jesse Bennett-Chamberlain
January 23, 2006

Hey Kurt,
Sorry for the delay… you can find the DynoCat plug-in here.

vanni
January 26, 2006

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.

Jesse Bennett-Chamberlain
January 27, 2006

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.

Jesse Bennett-Chamberlain
January 27, 2006

Sorry… that should have been {segment_3}

vanni
January 27, 2006

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?

Jesse Bennett-Chamberlain
January 27, 2006

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 of the page?</p> – Jesse </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>vanni</strong><br /><span>January 27, 2006</span></p></div> <div class="comment_text"> <p>u said: For some reason I was thinking you were referring to my portfolio section (dont 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</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper highlight"> <div class="comment_meta_data"><p><strong>Jesse Bennett-Chamberlain</strong><br /><span>January 27, 2006</span></p></div> <div class="comment_text"> <p>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. </p> <p>Here’s the actual code I’m using…<br /> [ul]<br /> {exp:weblog:entries weblog=”portfolio” category=”{segment_3}” limit=”13” dynamic=”off”}<br /> [li id=”navb{entry_id}”]<br /> [a href=”/go/main/work/{categories}{category_image}{/categories}/{entry_id}/”]{title}<br /> [br /]<br /> [span class=”project_type”]{entry_date format=”%F, %Y”}[/span][/a][/li]<br /> {/exp:weblog:entries}<br /> [/ul]</p> <p>I just changed the angled brackets to square ones so they would show up. Hope this helps!</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>vanni</strong><br /><span>January 27, 2006</span></p></div> <div class="comment_text"> <p>I am in the process of trying your great solution out! PS this is what i have just entered for my categories in ADMIN ; <br /> Category Name: Corporate. <br /> Category Description: 12</p> <p>the category number when created said “12” </p> </div> <div class="clear"></div> </div> <div class="comment_wrapper highlight"> <div class="comment_meta_data"><p><strong>Jesse Bennett-Chamberlain</strong><br /><span>January 28, 2006</span></p></div> <div class="comment_text"> <p>If you can give me a user id & password I can take a look at it. Email me at jessebc@31three.com</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://www.31three.com" rel="nofollow">Jesse Bennett-Chamberlain</a></strong><br /><span>January 31, 2006</span></p></div> <div class="comment_text"> <p>I think I got it working for you… take a peak.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>vanni</strong><br /><span>January 31, 2006</span></p></div> <div class="comment_text"> <p>yes!! It looks like it’s working. thx!</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://artificialmemory.com/" rel="nofollow">nat</a></strong><br /><span>March 01, 2006</span></p></div> <div class="comment_text"> <p>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!</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>Dat Chu</strong><br /><span>April 27, 2006</span></p></div> <div class="comment_text"> <p>Thanks for the tutorial. It was helpful. Now, if only I can figure out why there is no such thing as {if category_id}.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper highlight"> <div class="comment_meta_data"><p><strong>Jesse Bennett-Chamberlain</strong><br /><span>April 27, 2006</span></p></div> <div class="comment_text"> <p>Hey Dat,<br /> That conditional will probably work, but only inside of the {categories} variable pair.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://www.zonaprestiti.com" rel="nofollow">Zona Prestiti</a></strong><br /><span>April 28, 2006</span></p></div> <div class="comment_text"> <p>Thank you Jesse, great tip, implemented on my EE site and its working just fine!</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://www.snook.ca/jonathan/" rel="nofollow">Jonathan Snook</a></strong><br /><span>June 16, 2006</span></p></div> <div class="comment_text"> <p>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:</p> <p>[body class=”{segment_3}”]<br /> body.catname #navitem { /* style here*/ }</p> <p>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.</p> <p>{exp:weblog:entries category=”1” dynamic=”off”}<br />  {if segment_3 == url_title}<br />    {title}<br />  {if:else}<br />    [a href=”../person/{url_title}”]{title}[/a]<br />  {/if}<br /> {/exp:weblog:entries}</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://www.snook.ca/jonathan/" rel="nofollow">Jonathan Snook</a></strong><br /><span>June 16, 2006</span></p></div> <div class="comment_text"> <p>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.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://free-ring-tones.awardspace.com" rel="nofollow">Andrea</a></strong><br /><span>June 17, 2006</span></p></div> <div class="comment_text"> <p>Thanks for idea!</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://www.31three.com" rel="nofollow">Jesse Bennett-Chamberlain</a></strong><br /><span>June 19, 2006</span></p></div> <div class="comment_text"> <p>Hey Jonathan,<br /> 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 <a href="http://eedocs.pmachine.com/templates/globals/stylesheet.html" rel="nofollow">provided a way</a> 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… </p> <p><b>Stylesheet</b><br /> {exp:weblog:categories weblog=”play” backspace=”1” style=”linear”}<br /> body#C{category_id} a#NavListC{category_id},<br /> {/exp:weblog:categories}<br /> {</p> background-color: #eee; color: #3F7E86; } <p><b>HTML</b><br /> [body id=”{segment_3}]</p> <p>[ul id=”Nav”]<br /> {exp:weblog:categories weblog=”play” style=”linear”}<br /> [li]</p> [a href=”/” id=”NavListC{category_id}”]{category_name}[/a]<br /> [/li]<br /> {/exp:weblog:categories}<br /> [/ul] <p>[/body]</p> <p>That should work eh?</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>rodney</strong><br /><span>September 09, 2006</span></p></div> <div class="comment_text"> <p>Hi,</p> <p>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.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>vanni</strong><br /><span>September 09, 2006</span></p></div> <div class="comment_text"> <p>Jesse can correct me on this, I am pretty sure it’s done with the wonderfull <a href="http://www.slideshowpro.net/" rel="nofollow">slideshow pro </a>Flash application.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://www.31three.com" rel="nofollow">Jesse Bennett-Chamberlain</a></strong><br /><span>September 10, 2006</span></p></div> <div class="comment_text"> <p>Vanni’s got it right, Sean Sperte used slideshow pro for that flash section.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>rodney</strong><br /><span>September 14, 2006</span></p></div> <div class="comment_text"> <p>thanx guys</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>rodney</strong><br /><span>September 22, 2006</span></p></div> <div class="comment_text"> <p>hi guys,</p> <p>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?</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://www.31three.com" rel="nofollow">Jesse Bennett-Chamberlain</a></strong><br /><span>September 22, 2006</span></p></div> <div class="comment_text"> <p>Hey Rodney, <br /> Check your email in a few minutes.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong>rodney</strong><br /><span>September 23, 2006</span></p></div> <div class="comment_text"> <p>thanks for the help.</p> </div> <div class="clear"></div> </div> <div class="comment_wrapper "> <div class="comment_meta_data"><p><strong><a href="http://immobilien.llogin.com/" rel="nofollow">immobilien</a></strong><br /><span>January 05, 2007</span></p></div> <div class="comment_text"> <p>thanks you for the help.</p> </div> <div class="clear"></div> </div> Commenting is not available in this weblog entry. </div><!--comments--> </div><!--content column--> <div class="side_column" > <p class="me"><img src="/img2/me.jpg" alt="me" width="115" height="87" /> <strong>Hello, my name is…</strong><br />Jesse Bennett-Chamberlain, a <strike>stay at home</strike> designer from Grimsby ON, Canada. To get in touch use the <a href="/contact/">contact form</a>.</p> <h4 class="sidelinks"><span>Side Links</span></h4> <p>Lovely work from <a href="http://www.10am.org/">10am</a>.</p> <p>Terminal method to <a href="http://www.macosxhints.com/article.php?story=20080629181121863">disable shadows</a> in os x screen window captures.</p> <p>Thanks for the <a href="http://subvert.ca/blog/archive/interview-jesse-bennett-chamberlain/">interview</a> Geof! Man I need haircut. </p> <p><a href="http://jasonsantamaria.com/">A New Day</a> for Jason Santa Maria. Very very nice <strike>redesign</strike> rethinking.</p> <p><a href="http://www.authenticjobs.com">Authentic Jobs</a> has been donating 1% of their revenue to help entrepreneures throughout the world through Kiva. When the loans get paid back, they are re-invested back into more loans. Check out the <a href="http://www.kiva.org/lender/authenticjobs">Authentic Jobs overview page at Kiva</a>... very inspiring. </p> <p><strong><a href="/weblog/archive_list/">View Archives →</a></strong></p> <h4 class="aj"><span>Authentic Jobs</span></h4> <p><img src="/img2/aj_sign.gif" alt="authentic jobs sign" width="77" height="56" class="aj_sign" /><strong>Help Wanted</strong><br />Recent openings posted at Authentic Jobs.</p> <div id="container-1"> <ul> <li><a href="#fragment-1">All</a></li> <li><a href="#fragment-2">Full-time</a></li> <li><a href="#fragment-3">Freelance</a></li> </ul> <div id="fragment-1"> <ul> <li><a href="http://www.authenticjobs.com/jobs/2534">VEGAS.com: User Interface Designer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2533">65 Media: Sr/Mid-Level Flash Developer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2532">MWI: .NET C# Web Programmer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2531">Macmillan Publishers: Front-end Developer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2530">TMX Communications: Sr Front End Developer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2529">The University of Arizona Libraries: Applications Systems Analyst (Web Designer)</a></li> <li><a href="http://www.authenticjobs.com/jobs/2528">TMX Communications: USER EXPERIENCE ARCHITECT</a></li> <li><a href="http://www.authenticjobs.com/jobs/2527">Bishop Interactive: Senior Web Designer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2523">Zivity: Web Designer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2524">The Open Society Institute: WEB DESIGNER</a></li> </ul> </div> <div id="fragment-2"> <ul> <li><a href="http://www.authenticjobs.com/jobs/2534">VEGAS.com: User Interface Designer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2533">65 Media: Sr/Mid-Level Flash Developer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2531">Macmillan Publishers: Front-end Developer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2530">TMX Communications: Sr Front End Developer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2529">The University of Arizona Libraries: Applications Systems Analyst (Web Designer)</a></li> <li><a href="http://www.authenticjobs.com/jobs/2528">TMX Communications: USER EXPERIENCE ARCHITECT</a></li> <li><a href="http://www.authenticjobs.com/jobs/2527">Bishop Interactive: Senior Web Designer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2523">Zivity: Web Designer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2524">The Open Society Institute: WEB DESIGNER</a></li> <li><a href="http://www.authenticjobs.com/jobs/2522">Ning: Web Designer</a></li> </ul> </div> <div id="fragment-3"> <ul> <li><a href="http://www.authenticjobs.com/jobs/2532">MWI: .NET C# Web Programmer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2519">Sleepy Giant: Freelance Web Designer for www.gongonline.com</a></li> <li><a href="http://www.authenticjobs.com/jobs/2500">Airlock: Flash/ActionScript developer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2496">GoAnimate, Inc.: Amazing Web Designer who likes Animations and Comics</a></li> <li><a href="http://www.authenticjobs.com/jobs/2493">Thisadwillchangeyourlife.com: God-like back end developer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2486">Artisan: Flash Designers & Programmers</a></li> <li><a href="http://www.authenticjobs.com/jobs/2484">Contegra Systems, Inc.: Developer - Enterprise Search Experience (FAST, Autonomy, dtSearch or, Lucene)</a></li> <li><a href="http://www.authenticjobs.com/jobs/2483">AQUENT: Web & Flash Designer</a></li> <li><a href="http://www.authenticjobs.com/jobs/2465">Vivopad: Start-up Looking for Aspiring CTO</a></li> <li><a href="http://www.authenticjobs.com/jobs/2480">Giovanni Bianco / Studio 65: Junior Web Designer</a></li> </ul> </div> </div> <p><strong><a href="http://www.authenticjobs.com/">Post your own job opening</a>.</p> <hr /> <h4 class="recommended"><span>Recommended</span></h4> <div class="referral"> <p> <a href="http://secure.idologic.com/payment/aff.php?aff=023"><img src="http://www.31three.com/img2/idologic.gif" alt="idologic hosting" width="73" height="73" /></a> <strong><a href="http://secure.idologic.com/payment/aff.php?aff=023">Idologic Hosting</a></strong><br /> I've been with Idologic since January 2006, and can vouch for their amazing support and reliablity. </p> </div> <div class="referral"> <p><a href="http://www.pmachine.com/index.php?affiliate=jessebc"><img src="/img2/ref_ee.jpg" alt="ref_ee" width="73" height="73" /></a> <strong><a href="http://www.pmachine.com/index.php?affiliate=jessebc">ExpressionEngine</a></strong><br /> A feature-rich content management system that allows PHP illiterate folks like myself to create dynamic sites. </p> </div> <div class="referral"> <p><a href="http://basecamphq.com/?referrer=31three"><img src="/img2/ref_basecamp.gif" alt="ref_basecamp" width="73" height="73" /></a> <strong><a href="http://basecamphq.com/?referrer=31three">Basecamp Project Management</a></strong><br /> Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects. </p> </div> </div><!-- contentless column --> <div class="clear"></div> </div><!--wrapper--> <p class="footer">© 2003-2008 31Three | <a href="http://feeds.feedburner.com/31Three-Journal"><img src="/img2/rss-orange.gif" width="16" height="12" alt="RSS" /> Subscribe</a></p> </body> </html>