Category: Menu Styles

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

• See preview of all icons

Category: Design & Features

JSN Megazine was developed with extreme focus on typography and we believe it provides the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement. Let's take a look.

Headings

---

Text columns

You can arrange content in multiple columns by using very simple html code. JSN Megazine will detect the amount of columns you defined and automatically make arrangement.

Usage: <div class=”grid-layout”><div>Text in column 1</div><div>Text in column 2</div></div>

Content arranged in 2 columns

Content arranged in 3 columns

Content arranged in 4 columns

Content arranged in 5 columns

---

Text styles

Preformatted text (<pre> tag)

div.grid-layout2 div.grid-col {
 float: left;
 width: 49.95%;
}
div.grid-layout3 div.grid-col {
 float: left;
 width: 33.3%;
}

Quote text (<blockquote> tag)

You can us this style to quote somebody's speech, idea or a fragment from some book, articles, etc. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

Usage: <blockquote>This is your quote</blockquote>

Drop Cap

Highlighted Text

You can use this style to highlight important words and / or keyword expression in search result page. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

Usage: <span class="text-highlight">This is the text to be highlighted.</span>

Highlighted Text on mouse over

Alert Text

Info Text

Download Text

Tip Text

Comment Text

Attachment Text

Video Text

Audio Text

---

Link Styles

Link Icon Styles

You can attach up to 450 predefined icons to the front of any link by adding simple class to it.

Usage: <a class="link-icon jsn-icon-xxx">This is link text.</a>, where xxx is the name of icon to be applied. Detailed information about all icon names can be found in template documentation.

Example: <a class="link-icon jsn-icon-download">This is link to download something.</a>

Link Button Styles

JSN Megazine offers 06 button styles to decorate any call-to-action links you have in the content.

Usage: <a class="link-button button-xxx">This is link text.</a>, where xxx is the button color name selected from: light, dark, green, orange, blue and red.

Example: <a class="link-button button-orange">See plans & pricing.</a>

Combination of Button and Icon Styles

You can use both button and icon link style combined.

Usage: <a class="link-button button-xxx"><span class="link-icon jsn-icon-yyy">This is link text.</span></a>, where xxx and yyy are button color and icon names respectively.

Example: <a class="link-button button-green"><span class="link-icon jsn-icon-cart">Add to cart.</span></a>

Extension link styles

JSN Megazine is able to attach not only descriptive icon to the front of link as described in above section, but also 23 extension icons to the end of the link.

All icons can be assigned automatically by enabling a template parameter or manually by adding simple class to the link.

Usage: <a class="link-icon-ext jsn-icon-ext-xxx">This is link text.</a>, where xxx is the icon name. Detailed information about all icon names can be found in template documentation.

---

Table Styles

Plain Rows table style

Table header	Column header 1	Column header 2	Column header 3
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Table footer	Footer data

Color Stripes table style

Table header	Column header 1	Column header 2	Column header 3
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Table footer	Footer data

Grey Stripes table style

Table header	Column header 1	Column header 2	Column header 3
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Row header 1	Lorem ipsum	Dolor sit amet	Lorem ipsum
Table footer	Footer data

---

List styles

Standard list styles

Arrow list styles

Number list styles

Category: 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.

Category: Advanced Stuff

JSN Mobilize helps your website to achieve a better browsing experience by creating an elaborated mobile version for the site. This revolutionary extension guarantees to include a bunch of sophisticated features and enhancement while require minimum technical knowledge from users.

 

Multi-device Support

 

Not only smartphones are supported by JSN Mobilize, the recent innovation – tablets are also covered. Tablet usually has bigger screen and can receive more displaying area than phone. With JSN Mobilize you will have the separate layouts for phone and tablet which surely deliver the better device coverage for website’s mobile version.

 

---

 

Multi-OS Support

 

JSN Mobilize delivers the future-ready and mobile-friendly experience to your Joomla website by initiatively supporting multiple operation systems. In short explanation, your website should work and be viewed effortlessly on every screen solution horizontally and vertically. Your website will look awesome automatically on these operation systems (OS) below:

• iOS (6.x and below, 7.x)
• Android (2.2 - 2.3, 4.x)
• Windows Mobile (6.x and below, 7.x, 8.x)
• BlackBerry (5.x and below, 6x - 7x, 10x)
• Others...

 

---

 

Load Speed Enhancement

 

Get the most out of JSN Mobilize with the Advanced Image Optimization based on two options including “For the best performance” or “For the best image quality”. Additionally, the CSS/JS minify mechanism allows to compress all files into one single package. By that way, your site load will quickly enough in a limited-bandwidth environment at least 170%. Below is the speed test by akamai.