Menu Styles

Here you can see live demonstration of Tree Menu.

Tree Menu represents menu items in clear tree-like hierarchy, which is very appropriate for indexing menu. By default all submenu items are collapsed until you select the parent menu item.

To setup Tree Menu you just need to configure module parameter “Menu Class Suffix” appropriately and the menu system will take care of the rest.

Tree Menu with Icons and Rich Text

Here you can see live demonstration of Tree Menu with icons and rich text.

Tree Menu can present menu items with icons and descriptive text, pretty much like Main Menu and Side Menu.

To setup icons you need to configure menu items appropriately just like Main Menu. There are very detailed instructions in template documentation.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non lorem libero. Vestibulum a leo ac tortor congue euismod. Nam sed nulla tellus. Suspendisse ut hendrerit justo. Sed molestie vestibulum nisl, a sodales urna molestie nec. Etiam neque nisl, malesuada ut egestas ut, facilisis vel leo. Morbi gravida blandit porttitor. Phasellus sed diam ante, quis lobortis tortor. Nunc quis mi congue ipsum fringilla hendrerit nec eget magna.

Lorem ipsum

Quisque sed mi non risus egestas cursus. Aenean odio mi, rhoncus sit amet tincidunt placerat, pellentesque ac mi. Mauris est lectus, faucibus vel ultrices eget, lobortis vitae lorem. Nam non nisl vel lorem pulvinar pharetra quis nec augue. Sed in odio lorem. In hac habitasse platea dictumst. Pellentesque elementum, ipsum vel sollicitudin porttitor, felis augue pharetra erat, ut vestibulum dui turpis sed nulla. Suspendisse ac nulla nisi. Fusce sed est a leo gravida bibendum non non odio. Maecenas et tortor sit amet dolor sagittis scelerisque sed sit amet lectus. Suspendisse sollicitudin suscipit velit, eu pellentesque tortor tristique a. Aliquam ut velit dolor, quis convallis orci. Curabitur tincidunt aliquam tellus id tempor. Etiam iaculis erat id metus placerat eget lacinia est eleifend. Ut in interdum mi.

At the top of this page, you can see live demonstration of Top Menu.

Top Menu allows you to arrange menu items in horizontal line and assign icons to them. All icons are configured directly in menu item settings page which is very convenient.

You can choose up to 28 predefined icons to menu item.

To set up icons, you need to go to menu item settings and add symbol combination jsn-icon-xxx to menu item's parameter Link CSS Style, where xxx is the icon name.

Here you can see live demonstration of Side Menu with icons and rich text in RTL layout.

Side Menu is very unique vertical menu with slide-out panels. This menu is extremely efficient when you have complex navigation with a lot of menu items.

To setup Side Menu you just need to configure module parameter “Menu Class Suffix” appropriately and the menu system will take care of the rest. There are very detailed instructions in template documentation.

Side Menu with Icons and Rich Text

Side Menu can present menu items with icons and descriptive text, pretty much like Main Menu.

To setup icons you need to configure menu items appropriately just like Main Menu. There are very detailed instructions in template documentation.

See Side Menu in Normal layout

Here you can see live demonstration of Side Menu with icons and rich text.

Side Menu is very unique vertical menu with slide-out panels. This menu is extremely efficient when you have complex navigation with a lot of menu items.

To setup Side Menu you just need to configure module parameter “Menu Class Suffix” appropriately and the menu system will take care of the rest. There are very detailed instructions in template documentation.

Side Menu with Icons and Rich Text

Side Menu can present menu items with icons and descriptive text, pretty much like Main Menu.

To setup icons you need to configure menu items appropriately just like Main Menu. There are very detailed instructions in template documentation.

Side Menu with RTL Support

Side Menu works flawlessly even in RTL layout, in which sub-menu panels will slide out from right to left.

See Side Menu in RTL layout

On top of this page, you can see live demonstration of Rich Menu. Icon Arrow Up

With this menu system you can attach icons and add descriptive text to each menu item making them much clearer and visually appealing. The best thing is you can use the default menu module built-in Joomla!, no need to install external menu modules.

Menu items with descriptive text

JSN Metro allows you to present menu items with descriptive text placed on a separated line at the bottom of main text.

Main Menu Rich Text

To setup text strings you need to go to menu item settings and add symbol combination “(=) as separator between primary and secondary text.

Main Menu Rich Text Settings

In the example above text “Home” is the primary text and “Lorem ipsum dolor sit...” is the secondary text. Separator between them is the symbol combination “(=)”. Really simple and elegant solution.


Menu items with icons

JSN Metro allows you to assign up to 20 predefined icons for items in main menu.

Main Menu Icons

To setup icons, you need to find template parameter Main Menu Icons and choose any icon you want to display from drop-down panel.

Main Menu Icons Settings


Combination of descriptive text and icons

You can use combination of descriptive text and icons to get Rich Menu in it's best presentation.

Main Menu Rich Text combined with Icons

On top of this page, you can see live demonstration of Main Menu with icons and rich text. Icon Arrow Up

Main Menu is very powerful menu built with clean accessible XHTML code structure and effective drop-down submenu panels.

Main Menu Icons

Main Menu Icons

You can attach any of 28 predefined icons to menu items to make them more appealing.

Main Menu Icons Settings

To set up icons, you need to go to menu item settings and add symbol combination jsn-icon-xxx to menu items parameter Link CSS Style, where xxx is the icon name.


Main Menu Rich Text

Main Menu Rich Text

You can add descriptive text to menu items to make them much clearer.

Main Menu Rich Text Settings

To set up descriptive text, you need to go to menu item settings and add descriptive text to menu items parameter Link Title Attribute.


Main Menu Icons and Rich Text in combination

Main Menu Rich Text combined with Icons

You can set up menu items to utilize both icons and rich text in combination. Take a look at main menu on this page to see live demonstration.

Impressum
Verantwortlich für die Homepage:
Michael Kramer
Carl-Orff-Grund- und Mittelschule
Buzallee 6 - 8
86911 Dießen am Ammersee

Redaktion:
Martina Gruber
Franz-Josef Kisch
Schulnummer: MS 2647; GS 2132
Schulträger: Marktgemeinde Dießen am Ammersee
HAFTUNG FÜR INHALTE UND LINKS 
Als Betreiber der Seiten sind wir gemäß § 6 Abs.1 MDStV und § 8 Abs.1 TDG für eigene Inhalte nach den allgemeinen Gesetzen verantwortlich. Die Inhalte der Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Haftung übernehmen.
Unser Angebot enthält Links zu externen Webseiten, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist der jeweilige Anbieter verantwortlich. Die Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Eine permanente Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir diese Links umgehend entfernen
DATENSCHUTZ NACH ART. 13 DS-GVO UND URHEBERRECHT
Die Datenschutzerklärung nach Art. 13 DS-GVO können Sie hier einsehen.

Die Veröffentlichungen auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Verfassers. Beiträge Dritter – auch von Schülern- sind als solche gekennzeichnet. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
Kontakt
Carl-Orff-Grund- und Mittelschule, Musikmittelschule
Buzallee 6 - 8
86911 Dießen am Ammersee
Telefon  08807 9464-0
Fax         08807 9464-100
Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.