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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By SwimToWin
      BACKGROUND
      SEO matters and so hiding pages behind a "section" is not necessarily good - example:
      Current practice is to show the pages "Foo, Bar, Baz" in a section. https://www.example.com/resources/foo https://www.example.com/resources/bar https://www.example.com/resources/baz For SEO reasons, it's better to show the page at root level like so: https://www.example.com/foo https://www.example.com/bar https://www.example.com/baz PROBLEM: LACK OF ORGANIZATION WHEN ALL PAGES ARE PUBLISHED AT ROOT LEVEL
      This design is fully possible today. However, the root folder becomes disorganized when all pages are published in the root - and the pages tree structure is not of much use when all pages are published in the root.
      SOLUTION: VIRTUAL PAGES TO THE RESCUE
      As a publisher, when publishing many pages that have a root level url, I want to organize my pages below a Virtual Page (that doesn't have a url), so that pages are organized in a Pages Tree Structure (using "Virtual Pages").
      What is a "Virtual Page"?
      Virtual Page can never have a name (Admin -> Page -> Settings -> Name). The Name field is simply blank The Name field is never used in the url for child pages. Virtual Page is a container used to organize other pages. Virtual Page is never shown in the front-end. Virtual Page is shown in the Editing interface only. Virtual Page might have a Template - but the template can only be used in the Admin interface. Virtual Page might have fields (Title, Summary, Text etc.) - but the contents cannot be shown online.
×
×
  • Create New...