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

Thread tagged as: Question, Runway

Perch Mega Menu

Hi

I'm trying to add Perch nav to my Mega Menu (yamm/bootstrap). This is where I'm currently at;

level 1

<perch:before> 
    <div class="navbar yamm navbar-default navbar-bar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar-collapse-1" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    </perch:before>
                    <li class="<perch:if exists="current_page">active </perch:if><perch:if exists="ancestor_page">ancestor </perch:if><perch:if exists="subitems">dropdown yamm-fw </perch:if>"> <a href="<perch:pages id="pagePath" />" <perch:if exists="subitems"> class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"</perch:if>><perch:pages id="pageNavText" /></a>  <perch:pages id="subitems" encode="false" /> </li><perch:after>
                </ul>
            </div>
        </div>
    </div>
</perch:after>

Level 2

<perch:before> 
    <ul class="dropdown-menu">
        <li>
            <div class="yamm-content">
                <div class="row">
                    <div class="col-sm-3 yamm-nodivider">
                        <ul>
                            </perch:before>
                            <li>
                                <a  class="btn btn-primary yamm-btn" href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
                            </li>
                            <perch:after>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</perch:after>

My original nav (part of it)

<div id="navbar-collapse-1" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">home</a></li>
                <li class="dropdown yamm-fw">
                    <a href="/surgical" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">surgical <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                           <div class="yamm-content">
                                <div class="row">
                                    <div class="col-sm-3 yamm-nodivider">
                                        <ul>
                                            <li><a class="btn btn-primary yamm-btn" href="/surgical/facial">facial treatments</a></li>
                                            <li><a class="btn btn-primary yamm-btn" href="/surgical/breasts">breast treatments</a></li>
                                            <li><a class="btn btn-primary yamm-btn" href="/surgical/body">body treatments</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-3">
                                        <span class="submenu-headers">Facial treatments</span>
                                        <ul>
                                            <li><a href="/surgical/facial/blepharoplasty">blepharoplasty</a></li>
                                            <li><a href="/surgical/facial/dimple-surgery">dimple surgery</a></li>
                                            <li><a href="/surgical/facial/otoplasty">otoplasty</a></li>
                                            <li><a href="/surgical/facial/facelifts">facelifts</a></li>
                                            <li><a href="/surgical/facial/necklifts">necklifts</a></li>
                                            <li><a href="/surgical/facial/rhinoplasty">rhinoplasty</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-3">
                                        <span class="submenu-headers">Breast treatments</span>
                                        <ul>
                                            <li><a href="/surgical/breasts/enlargement">enlargement</a></li>
                                            <li><a href="/surgical/breasts/reduction">reduction</a></li>
                                            <li><a href="/surgical/breasts/uplift">uplift</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-3">
                                        <span class="submenu-headers">Body treatments</span>
                                        <ul>
                                            <li><a href="/surgical/body/bodytite">bodytite</a></li>
                                            <li><a href="/surgical/body/cellulite">cellulite</a></li>
                                            <li><a href="/surgical/body/liposuction">liposuction</a></li>
                                            <li><a href="/surgical/body/mini-tummy-tuck">mini tummy tuck</a></li>
                                            <li><a href="/surgical/body/smart-lipo">smart lipo</a></li>
                                            <li><a href="/surgical/body/vaser-lipo">vaser lipo</a></li>
                                            <li><a href="/surgical/body/weight-loss-surgery">weight loss surgery</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                           Next dropdown
                           etc., etc.

My current templates gets me to first col-sm-3 in the dropdown, but I've hit a wall on how I produce the next subitems in the next two columns.

Has anyone got any suggestions/pointers?

Thanks Wayne

Wayne Hooper

Wayne Hooper 6 points

  • 4 years ago

Wayne. You would want to test nav depth then using if statement add next level to your menu.

Hi Rob

Yeah, its the level 3 thats throwing me at the moment and how I add it to the next two columns within the row. Only done 2 level bootstrap menus with Perch before... I'll keep looking into it, but if you have any pointers they would be greatly received.

You can specify a list of templates and perch will run through the list as levels, if your menu has more levels then you have templates in the list it will use final template over and over.