Jump to content

How to create a tree menu?


Paschalis
 Share

Recommended Posts

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?
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...