mk.Slidemenu

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

Demo

• item A
  • sub item A1
  • sub item A2
• item C
  • sub item C1
  • deep sub item C2
    • sub sub item C2.1
    • sub sub item C2.2
• item E
  • sub item E1
  • sub item E2

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

• className {string} user deifined CSS class for slidemenu. Default is empty string
• triggerClass {string} CSS class of trigger element. Default is 'mk-slidemenu-trigger'
• backButtonContent {html string} Default is '‹ Back'
• backButtonClass {string} Default is 'mk-slidemenu-back'
• width {css string} any legitimate width, for example: '100px', or '50%', default is null, that means 100% of container width
• height {css string} any legitimate height, for example: '100px', or '50%', default is null, that means height fitting current menu content

Styling

new mk.Slidemenu(ul,{className:'my-style'});

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

new mk.Slidemenu( listElement, {className:'mk-labels'} );

List formatting

• item A
  First anchor <A> element inside <LI> container is used as a trigger to switch into the submenu
  • sub item A1
  • sub item A2
• item B
  Use <DIV> wrapper inside <LI> container if you don't have submenu, and don't need a trigger in current item
• item C
  • previous 'C' item has no <A> element, it was created automatically to wrap pure text inside <LI> container
  • deep sub item C2
    • sub sub item C2.1
      Some additional text here
    • sub sub item C2.2
      Some additional text with additional link
    • sub sub item C2.3
  • sub item C3
• item D
• item E
  Here is one more <DIV> element in addition with <A> submenu trigger, so 'over' styles and some paddings does not applied to it
  • sub item E1
  • sub item E2
  • sub item E3
  • sub item E4
• item F
  this item is wrapped by <A> element, but have no submenu, so it do nothing, but have 'over' styles

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>