liShopen

Responsive Multi Level Vertical Menu

DEMOS

Default
Parametrs

Disable
of Scrolling

Disable
of Top snapping

Toggle
of Visibility

Design Management

Style
Editor

Features

Cross-browser

The plugin supports all popular browsers, such as: Opera, Mozilla Firefox, Google Chrome, Internet Explorer, Safari

RESPONSIVE

Menu can be used in Responsive Web Sites for viewing on tablets and smartphones.

MOVE THE CURSOR DIAGONALLY

You can move the cursor diagonally towards the subcategories.

At the same time an open list of subcategories will not switch or close.

DELAY RESPONSE

If you quickly move the cursor, the menu will not respond.

The desired category appears only when you hold the cursor on it.

CLICK TO OPEN

To open / close the category, you can click on the arrow-button.

This feature is very useful on touch devices.

SCROLLING OF CATEGORIES

The height of the block with subcategories is limited for convenience. If the items of menu is very much, in the block will be scrolling.

You can control the scrolling using the mouse wheel, using the buttons at the top and bottom part block, as well as using scroll slider.

MULTILEVEL

Menu can have an unlimited number of nesting.

CHANGE STYLE

If you wish, you can use ready-made themes and color schemes menus.

To do this, we created a constructor of styles.

Controll of Height

If the height of the sub-categories more than specified in the parameter, the sub-categories are aligned with the upper edge of the menu

DOCUMENTATION

Include Files Plugins Initialization HTML CODE Table of Options Table of Methods

Include files <head> ...[THIS CODE]... </head>

To work the plugin the necessary files you must place the files listed below on your server

After this you need to connect these files inside the tag "head" of your site

Typically, style files placed in the folder "css", and script files - in a folder "js", but your folder structure may be another.

If you have an another directory structure, make sure you set the correct path to the files.

 
<!--If you have already use jquery, then this line is not necessary--> 
<script src="js/jquery-1.11.1.min.js"></script> 

<!-- Plugins files-->
<link rel="stylesheet" href="css/liShopen.css">
<link rel="stylesheet" href="css/liShopen-theme-1.css">
<script src="js/jquery.liShopen.js"></script>

Plugins Initialization <head> ...[THIS CODE]... </head>

Once you have written the connection of necessary files, plugin needs to be initialized.

For this purpose, in tag "head" need to add this code below the code of connection.

 
<script>
	$(function(){
		$('.menuShopen').liShopen();
	})
</script>

HTML <body> ...[THIS CODE]... </body>

For create the code of the menu, you can simply take the most standard and the most spread multi-level menu structure.

For its main parent element you need set the class, wich you assigned in initialization, to plugin to know which menu needed to convert.


<ul class="menuShopen">
	<li><a href="#">Clicable link 1</a></li>
	<li><a href="#">Clicable link 2</a>
		<ul>
			<li><a href="#">Clicable link 2.1</a></li>
			<li><a href="#">Clicable link 2.2</a></li>
			<li><a href="#">Clicable link 2.3</a>
				<ul>
					<li><a href="#">Clicable link 2.3.1</a></li>
					<li><a href="#">Clicable link 2.3.2</a></li>
					<li><a href="#">Clicable link 2.3.3</a></li>
					<li><a href="#">Clicable link 2.3.4</a></li>
				</ul>
			</li>
			<li><a href="#">Clicable link 2.4</a></li>
		</ul>
	</li>
	<li><a href="#">Clicable link 3</a></li>
	<li><a href="#">Clicable link 4</a></li>
</ul>

Options

Option	Default value	Datatype	Description
subItemsMax	7	Number	If the Number of items sub categories more than the set value, the unit with sub items will be pressed against the upper edge of the menu, otherwise it will be on par with the parent. If you do not need adherence to the upper side, set this value to 999 It may take the values: any positive number
delay	300	Number	If you quickly move the cursor, the menu will not respond. The desired category appears only when you hold the cursor on it. It may take the values: any positive number, ms
outTimeout	600	Number	The time delay before closing the menu when cursor out. It may take the values: any positive number, ms
responsive	true	bolean	This option allows to adapt the menu for mobile devices It may take the values: true or false
maxHeight	auto	string / number	This parameter sets the maximum height of the blocks with items. If too many items then scrolling appears. If you do not need scrolling, set the value of this parameter in 9999 It may take the values: 'auto' or any positive number

Methods

destroy()

Removes all the functionality of menu. It returns the item in the condition before the initialization of the plug-in

$('.your_class').liShopen('destroy');