Green Skills

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

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

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.

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

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

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

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.

3. 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.

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.

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.

Click here to compare the free and PRO editions

JSN Epic provides 6 major color variations for your taste. Each color variation covers not only the main background, but also drop-down menu, links, table’s header and some others.

All available colors are described below.

Click here to compare the free and PRO editions

JSN Epic provides 4 box designs for module background styling and 20 icon designs for module title styling. All module title styles can be used in combination with module background styles, giving you 80 module style combinations.

Info: Module styles are configured by module’s parameter Module Class Suffix. All available values are described below and need to be applied without double quotes.

Attention: Box designs for module background styling are applicable only for modules in side columns (position left and right)

Box designs

Box designs to be applied to modules published on side columns.

Icon designs

Icon designs to be applied to module’s title.

Info: As with version 3.0 JSN Epic utilize CSS sprite technique to reduce amount of HTTP request to server in order to get icons. Technically, all icons are merged in one single image file and visitors will need to make one single request/download to get that file with all icons. If you have time, please read more about CSS sprites.

Combination usage

All icon designs can be used in combination with plain module design like below examples:

Also icon styles can be used in combination with box module styles like shown below:

Click here to compare the free and PRO editions

Module positions

JSN Epic provides 21 module positions, allowing you to have multiple layout configuration. All module positions are collapsible, which means if you don’t publish any modules in some position it will not take any blank spaces, but leave them for neighbor modules.

Info: To show a module in some position you just need to setup module’s Position parameter to appropriate value as described below.

Click here to compare the free and PRO editions