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

7 years ago

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

Philip Young 0 points

7 years ago

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

7 years ago

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

Philip Young 0 points

7 years ago

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

7 years ago

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

Philip Young 0 points

7 years ago

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

7 years ago

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

Philip Young 0 points

7 years ago

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