Forum

Thread tagged as: Question, Problem

Submenu Items

I cannot work out how to get the submenu items to function correctly. I have had a look at the forums and can't find my answer there.

My static HTML that I am trying to put Perch into is :

                <div id="navbar-collapse-1" class="navbar-collapse collapse navbar-right">
                    <ul class="nav navbar-nav">

                        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">What's On <div class="arrow-up"></div></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="calendar.html">Calendar</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="youth.html">Youth</a></li>
<li><a href="children.html">Children</a></li>
<li><a href="students.html">Students</a></li>
<li><a href="small-groups.html">Small Groups</a></li>
<li><a href="alpha-course.html">Alpha Course</a></li>
                            </ul><!-- end dropdown-menu -->
                        </li><!-- end standard drop down -->

                        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">How can we help? <div class="arrow-up"></div></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="family-life-centre.html">Counseling</a></li>
<li><a href="pastoral-care.html">Pastoral Care</a></li>
<li><a href="prayer-support.html">Prayer Support</a></li>
<li><a href="marriage-courses.html">Marriage Courses</a></li>
<li><a href="city-centre-chaplaincy.html">City Centre Chaplaincy</a></li>
                            </ul><!-- end dropdown-menu -->
                        </li><!-- end standard drop down -->

                    </ul><!-- end navbar-nav -->
                </div><!-- #navbar-collapse-1 -->

And this is what I have got in my Navigation Template.

<perch:before>
    <ul class="nav navbar-nav">
</perch:before>
        <li class="dropdown">
            <a href="<perch:pages id="pagePath" />" data-toggle="dropdown" class="dropdown-toggle"><perch:pages id="pageNavText" /><div class="arrow-up"></div></a>   


            <ul class="dropdown-menu" role="menu">
            <li<perch:if exists="current_page"> class="current"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
            <perch:pages id="subitems" encode="false" />
            </li>

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

What do I need to do to get submenu items to work correctly?

Philip Young

Philip Young 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Are you using just one template? If so, the template is recursive. The id="subitems" tag will run the template again with the subitems.

Yes, just one template. I thought I would be able to place some perch tags around one of my submenu items in the same way I did with the main menu item.

Have I got this completely wrong?

I don't understand what id="subitems" is actually doing or how I would go about making that work with my code.

Drew McLellan

Drew McLellan 2638 points
Perch Support

What output are you getting, and how is it wrong?

This is my HTML output. It is assigning <ul class="nav navbar-nav"> to the submenu items when I want them to be given a class <ul class="dropdown-menu" role="menu">.

Is there a way to break out the submenu items to allow for a different class and role to be applied to them?


<div id="navbar-collapse-1" class="navbar-collapse collapse navbar-right"> <ul class="nav navbar-nav"> <li class="dropdown"><a href="/whats-on" data-toggle="dropdown" class="dropdown-toggle">What's On<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="/calendar.php" data-toggle="dropdown" class="dropdown-toggle">Calendar<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> </li> </ul> </li> <li class="dropdown"> <a href="/services.php" data-toggle="dropdown" class="dropdown-toggle">Services<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> </li> </ul> </li> </ul> </li> </ul> </li> <li class="dropdown"> <a href="/how-can-we-help" data-toggle="dropdown" class="dropdown-toggle">How Can We Help?<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="/pastoral-care.php" data-toggle="dropdown" class="dropdown-toggle">Pastoral Care<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> </li> </ul> </li> </ul> </li> </ul> </li>
Drew McLellan

Drew McLellan 2638 points
Perch Support

Instead of

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

Try:

<perch:before>
    <perch:if id="pageDepth" match="gt" value="1">
        <ul class="dropdown-menu" role="menu">
    <perch:else />
        <ul class="nav navbar-nav">
    </perch:if>
</perch:before>

Tried that Drew. It has my submenu item in the code, but not displayed. The code is correct up until the first <ul class="dropdown-menu" role="menu"> . It should just have <li>'s with each submenu item.

This is the code I get when I make the change you suggest above.


<div id="navbar-collapse-1" class="navbar-collapse collapse navbar-right"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="/whats-on" data-toggle="dropdown" class="dropdown-toggle">What's On<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> <ul class="dropdown-menu" role="menu"> <li class="dropdown"> <a href="/calendar.php" data-toggle="dropdown" class="dropdown-toggle">Calendar<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> </li> </ul> </li> <li class="dropdown"> <a href="/services.php" data-toggle="dropdown" class="dropdown-toggle">Services<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> </li> </ul> </li> <li class="dropdown"> <a href="/children.php" data-toggle="dropdown" class="dropdown-toggle">Children<div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li> </li> </ul> </li>

This is what it should look like


<div id="navbar-collapse-1" class="navbar-collapse collapse navbar-right"> <ul class="nav navbar-nav"> <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">What's On <div class="arrow-up"></div></a> <ul class="dropdown-menu" role="menu"> <li><a href="calendar.html">Calendar</a></li> <li><a href="services.html">Services</a></li> <li><a href="youth.html">Youth</a></li> <li><a href="children.html">Children</a></li>
Drew McLellan

Drew McLellan 2638 points
Perch Support

I think you need to remove the nested <ul> from the middle of the template - that'll get handled in the recursion.

Got it! Thanks again Drew.

I had to add in a few more IF statements to get the correct Data Toggles and Classes in the right place but it now works!!

Thanks for your help.

Phil