Examples of menu tree

These examples will show you how to use menu trees in each site. If to use in backend dynamic plugin. This plugin is developed to be used for QCubed v4 version.

I will give examples of menu trees with three levels. It is possible to add levels in unlimited number. It is usually a good practice to limit menu tree levels up to two-three as it makes it easier for site visitors to navigate in your webpage and find information.

Example: NaturalList

The first example uses the class of NaturalList and its aim is to show natural list without styles or the support of javascript. Try to experiment with menu manager and come back here. In order to do so, you need to refresh your browser.

Class of the NaturalList is a good base to use, if you want to create menu which has various looks and javascript effects. For these use functions renderMenuTree() and makeJqWidget().

  1. Homepage
  2. Organisation
    1. Contact
    2. Juhatus
    3. Kultuuri juhatus
    4. Spordi juhatus
    5. Status
  3. Uudised
    1. Kultuuri uudised
    2. Poliitika uudised
    3. Spordiuudised
    4. Sotsiaaluudised
  4. QCubed arenduse koduleht
  5. Pildigalerii
  6. Spordialad
  7. Kaasautorlus
  8. BLAAA
  9. Kogukonna galerii
  10. Suunamine juhatusele
  11. Spordiseltsid
  12. Kolmas kalender
  13. Spordisündmuste kalender
  14. Sündmuste kalender

Example: Bootstrap Navbar

The second example uses possibilities of the QCubed Bootstrap class, to be more specific – NavabarList. Official Bootstrap does not support multi-level levels, you can only display 2 levels.

In this case you need to set the value to „2“ in NestedSortable MaxLevel, which will limit the depth of the required levels.

Home

Lorem ipsum dolor sit amet, exerci fastidii detracto in mel, alterum probatus scripserit te quo. Falli labore et eum, cibo posse scripserit in qui. Ne vix enim platonem accusamus. Mei et sint everti, mea discere erroribus ei, eam an omnes postea repudiandae. Ei blandit vituperata quo, in pro justo suavitate. Te case cibo tritani per. Nec sumo consequat ei, amet animal vis te.

An placerat periculis mediocritatem has, ipsum officiis id sed. Ex nec error eripuit. Ut quo justo aeterno ceteros, eam ei etiam error. Ea has choro fabulas, quidam facete voluptaria te mel. Luptatum similique vituperatoribus mei ex. Nec cetero menandri abhorreant cu, ex aeterno debitis veritus eos.

Cum eu etiam possit utamur, dolorum corrumpit at his, duo tempor inermis elaboraret eu. Vel ad summo dicit liberavisse, ut esse homero has. Everti vidisse dolores eos in. Dolorum complectitur at mel. His corrumpit expetendis in, ut usu posse movet, praesent dignissim has no.

Example: SmartMenus Bootstrap Addon (Navbar)

The third example uses the alternative of Bootstrap Navbar – SmartMenus. In case you don’t find the two-leveled opportunities of official Bootstrap Navbar satisfactory. This example uses the opportunities of the SmartMenus plugin.

SmartMenus class, which is based on the class of NaturalList, used with QCubed Bootstrap Navbar will give us the wanted result.

Home

Lorem ipsum dolor sit amet, exerci fastidii detracto in mel, alterum probatus scripserit te quo. Falli labore et eum, cibo posse scripserit in qui. Ne vix enim platonem accusamus. Mei et sint everti, mea discere erroribus ei, eam an omnes postea repudiandae. Ei blandit vituperata quo, in pro justo suavitate. Te case cibo tritani per. Nec sumo consequat ei, amet animal vis te.

An placerat periculis mediocritatem has, ipsum officiis id sed. Ex nec error eripuit. Ut quo justo aeterno ceteros, eam ei etiam error. Ea has choro fabulas, quidam facete voluptaria te mel. Luptatum similique vituperatoribus mei ex. Nec cetero menandri abhorreant cu, ex aeterno debitis veritus eos.

Cum eu etiam possit utamur, dolorum corrumpit at his, duo tempor inermis elaboraret eu. Vel ad summo dicit liberavisse, ut esse homero has. Everti vidisse dolores eos in. Dolorum complectitur at mel. His corrumpit expetendis in, ut usu posse movet, praesent dignissim has no.

Example: Using Bootstrap Navbar with SideBar

Sometimes you might want the following: the first level of the menu tree is displayed in Bootstrap Navbar and next levels of the menu tree are displayed either left or right next to the content.

The fourth example will show how to do it using classes of css and javascript. You also need to use the class of NaturalList and adapt to the class of SideBar.

Home

Lorem ipsum dolor sit amet, exerci fastidii detracto in mel, alterum probatus scripserit te quo. Falli labore et eum, cibo posse scripserit in qui. Ne vix enim platonem accusamus. Mei et sint everti, mea discere erroribus ei, eam an omnes postea repudiandae. Ei blandit vituperata quo, in pro justo suavitate. Te case cibo tritani per. Nec sumo consequat ei, amet animal vis te.

An placerat periculis mediocritatem has, ipsum officiis id sed. Ex nec error eripuit. Ut quo justo aeterno ceteros, eam ei etiam error. Ea has choro fabulas, quidam facete voluptaria te mel. Luptatum similique vituperatoribus mei ex. Nec cetero menandri abhorreant cu, ex aeterno debitis veritus eos.

Cum eu etiam possit utamur, dolorum corrumpit at his, duo tempor inermis elaboraret eu. Vel ad summo dicit liberavisse, ut esse homero has. Everti vidisse dolores eos in. Dolorum complectitur at mel. His corrumpit expetendis in, ut usu posse movet, praesent dignissim has no.

Example: NestedSidebar

Sometimes it may be necessary to show a site, for example at the request of the subscriber, where Bootstrap Navbar is not used and the menu tree is displayed next to the content on the left or right.

In the fifth example, we show how this can be done using css classes and javascript. This is a simplified example, developers can improve it on css or javascript or php.

Home

Lorem ipsum dolor sit amet, exerci fastidii detracto in mel, alterum probatus scripserit te quo. Falli labore et eum, cibo posse scripserit in qui. Ne vix enim platonem accusamus. Mei et sint everti, mea discere erroribus ei, eam an omnes postea repudiandae. Ei blandit vituperata quo, in pro justo suavitate. Te case cibo tritani per. Nec sumo consequat ei, amet animal vis te.

An placerat periculis mediocritatem has, ipsum officiis id sed. Ex nec error eripuit. Ut quo justo aeterno ceteros, eam ei etiam error. Ea has choro fabulas, quidam facete voluptaria te mel. Luptatum similique vituperatoribus mei ex. Nec cetero menandri abhorreant cu, ex aeterno debitis veritus eos.

Cum eu etiam possit utamur, dolorum corrumpit at his, duo tempor inermis elaboraret eu. Vel ad summo dicit liberavisse, ut esse homero has. Everti vidisse dolores eos in. Dolorum complectitur at mel. His corrumpit expetendis in, ut usu posse movet, praesent dignissim has no.

Summary

Here you must keep in mind that there are many possibilities and solutions to link Bootstrap Navbar or SmartMenus Navbar and/or Sidebar content. Each of the developer will choose for themselves.