We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum
Forum
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?
Want to reply to this thread?
Login with Perch
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.
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?
Instead of
Try:
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.
This is what it should look like
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