Thread

Hi

I’m using the categories tag has my main navigation and I would like to have a current state on each category page

I know it’s easy with a static nav (with {if} statements) but here ee is creating the ul > li for me

how can I make that work ?

Thanks for your help !

William

Hi William,

As EE is working properly and there are multiple approaches, I’ll shift this over to the CodeShare Corner for you. Thanks.

Hi again,

so can someone help me ?

it has been 2 days I’m pulling my hair off with this, I really can’t figure out putting a current state on a category list :(

Thanks guys

regards,

William

Hi William,

Hang on in there - I have had a fair few hair pulling moments with EE myself! 😊

Hopefully the following code should help you:
EDIT - sorry I have had fierce trouble getting the complete code sample to show up, so here is the key excerpt and the full version is at http://pastebin.com/BqQiLvjr

<a{if segment_3 == category_url_title} class="current"{/if}>

This code should give you a class=“current” for the current category and leave off the class otherwise, enabling you to highlight the current link by having a style for a.current.

The code assumes you are using words in your category urls rather than ids and that the category slug is the third segment in the url. If you’re using IDs you would compare segment_n with category_id instead.

Hope this helps 😊

thank you for your reply 😊 but… it didn’t work :(
it puts the current state on each links

<li><a href="http://{site_url}class=current"><span>Home</span></a></li>
                <li><a href="/map"><span>Map</span></a></li>
                {exp:channel:entries channel="products" category_group="1" sort="asc"}
                {categories}
                <li><a href="/site/gammes/{category_url_title}" class="current"><span>{category_name}</span></a></li>
                {/categories}
                {/exp:channel:entries}

Thanks for the help !

Hi Trenk,

I had trouble posting my code before, so you may not have tried the full version.
Also, my code is EE1 code - but similar code should work for EE2.

Going by the code you posted, I think there might be another tag more useful to you here.
If you want to list out categories in navigation etc there is a special tag for that {exp:channel:categories} - see http://ellislab.com/expressionengine/user-guide/modules/channel/categories.html

You don’t have to get into using the big channel entries loop. The categories tag within that is meant for just displaying the list of categories that an individual entry is posted in.

So try the {exp:channel:categories} tag instead and put the {if segment_3== category_url_title} in the a tag within that and that should work (assuming segment_3 is the one with the category slug in it)

Nop, still no luck with this :(

{exp:channel:categories channel="products" category_group="1"}
<a href="/site/gammes/{category_url_title}" class="current"><span>{category_name}</span></a>
{/exp:channel:categories}

This is driving me crazy!

Thanks for everything 😊

Regards,

William

Hi William,

I think you’re having the same difficulty posting code that I was - the if in the a tag is not coming out.
It’s hard to debug without seeing your exact code. Could you paste it at pastebin.com or similar? Also, could you give the URL of one of your category pages?

Also as an aside, for the href part you can use {path="site/games"} instead, which will add the category slug automatically to each URL and will update automatically if you change your site URL in the future etc.

I copied my code from a working EE1 site so unless there is a difference with EE2, it should work.
However, here is an alternative approach if you can’t get this one working.
In your categories loop, give each link a unique class based on the category slug e.g.

<a href="http://{path=class=nav-{category_url_title}">{category_name}</a>

Then use the category heading tag around one of the parent tags of the nav code on the page e.g. the div etc that your category nav is in, or the div around the page content or even the body tag. http://ellislab.com/expressionengine/user-guide/modules/channel/category_heading.html e.g.

{exp:channel:category_heading weblog="products"}
<div class="page-{category_url_title}">
{/exp:channel:category_heading}

Then you can put a rule in your style sheet for each category page to highlight the right nav item e.g.

.page-jigsaws a.nav-jigsaws { color: #f00; }

I prefer the other class=“current” approach because it is neater and easier, but I have just outlined another method in case you have to get something working asap.

There are probably other approaches too - I just can’t think of them right now but I’m sure others can! 😊

Hi Tidy,

thank you so much for your support, much appreciated 😊

I’ve finally managed it, it was a stupid syntax issue :

{exp:channel:categories channel="products" category_group="1"}
                <li><a href="/site/gammes/{category_url_title}" class="current"><span>{category_name}</span></a></li>
                {/exp:channel:categories}

I really need to get comfortable with this {if} statements 😉

Thanks for your help anyway

William

Edit: weird, I can’t get to make the {if} into my code example.

Hi William,

We crossed posts there - I was updating mine with another approach while you had it sorted LOL
Good you got the first class=“current” approach working - I find it much easier.
Glad you got it sorted anyway and hope you have some hair left 😊

Tis odd about the code samples alright, I’ll try and report that somewhere in case there is a workaround or so that something can be done about it.

Hi Tidy,

thank you so much for your support, much appreciated 😊

I’ve finally managed it, it was a stupid syntax issue :

{exp:channel:categories channel="products" category_group="1"}
                <li><a href="/site/gammes/{category_url_title}" class="current"><span>{category_name}</span></a></li>
                {/exp:channel:categories}

I really need to get comfortable with this {if} statements 😉

Thanks for your help anyway

William

Edit: weird, I can’t get to make the {if} into my code example.

A bit unrelated - but there is a tidier way of creating category links:

<li><a href="http://{path=%27site/gammes%27}" class="current"><span>{category_name}</span></a></li>

Since you are using the path linking variable in a category context (within the channel:categories tag pair) EE will automatically create category links.

I am trying to do this with the child categories plugin, but having no luck.

{exp:child_categories parent="{cat_id}" weblog="corporate" show_empty="yes" child_categories_sort_by="custom"}
     {child_category_start}
          <li><a href="http://{path=class=current">{child_category_name}</a></li>
     {child_category_end}
{/exp:child_categories}

Code here, if statements not showing up above…

Any ideas? it’s doing ym head in as the logic is sound…. I’ve even just printed {segment_5} and {child_category_url_title} to the page to se if they match, and they do, it just won’t output anything inside the if statement…..

I am having trouble with this as well. I am only using one level of categories. It seems like it would be pretty simple, but I can’t get it to work.

{exp:channel:categories channel="projects" style="linear" show_empty="yes"}
  
<li><a href="http://{path=class=navRight-current">{category_name}</a></li>
  
{/exp:channel:categories}

EEv2.3.1 - Build: date 20111017

Since it took out my if statement I had

if segment_3==“category_url_title” and a closing if around the class in the href link.