Forum

Thread tagged as: Question

How can I make this menu markup work with perch?

Hello,

I'm totally new to perch, I'm enjoying reading through the docs and am keen to get started on my first perch driven site. I have the following menu that I would like to make driven by perch and perch managed pages. I would appreciate advice on how to do this...here is the markup:

    <div id="p7PM3_1" class="p7PM3-15 p7PM3 p7PM3noscript horiz responsive menu-centered rounded shadows transparent auto-subs sub-left"> 
        <div id="p7PM3tb_1" class="pmm3-toolbar closed">
            <a href="#" title="Hide/Show Menu">&equiv;</a>
        </div>             
        <ul class="closed"> 
            <li>
                <a href="#">Menu Item</a>
            </li>                 
            <li>
                <a href="#">Menu Item</a>
            </li>                 
            <li>
                <a href="#">Menu Item</a>
            </li>                 
            <li>
                <a href="#">Menu Item</a> 
                <ul> 
                    <li>
                        <a href="#">Sub Menu Item</a>
                    </li>                         
                    <li>
                        <a href="#">Sub Menu Item</a>
                    </li>                         
                    <li>
                        <a href="#">Sub Menu Item</a> 
                        <ul> 
                            <li>
                                <a href="#">Sub Menu Item</a>
                            </li>                                 
                        </ul>                             
                    </li>                         
                </ul>                     
            </li>                 
            <li>
                <a href="#">Menu Item</a>
            </li>                 
            <li>
                <a href="#">Menu Item</a>
            </li>                 
        </ul>             
        <script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0,1)</script>             
    </div>

Any help with this would be greatly appreciated!
Mark Fenton

Mark Fenton 0 points

  • 5 years ago
Robert Ketter

Robert Ketter 103 points

5 years ago

https://docs.grabaperch.com/docs/navigation/perch-pages-navigation/

About half way down the page is a section "Styling Navigation" which might be pretty handy reading.
Mark Fenton

Mark Fenton 0 points

5 years ago

Thanks, I've read through that, but I still don't understand how to implement it with the above markup. An example with markup would help me to learn.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

This looks to be pretty much the same structure as the default templates. Have you tried those? Should just be a case of adding your classes etc to the top section.
Robert Ketter

Robert Ketter 103 points

5 years ago

Allthough I wouldn't add the <div> and <script> tags into this template, I have for this example.

It's best to have those in your page html, so the navigation can be used other places too.

<perch:before>
    <div id="p7PM3_1" class="p7PM3-15 p7PM3 p7PM3noscript horiz responsive menu-centered rounded shadows transparent auto-subs sub-left"> 
        <div id="p7PM3tb_1" class="pmm3-toolbar closed">
            <a href="#" title="Hide/Show Menu">&equiv;</a>
        </div>    
        <ul class="closed">
</perch:before>
            <li<perch:if exists="current_page"> class="selected"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
                <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>   
                <perch:pages id="subitems" encode="false" />
            </li>
<perch:after>
        </ul>
        <script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0,1)</script>             
    </div> 
</perch:after>
Mark Fenton

Mark Fenton 0 points

5 years ago

Thank you so much Robert!! I appreciate the guidance :-)