Forum

Thread tagged as: Question, Problem

Page Navigation

Can someone see what I am doing wrong;

Navigation template -> item.html

<perch:before>
    <ul class="nav sf-menu clearfix">
</perch:before>
        <li<perch:if exists="current_page"> class="active"</perch:if><perch:if exists="ancestor_page"> class="sub-menu sub-menu-1"</perch:if>>
            <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" />
            <perch:if exists="ancestor_page">
                    <i class="fa fa-angle-down" aria-hidden="true"></i>
            </perch:if>
            </a>   
            <perch:if exists="ancestor_page">
                    <perch:before>
                        <ul>
                    </perch:before>
                        <perch:pages id="subitems" encode="false" />
                    <perch:after>
                        </ul>
                    </perch:after> 
            <perch:else>
                 </li>
            </perch:if>
<perch:after>
    </ul>
</perch:after>

The HTML should look like this;

<ul class="nav sf-menu clearfix">
    <li>
        <a href="index.html">home</a>
    </li>
    <li>
        <a href="index-1.html">about</a>
    </li>
    <li>
        <a href="index-2.html">hot tours</a>
    </li>
    <li class="active">
        <a href="index-3.html">destinations</a>
    </li>
    <li class="sub-menu sub-menu-1">
        <a href="#">Pages
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </a>
        <ul>
            <li>
                <a href="index-4.html">Gallery</a>
            </li>
            <li>
                <a href="index-5.html">Services</a>
            </li>
            <li>
                <a href="404.html">404 page not found</a>
            </li>
        </ul>
    </li>

    <li class="sub-menu sub-menu-1">
        <a href="#">Blog
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </a>
        <ul>
            <li>
                <a href="blog.html">Blog</a>
            </li>
            <li>
                <a href="blog-post.html">Blog Poast</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="index-6.html">contacts</a>
    </li>
</ul>

it actually look like this;

<ul class="nav sf-menu clearfix">
    <li class="sub-menu sub-menu-1">
        <a href="#">About
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </a>   
        <ul>
        </li>
        <li class="sub-menu sub-menu-1">
            <a href="#">Gallery
                <i class="fa fa-angle-down" aria-hidden="true"></i>
             </a>   
        </li>
        <li class="active">
            <a href="#">Home    
            </a>   
        <li class="sub-menu sub-menu-1">
            <a href="#">Divers Tales
                <i class="fa fa-angle-down" aria-hidden="true"></i>        
            </a>   
        </li>
        <li class="sub-menu sub-menu-1">
            <a href="#">Members Area
                <i class="fa fa-angle-down" aria-hidden="true"></i>        
            </a>   
        </li>
        <li class="sub-menu sub-menu-1">
            <a href="#">Diving
                <i class="fa fa-angle-down" aria-hidden="true"></i>        
            </a>   
        </ul>
    </li>
</ul>

I swear I have gone this before but I cannot find the code and now I am going brain dead.

Dennis

Dennis Pickworth

Dennis Pickworth 0 points

  • 3 years ago
Simon Clay

Simon Clay 127 points

I think on line 11 of your template you want subitems instead of ancestor_page.

I usually do this with two templates, so I'd be interested if it works.

Simon, That did not work. All the items just appear at the top. How have you done this with templates

I have found out about the template and I have changed them to look like this.

navigation.php

   <?php perch_pages_navigation(array(
             'navgroup' =>'Main',
             'levels' => 2,
             'template' => array('level1.html', 'level2.html'),
    )); ?>

Level1.html

<perch:before>
    <ul class="nav sf-menu clearfix">
</perch:before>

    <li<perch:if exists="ancestor_page"> class="sub-menu sub-menu-1"</perch:if>>
        <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" />
        <perch:if exists="ancestor_page">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </perch:if>
    </a>
    </li>
<perch:after>
    </ul>
</perch:after>

level2.html

<ul>
    <perch:pages id="subitems" encode="false" />
</ul>

But it is treating each item as a sub item.

If I change level1.html line 5 too this. It makes no difference.

<li<perch:if exists="subitems"> class="sub-menu sub-menu-1"</perch:if>> 

We use two html templates for our drop down for product categories. We also use categories instead of perch_pages_navigation

Check this link https://forum.grabaperch.com/forum/07-13-2018-looping-through-all-categories-displaying-all-items-within-each-category

Simon Clay

Simon Clay 127 points

This is the method I use (for Bootstrap).

For Nav

<?php 
                        perch_pages_navigation(array(
                            'template' => array('level1.html', 'level2.html'),
                            'levels' => 2,
                        ));
                    ?>

My nav templates are:

level1.html:

<perch:before>
<ul class="nav navbar-nav">
</perch:before>

    <li class="<perch:if exists="subitems">dropdown </perch:if><perch:if exists="current_page">active </perch:if><perch:if exists="ancestor_page"> current-menu-ancestor</perch:if>">
        <perch:if exists="subitems"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><perch:pages id="pageNavText" /></a>
        <perch:pages id="subitems" encode="false" />
    </li>
    <perch:else /><a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a></li></perch:if>

<perch:after>
</ul>
</perch:after>

level2.html:

<perch:before>
    <ul class="dropdown-menu">
</perch:before>
        <li class="<perch:if exists="current_page">active </perch:if>"><a href="<perch:pages id="pagePath" />" title="<perch:pages id="pageNavText" />"><perch:pages id="pageNavText" /></a></li>
<perch:after>
    </ul>
</perch:after>

Hi All,

Thanks for the help. I manged to made it work with a combination of Simons work and my own pig headedness to get this running.

Thanks again for all you help

Dennis