How to create a tree menu?

[Paschalis]

Hi to all. I am a very new member to the community. I want to create a menu as the one listed below.

<!-- Menu-->

                    <ul id="menu" class="sf-menu">

                        <li>

                            <a href="index.html">HOME</a>

                            <ul>                                  

                                <li class="selected"><a href="index.html">Creative</a></li>

                                <li><a href="index-corporate.html">Corporate</a></li>

                                <li><a href="index-business.html">Business</a></li>

                                <li><a href="index-portfolio.html">Portfolio</a></li>

                                <li><a href="index-one-page.html">One Page Theme</a></li>

                                <li><a href="index-landing.html">Landing Page</a></li>

                            </ul>

                        </li>

                        <li>

                            <a href="page-about-01.html">ABOUT</a>

                            <ul>                                  

                                <li><a href="page-about-01.html">About 01</a></li>

                                <li><a href="page-about-02.html">About 02</a></li>

                                <li><a href="page-about-me.html">About Me</a></li>

                                <li><a href="page-about-team.html">About Team</a></li>

                            </ul>

                        </li>

                        <li>

                            <a href="page-services-01.html">SERVICES</a>

                            <ul>                                  

                                <li><a href="page-services-01.html">Services 01</a></li>

                                <li><a href="page-services-02.html">Services 02</a></li>

                                <li><a href="page-services-03.html">Services 03</a></li>

                                <li><a href="page-services-options.html">Services Options</a></li>

                            </ul>

                        </li>

                        <li>

                            <a href="work-2-columns.html">WORKS</a>

                            <ul>                                  

                                <li><a href="work-2-columns.html">Work 2 Columns</a></li>

                                <li><a href="work-3-columns.html">Work 3 Columns</a></li>

                                <li><a href="work-4-columns.html">Work 4 Columns</a></li>

                                <li><a href="single-work.html">Single Work</a></li>

                            </ul>

                        </li>

                        <li>

                            <a href="#">FEATURES</a>

                            <ul>           

                                <li><a href="page-sections-content.html">Sections background</a></li>  

                                <li><a href="#">Pages</a>

                                    <ul>                              

                                        <li><a href="page-full-width.html">Full Width</a></li>

                                        <li><a href="page-left-sidebar.html">Left Sidebar</a></li>

                                        <li><a href="page-right-sidebar.html">Right Sidebar</a></li>

                                        <li><a href="page-404.html">404 Page</a></li>

                                        <li><a href="page-faq.html">FAQ</a></li>

                                     </ul>

                                </li> 

                                <li><a href="#">Sections Titles</a>

                                    <ul>                                  

                                        <li><a href="page-services-01.html">Option 01</a></li>

                                        <li><a href="page-services-02.html">Option 02</a></li>

                                        <li><a href="page-services-03.html">Option 03</a></li>

                                    </ul>

                                </li>                     

                                <li><a href="feature-table-pricing.html">Pricing Tables</a></li>

                                <li><a href="feature-grid.html">Grind System</a></li>

                                <li><a href="feature-typograpy.html">Tipograpy</a></li>

                                <li><a href="feature-icons.html">Icons</a></li>

                                <li><a href="feature-elements.html">Elements</a></li>

                            </ul>

                        </li>         

                         <li>

                            <a href="page-blog-01.html">BLOG</a>

                            <ul>                                  

                                <li><a href="page-blog-01.html">Blog Post 01</a></li>

                                <li><a href="page-blog-02.html">Blog Post 02</a></li>

                                <li><a href="single-post.html">Single Page Post</a></li>

                            </ul>

                        </li>                                         

                        <li>

                            <a href="page-contact-02.html">CONTACT</a>

                            <ul>                                  

                                <li><a href="page-contact-01.html">Contact 01</a></li>

                                <li><a href="page-contact-02.html">Contact 02</a></li>

                            </ul>

                        </li>

                    </ul>

                    <!-- End Menu-->

 

I want it to be created dynamically, but me experice cannot help me. Any help from you?

[LostKobrakai]

The default installation profile of processwire does include a _func.php with an renderNav() function. I suggest taking a look at that one, as it does create that exact structure.

[bora]

And as an additional advice, for creating dynamically, you may include a global option for all pages like "include in the menu" and you can use this option for filtering pages that you want to or don't want include in the tree