Return to Answer

amended code example

Source Link

edited Jul 10, 2014 at 13:10

Following Christian's suggestions I've amended my code and added a 'current' class. This is working fine (and probably cuts down on DB calls):

{# set values for the navigation #}
{# products = structure #}
{% set productpages = craft.entries.section('productPages').depth(1).find() %}
{# singles #}
{% set contact = craft.entries.section('contact').first() %}
{% set overjanandries = craft.entries.section('overJanAndries').first() %}
{% set overview = craft.entries.section('overview').first() %}
{% set news = craft.entries.section('nieuwsIndex').first() %}
{% set section = craft.request.getSegment(1) %}


<div id="menu">
  <a class="close"> <span class="menu-icon icon-cancel"></span></a>
  <nav role="navigation">
  <ul>
    <li {% if section == overview.uri %}class="current"{% endif %}>{{ overview.getLink() }}</li>  
    <li {% if section == overjanandries.uri %}class="current"{% endif %}>{{ overjanandries.getLink() }}</li>  
    {% for page in productpages %}
     <li {% if section == page.uri %}class="current"{% endif %}>{{ page.getLink() }}</li>  
    {% endfor %}
    <li {% if section == news.uri %}class="current"{% endif %}>{{ news.getLink() }}</li>  
    <li {% if section == contact.uri %}class="current"{% endif %}>{{ contact.getLink() }}</li>  
  </ul>
  </nav>
</div><!-- menu -->

Following Christian's suggestions I've amended my code and added a 'current' class. This is working fine (and probably cuts down on DB calls):

{# set values for the navigation #}
{# products = structure #}
{% set productpages = craft.entries.section('productPages').depth(1).find() %}
{# singles #}
{% set contact = craft.entries.section('contact').first() %}
{% set overjanandries = craft.entries.section('overJanAndries').first() %}
{% set overview = craft.entries.section('overview').first() %}
{% set news = craft.entries.section('nieuwsIndex').first() %}
{% set section = craft.request.getSegment(1) %}


<div id="menu">
  <a class="close"> <span class="menu-icon icon-cancel"></span></a>
  <nav role="navigation">
  <ul>
    <li {% if section == overview.uri %}class="current"{% endif %}>{{ overview.getLink() }}</li>  
    <li {% if section == overjanandries.uri %}class="current"{% endif %}>{{ overjanandries.getLink() }}</li>  
    {% for page in productpages %}
     <li {% if section == page.uri %}class="current"{% endif %}>{{ page.getLink() }}</li>  
    {% endfor %}
    <li {% if section == news.uri %}class="current"{% endif %}>{{ news.getLink() }}</li>  
    <li {% if section == contact.uri %}class="current"{% endif %}>{{ contact.getLink() }}</li>  
  </ul>
  </nav>
</div><!-- menu -->

Source Link

created Jul 10, 2014 at 11:10

erwinheiser

This was on my first craft site (http://patisseriejanandries.com) so this is a 'warts and all' example.

Productpages was a structure, news a channel, the other pages were singles. The 'nieuwsindex' single is there because I needed a translatable url for the news page, so that single served as a workaround. (more on that here: https://plus.google.com/116942350387086245334/posts/TBtR3XwuZGx) You're still basically hardcoding the nav, but craft does take care of the multi-language urls, pretty nice if you ask me.

The nav template looked like this (which IMO isn't that bad for a first try :) )

   {# set values for the navigation #}
   {# products = structure #}
   {% set productpages = craft.entries.section('productPages').depth(1).find() %}
   {# singles #}
   {% set contact = craft.entries.section('contact').find() %}
   {% set overjanandries = craft.entries.section('overJanAndries').find() %}
   {% set overview = craft.entries.section('overview').find() %}
   {% set news = craft.entries.section('nieuwsIndex').find() %}


    <div id="menu">
      <a class="close"> <span class="menu-icon icon-cancel"></span></a>
      <nav role="navigation">
      <ul>
        {% for page in overview %}
          <li>{{ page.getLink() }}</li>  
        {% endfor %}
        {% for page in overjanandries %}
          <li>{{ page.getLink() }}</li>  
        {% endfor %}
        {% for page in productpages %}
         <li>{{ page.getLink() }}</li>  
        {% endfor %}
         {% for page in news %}
          <li>{{ page.getLink() }}</li>  
        {% endfor %}
        {% for page in contact %}
          <li>{{ page.getLink() }}</li>  
        {% endfor %}
      </ul>
      </nav>
    </div><!-- menu -->