---
title: events
---
<link href="css/mm-vertical.css" rel="stylesheet" type="text/css"/>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="sidebar-nav">
        {{> menu }}
      </nav>
    </div>
    <div class="col-md-9">
      <h3>Events
            <small>thanks <a href="https://github.com/needim/">needim</a>
              <a href="https://github.com/needim/noty/" target="_blank">noty</a>
            </small>
          </h3>
      <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right">
                <span class="fa fa-code"></span>
          </span>
        </div>
        <div class="panel-body">
          <pre><code class="language-javascript">
$(function() {

  $('#menu').metisMenu()
  .on('show.metisMenu', function(event) {

      // do something…

  }).on('shown.metisMenu', function(event) {

    // do something…

  }).on('hide.metisMenu', function(event) {

    // do something…

  }).on('hidden.metisMenu', function(event) {

    // do something…

  });
});
              </code></pre>

        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {

      $('#menu').metisMenu().on('show.metisMenu', function (event) {
          noty({
              text: function () {
                  return $(event.target).parent('li').children('a').html() + 'opening ...';
              },
              layout: 'topRight',
              type: 'information',
              theme: 'relax',

              timeout: 1000
          });
      }).on('shown.metisMenu', function (event) {
          noty({
              text: function () {
                  return $(event.target).parent('li').children('a').html() + 'opened';
              },
              layout: 'topRight',
              type: 'success',
              theme: 'relax',
              timeout: 3000
          });
      }).on('hide.metisMenu', function (event) {
          noty({
              text: function () {
                  return $(event.target).parent('li').children('a').html() + 'collapsing ...';
              },
              layout: 'topRight',
              type: 'warning',
              theme: 'relax',
              timeout: 1000
          });
      }).on('hidden.metisMenu', function (event) {
          noty({
              text: function () {
                  return $(event.target).parent('li').children('a').html() + 'collapsed';
              },
              layout: 'topRight',
              type: 'error',
              theme: 'relax',
              timeout: 3000
          });
      });

  });
</script>
