Simple jQuery cxMenu accordion navigation, jquerycxmenu

Simple jQuery cxMenu accordion navigation, jquerycxmenu

• Version:
• JQuery v1.7 +
• JQuery cxMenu v1.2
• Note:
• The system automatically determines whether sub-navigation exists. If yes, the link is not triggered. If no sub-navigation exists, the link is triggered.

Instance Preview

How to load JavaScript files

<script src="jquery.js"></script> <script src="jquery.cxmenu.js"></script> 

　　

CSS style structure

You can set other styles unless necessary.

/* Slide Navigation */. menu {}. menu> li {}. menu> li. selected {}/* selected style in the first-level Navigation */. menu ul {display: none;}/* Hide sub-Navigation */. menu ul> li {}. menu ul> li. selected {}/* style selected in subnavigation */

　　

DOM Structure

<Ul id = "element_id"> <li> Level 1 title <ul> <li> Level 2 Title <ul> <li>... <ul> <li> N-level title </li>

　　

Call cxMenu

$('#element_id').cxMenu();

　　

Parameter description

Name	Default Value	Description
Events	'Click'	Trigger button events
SelectedClass	'Selected'	Class added when expansion
Speed	600	Switching speed (MS)
Only	True	Expand only one navigation

 

Download