1

I need some help with coding the navigation.

This is the markup:

<ul>
    <li class="active"><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a>
        <div class="drop">
            <ul>
                <li><a href="#">signs</a></li>
                <li><a href="#">printed decals</a></li>
                <li><a href="#">vehicle &amp; fleet graphics</a></li>
                <li><a href="#">banners &amp; posters</a></li>
                <li><a href="#">magnetics</a></li>
                <li><a href="#">vinyl graphics</a></li>
                <li><a href="#">construction and job site signs</a></li>
                <li><a href="#">business cards &amp; flyers</a></li>
                <li><a href="#">sign hardware</a></li>
            </ul>
        </div>
    </li>
</ul>
<ul>
    <li><a href="#">testimonials</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">get quote</a></li>
</ul>

And here's a sample of my entries, channels and structures: http://grab.by/Awx8

This is what I have so far, but it's not really working at all:

{# get menu items #}
{# {% set pageItems = craft.entries.section('services').level('<= 2') %} #}

{% set pageItems = craft.entries.level('<= 2') %}

{# Output the sub menu #}
<ul>
    <li><a href="{{ siteUrl }}">Home</a></li>

    {% nav page in pageItems %}
        <li>
            <a href="{{ page.navigationUrlOverride ? page.navigationUrlOverride : page.url }}">
                {% if page.navigationTitle %}
                    {{ page.navigationTitle|nl2br }}
                {% else %}
                    {{ page.title }}
                {% endif %}
            </a>

            {% ifchildren %}
                <div class="drop">
                    <ul>
                        {% children %}
                    </ul>
                </div>
            {% endifchildren %}
        </li>
    {% endnav %}
</ul>
<ul>
    <li><a href="#">testimonials</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">get quote</a></li>
</ul>

Any help is much appreciated.

1

My Solution uses:
1. LJ Dynamic Fields Plugin
2. 1 Structure I called SiteMenu

What I did is:

1. Install LJ Dynamic Fields
2. Setup a MenuLinkPage Field of fieldType Dynamic DropDown - In the Drop Down Options is like this because am pulling links from entries and category


{% set menuIds = craft.entries.section('siteMenu').ids()%}
{% set menuIdsString = menuIds | join(', not ') %}

{ "value":"#","label":"Select Page"},
{%for category in craft.categories.limit(null) %}
      { "value":"{{category.id}}" , "label":"category-{{category.group}}--{{category.title}}"},
{%endfor%}
{%for entry in craft.entries.limit(null).id('and, not '~menuIdsString).order('type ASC')%}
      { "value":"{{ entry.id }}" , "label":"{{entry.type}} - {{ entry | raw }}"  
      }
      {% if not loop.last %},{% endif %}
{%endfor%}
    
  1. Setup a SiteMenu Structure on its layout I added MenuLink Field.
  2. Then added Pages I need for my Menu by selecting from MenuLinkPage field.
  3. Call the menu in my _layout template like this

    
    {% block menu %}

    {% set pages = craft.entries.section('siteMenu').level('<=2') %}

    <ul>
    <li class="mobile-close"><a href="#close" class="mobile-menu-trigger"><i class="fa fa-times"></i> close menu</a></li>
    {% cache %}  
      {% nav page in pages %}
    
            {% set entryId = page.menuLinkPage %}
    
            {% if entryId > 0 %}
              {% if craft.categories.id(entryId)|length %}
                <li><a href="{{siteUrl}}index.php/{{ craft.categories.id(entryId).first().uri }}">{{page.title}}</a>
              {% else %}
                <li><a href="{{siteUrl}}index.php/{{ craft.entries.id(entryId).first().uri }}">{{page.title}}</a>
              {% endif %}    
    {% else %}
                <li><a href="{{siteUrl}}">{{page.title}}</a>
    
            {% endif %}
    
                {% ifchildren %}
                    <ul class="sub-menu">
                        {% children %}
                    </ul>
                {% endifchildren %}
            </li>
        {% endnav %}
    

    {% endcache %}
    {% endblock menu %}


    I hope this helps

  • Thank you for the help! I am still a bit confused as to steps 3 and 4. Would you mind elaborating on those instructions? – frshjb373 Sep 20 '14 at 16:01
  • What I meant in step:<br>3. Adding entries in SiteMenu Structure,for each page link you need to select a page you want from MenuLinkPage Dropdown. <br>4. To show menu in your layout you loop through siteMenu channel like above – Silvanus Matiku Sep 20 '14 at 21:38
  • Maybe I'm confused because the dropdown is empty after adding dynamic dropdown with code provided. See screenshot: link and link. Any idea what the issue is? – frshjb373 Sep 21 '14 at 15:07
  • Hi user3038693,is your code in github? send a link I can have a look. – Silvanus Matiku Sep 22 '14 at 0:03
  • I have it cloned in bitbucket. Do you have a username there? If so, let me know and I'll share repository with you. Or you can contact me here with your email...link – frshjb373 Sep 22 '14 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.