mk.Slidemenu

Converts nested lists to sliding menu. Library agnostic UI widget. CSS animated, minimum of styles and constraints.

Download from GIT Hub Download as NPM package

Demo

Inclusion

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">

Usage

new mk.Slidemenu( listElement[, options] );

listElement - is a DOM Element of a list (UL tag)

Options

Styling

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;
}

Labels

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'} );

List formatting

HTML code of list

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