Skip to main content
Craft CMS

Return to Answer

amended code example
Source Link
erwinheiser
erwinheiser
  • 850
  • 7
  • 15

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
erwinheiser
erwinheiser
  • 850
  • 7
  • 15

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 -->