Converts nested lists to sliding menu. Library agnostic UI widget. CSS animated, minimum of styles and constraints.
Include script and style sheet into you page:
<script src="path/to/plugin/mk-slidemenu.min.js"></script> <link href="path/to/plugin/mk-slidemenu.min.css" rel="stylesheet">
new mk.Slidemenu( listElement[, options] );
listElement - is a DOM Element of a list (UL tag)
Use custom CSS class to style slidemenu on your own. Use context styles in CSS file.
new mk.Slidemenu(ul,{className:'my-style'});
.my-style definition:
/* whole menu */ .mk-slidemenu.my-style { background-color: #ccccff; font-size: 12pt; line-height: 14pt; } /* item */ .mk-slidemenu.my-style li { border-bottom: 1px solid #ffffff; } /* trigger */ .mk-slidemenu.my-style li > a:hover { background-color: #dbdbff; } /* item content - trigger and text */ .mk-slidemenu.my-style li > a, .mk-slidemenu.my-style li > div { padding: 7px 10px; } /* trigger children marker */ .mk-slidemenu.my-style .mk-has-submenu > a:before { content: '›'; float: right; font-size: 22pt; line-height: 14pt; font-weight: bold; color: #a5a5ce; }
You can use alternative markers for items, containing submenu. It is a small triangles at right bottom corner instead of '›' sign. It is much more suitable for toolbars.
new mk.Slidemenu( listElement, {className:'mk-labels'} );
<ul id='slidetree2El'> <li> <a> item A <div><small>First anchor <A> element inside <LI> container is used as a trigger to switch into the submenu</small></div> </a> <ul> <li><a>sub item A1</a></li> <li><a>sub item A2</a></li> </ul> </li> <li> <div> item B<br /> <small>Use <DIV> wrapper inside <LI> container if you don't have submenu, and don't need a trigger in current item</small> </div> </li> <li>item C <ul> <li><div><small>previous 'C' item has no <A> element, it was created automatically to wrap pure text inside <LI> container</small></div></li> <li><a>deep sub item C2</a> <ul> <li><a>sub sub item C2.1</a><div>Some additional text here</div></li> <li><a>sub sub item C2.2</a><div>Some additional text with <a href="#">additional link</a></div></li> <li><a>sub sub item C2.3</a></li> </ul> </li> <li><a>sub item C3</a></li> </ul> </li> <li><div>item D</div></li> <li><a>item E</a> <div><small>Here is one more <DIV> element in addition with <A> submenu trigger, so 'over' styles and some paddings does not applied to it</small></div> <ul> <li><a>sub item E1</a></li> <li><a>sub item E2</a></li> <li><a>sub item E3</a></li> <li><a>sub item E4</a></li> </ul> </li> <li><a>item F <div><small>this item is wrapped by <A> element, but have no submenu, so it do nothing, but have 'over' styles</small></div></a></li> </ul>