ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Navigation Location Highligh (active)

August 06, 2013 3:49am

Subscribe [2]
  • #1 / Aug 06, 2013 3:49am

    Businessport46

    9 posts

    My page template has a global embedded top navigation and a small left aligned sub navigation.  On the sub navigation I would like the current page the user is on to be highlighted with a class of some sort.  I have seen examples of this but those examples seem to be based on a static menu that doesn’t get it’s contents from a channel like mine does.

    My code for this sub navigation is:

    <ul class="leftNav">   
        {exp:channel:entries channel="section_about" dynamic="off" sort="asc"}
          <li><a href="http://{url_title}">{title}</a></li>
        {/exp:channel:entries}
      </ul>

    The code I have found online looks like this:

    <ul>
        <li><a href="http://./class=current">Home</a></li>
        <li><a href="http://dont_hire/class=current">Don’t Hire Us</a></li>
        <li><a href="http://portfolio/class=current">Portfolio</a></li>
      </ul>

    As you can see it’s great for a static menu but how could I apply this code to me environment? and is it even appropriate for it?

  • #2 / Aug 06, 2013 1:15pm

    Giraffentoast

    152 posts

    Try something like this:

    <ul class="leftNav">   
        {exp:channel:entries channel="section_about" dynamic="off" sort="asc"}
        {if segment_1 == url_title}
          <li class="on"><a href="http://{url_title}">{title}</a></li>
        {if:else}
          <li><a href="http://{url_title}">{title}</a></li>
        {/if}
        {/exp:channel:entries}
    </ul>

    You might need to modify the {if segment_1 == url_title} part seen above.
    Segment_1 is the first ‘folder’ of the current URL. More about that here.

  • #3 / Aug 06, 2013 2:38pm

    Boyink!

    5011 posts

    Or even more compactly:

    <ul class="leftNav">   
        {exp:channel:entries channel="section_about" dynamic="off" sort="asc"} 
          <li{if segment_1 == url_title} class="on"{/if}><a href="http://{url_title}">{title}</a></li>
        {/exp:channel:entries}
    </ul>
.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases