Slide menu



html

<script src='//cdn.muicss.com/mui-0.4.6/js/mui.js'></script>

<style>

#sidedrawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 300px;
  left: -300px;
  overflow: auto;
  z-index: 2;
  background-color: #fff;
  border:1px solid lightblue;
  top:27px;
  transition: transform 0.2s;
}

@media (min-width: 768px) {
  #sidedrawer {
    transform: translate(300px);
  }

  body.hide-sidedrawer #sidedrawer {
    transform: translate(0px);
  }
}

#sidedrawer ul {
  list-style: none;
}

#sidedrawer > ul {
  padding-left: 0px;
}

#sidedrawer > ul > li:first-child {
  padding-top: 15px;
}

#sidedrawer strong {
  display: block;
  padding: 15px 22px;
  cursor: pointer;
}

#sidedrawer strong:hover {
  background-color: #E0E0E0;
}

#sidedrawer strong + ul > li {
  padding: 6px 0px;
}

.closebtn{
  cursor: pointer;
}
</style>

<b  class="closebtn js-hide-sidedrawer"><font size=4>☰</font></b>  click the hamburger to to open the menu

<div id="sidedrawer" class="mui--no-user-select">
click the top right button to close the menu 
 <div style='float:right;cursor:hand;font-size:20px' class="closebtn js-hide-sidedrawer">☒</div>
<div class="mui-divider"></div> 
<ul>
  <li class="active">
    <strong>Options</strong> 
    <ul> 
      <li>This is a List Box filter </li>
      <li><SpotfireControl id="8e46dc29e17746e38b69ed088933e1fc" /></li>
    </ul>
  </li>
  <li>
    <strong>More Options</strong>
    <ul> 
      <li>This is a Check Box filter</li>
      <li><SpotfireControl id="a5d461b193084a338c6b4c4d0cfb0cea" /></li>
    </ul>
  </li>
</ul> 
</div>
</div>
</div>


js


var $bodyEl = $('body');
var $sidedrawerEl = $('#sidedrawer');
  
  
function showSidedrawer() {
  // show overlay
  var options = {
    onclose: function() {
      $sidedrawerEl
        .removeClass('active')
        .appendTo(document.body);
    }
  };
    
  var $overlayEl = $(mui.overlay('on', options));
    
  // show element
  $sidedrawerEl.appendTo($overlayEl);
  setTimeout(function() {
    $sidedrawerEl.addClass('active');
  }, 20);
}
  
  
function hideSidedrawer() {
  $bodyEl.toggleClass('hide-sidedrawer');
}
  
  
$('.js-show-sidedrawer').on('click', showSidedrawer);
$('.js-hide-sidedrawer').on('click', hideSidedrawer);
  
  
var $titleEls = $('strong', $sidedrawerEl);
  
$titleEls.next().hide();
  
$titleEls.on('click', function() {
  $(this).next().slideToggle(200);
});

$bodyEl.toggleClass('hide-sidedrawer');



No comments: