Dialog Start tour

eMainMenu

This menu has a couple of options, every main link has its own icon(choose form our custom made icon set), you can add indicators (colored, text and 10px icons) to it and you can choose between a dynamic submenu or a static submenu(see: documentation). The main menu is responsive, this means that it will adjust to fit the right screen resolution. The main menu has also the option to be scaled down into a smaller menu by using the "toggle main menu" button at the top op the page.

Main menu

The main menu on the left of this theme.

How to use

How to use HTML elements.

Markup
<nav id="main-menu">
    <li><a href="javascript:void(0);"><span class="home-16 plix-16"></span> Menu name<span class="button-icon"><span class="plus-10 plix-10"></span></span></a>
        <ul>
            <li><a href="javascript:void(0);">Sub menu</a></li>
            <li><a href="javascript:void(0);">Sub menu</a></li>
            <li><a href="javascript:void(0);">Sub menu</a></li>
            <li><a href="javascript:void(0);">Sub menu</a></li>                                       
        </ul>
    </li>
</nav>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
home-16 span Icon class, you can find a overview of all of the icons here. 1.0
menu-open li Set the menu on load open. This is used for active sub menus. 1.0
page-active li Page active class. 1.0
pixel-icon-button span The open or close buttons. You can change between a couple of buttons. 1.0
plus-10 span Pixel button used for open button. See the icon page for more buttons. You can only use the pixel buttons! 1.0
color-indicator span Used for a indicator as seen in the menu on the left(red circle). 1.0
indicator span Used for a indicator as seen in the menu on the left(the words new and beta). 1.0
plix-10, plix-16 span Custom icon size class. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#main-menu').eMainMenu({
    activeClass: 'sub-page-active',
    closeClass: 'min-10',
    openClass: 'plus-10',
    speed: 400,
    onToggle: function(){ }		
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
activeClass string sub-page-active This is the active indicator class. 1.0
closeClass string min-10 This is the icon class used for the close icon. You can choose from the custom made icons here. Notice that it must be 10px icons. 1.0
openClass string plus-10 This is the icon class used for the open icon. You can choose from the custom made icons here. Notice that it must be 10px icons. 1.0
speed number(integer) 200 The speed of the effect. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eMenu

jQuery dropdown menu, with options to float the submenu inside or outside. You can use our custom made icon set in this menu(10px only).

Basic

jQuery dropdown menu, with options and icons(10px only).

How to use

How to use HTML elements.

Markup
<ul class="e-menu">
    <li><a href="javascript:void(0);">With sub icons<span class="arrow-down-10 plix-10"></span></a>
         <div>
            <ul>
                <li><a href="javascript:void(0);"><span class="home-10 plix-10"></span> Sub link</a></li>
                <li><a href="javascript:void(0);"><span class="folder-10 plix-10"></span> Sub link</a></li>
                <li><a href="javascript:void(0);"><span class="tags-10 plix-10"></span> Sub link</a></li>
                <li><a href="javascript:void(0);"><span class="mail-10 plix-10"></span> Sub link</a></li>
            </ul>                                      
        </div>                               
    </li>    
</ul>

With profile tab

You can us a thumbnail as a sort of profile menu.

How to use

How to use HTML elements.

Markup
<li class="e-menu-profile">
    <a href="javascript:void(0);">
        <span class="arrow-down-10 plix-10"></span>
        <img src="images/avatar.jpg" alt=""/>
    </a> 
    <div>
        <ul>
            <li><a href="index.html">Inbox</a></li>
            <li><a href="index.html">Settings</a></li>
            <li><a href="index.html">Logout</a></li>
        </ul>                                      
    </div>   
</li>

Split version

jQuery dropdown menu, with options and icons(10px only).

How to use

How to use HTML elements.

Markup
<ul class="e-splitmenu" >
    <li><span>With sub icons</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
         <div>
            <ul>
                <li><a href="javascript:void(0);"><span class="home-10 plix-10"></span> Sub link</a></li>
                <li><a href="javascript:void(0);"><span class="folder-10 plix-10"></span> Sub link</a></li>
                <li><a href="javascript:void(0);"><span class="tags-10 plix-10"></span> Sub link</a></li>
                <li><a href="javascript:void(0);"><span class="mail-10 plix-10"></span> Sub link</a></li>
            </ul>                                      
        </div>                               
    </li>    
</ul>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
e-menu ul Main class for the basic menu. 1.0
e-splitmenu ul Main class for the split version menu. 1.0
e-menu-profile li Extra class for the profile menu. 1.0
arrow-down-10, home-10, tags-10, folder-10, mail-10 span Pixel icons. More icons can be found here. 1.0
plix-10 span Custom icon size class. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
jQuery('.e-menu').eMenu({
    effect: 'slide',
    speed: 200,
    typeEvent: 'click',
    activeClass: 'e-menu-active',
    flip: [ ]                                            
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
effect slide | fade slide Animation effect. 1.0
speed Number(integer) 200 The speed of the animation. 1.0
typeEvent click | hover click Show menu with... 1.0
activeClass string e-menu-active The class of the active menu. 1.0
flip number(array) Reverse a menu(example: the last menu or the profile part), wrap the values in [ ] en seperate the numbers with a comma. Use index based values. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

CSS menu

Pure CSS dropdown menu with no jQuery plugins.

CSS menu

Simple CSS menu with dropdown.

How to use

How to use HTML elements.

Markup
<ul class="css-menu">
    <li>
        <ul>
            <li>
                <a href="javascript:void(0);"><span class="bookmark-10 plix-10"></span> Bookmarks</a>
            </li> 
            <li>
                <a href="javascript:void(0);"><span class="comment-10 plix-10"></span> Comments</a>
            </li>
            <li>
                <a href="javascript:void(0);"><span class="tags-10 plix-10"></span> Tags</a>
            </li>                                                                                                                      
        </ul>
        <a href="javascript:void(0);"><span class="home-10 plix-10"></span> Dashboard</a>      
    </li> 
</ul>

Third-party plugins

Third-party plugins are not documented here because they have there own documentation.

Context Menu

A jQuery context (right click) menu.

This is a third party plugin, for information about how to use this plugin and examples please visit this site.