Menu Styles

Published by Green Skills on

JSN Epic provides 5 menu styles to display your website navigation on virtually any position. In Joomla! 1.5.x JSN Epic utilizes Joomla! built-in menu module to show menus, so you don’t need to install any external menu modules.

Main Menu

Main Menu

By a combination of XHTML, CSS and little JavaScript (only for IE) Main Menu allows you to have clean accessible XHTML code structure and simple but yet effective drop-down submenu panels.

Special visual effects

As from version 3.0, JSN Epic provides smooth drop down animation for submenu panels. The cool thing here is to utilize built-in Joomla! MooTools Javascript so there is a minimal addition to template size. To enable the effect go to template configuration page and set template parameter Main Menu Effect to Yes.

Another visual effect included in version 3.0 is transparency for submenu panels. To enable submenu transparency you need to set template parameter Main Menu Transparency to Yes.

Main Menu Icons

Main Menu Icons

In version 3.0, JSN Epic lets you configure which icon will be shown in Main Menu via template parameter Main Menu Icons. By a combination of XHTML, CSS and PHP, Main Menu Icons also allows you to assign up to 20 predefined icons to menu items like Top Menu Icons and arrange them in horizontal.

Now you need to go to template configuration page and setup icons to be shown in the menu. Find template parameter Main Menu Icons and specifying icon names are separated by comma.

Main Menu Icons Applied

In the example above the menu Main Menu only has 5 menu items, so the sixth icon home is not used. For more information about which icon can be used here, please read more at Top Menu Icons section.

Tree Menu

Tree Menu

The side menu you see on left column is a vertical tree-like menu presentation called Tree Menu. By default all submenu items are collapsed until you select the parent menu item. Submenu items of each level have their own bullets to make it easier to be distinguished.

Div Menu

Div Menu

The Div Menu in the bottom position is a simple but nice menu bar with items separated by slightly visible dashes. Default Joomla! method generates additional HTML tags to show dashes which is not very clean. Div Menu in JSN Epic generates pure HTML list for menu structure and uses CSS to show dashes.

Top Menu Icons

Top Menu Icons

The top menu you see on JSN Epic demo website is a very innovative Icon menu system called Top Menu. By a combination of XHTML, CSS and PHP, Top Menu allows you to assign up to 20 predefined icons to menu items and arrange them in horizontal line. This is perfect for the top position in any kind of websites.

  1. Now you need to go to template configuration page and setup icons to be shown in the menu. Find template parameter Top Menu Icons and specifying icon names separated by comma.

Top Menu Icons Applied

In the example above the menu topmenu only has 5 menu items, so the sixth icon mail is not used.

As stated before there are 20 predefined icons for you to choose. Below is a table of all available icons and their name.

Menu Icons

Side Menu

Side Menu

In version 3.0, JSN Epic provides s vertical menu with slide- out subpanels called Side Menu. By a combination of XHTML, CSS and little JavaScript (only for IE) Side Menu allows you to have a clean accessible XHTML code structure and simple but yet effective slide-out menu effect.

Special visual effects

Pretty the similar to Main Menu JSN Epic provide smooth slide out animation for submenu panels. This feature also utilizes built-in Joomla! MooTools Javascript so there is a minimal addition to template size. To enable the effect go to template configuration page and set template parameter Side Menu Effect to Yes.

Submenu panels of Side Menu can be semi-transparent as well. To enable submenu transparency you need to set template parameter Side Menu Transparency to Yes.

buy-now

Click here to compare the free and PRO editions

Categories: Features