MUI Dropdown

by Petr Haluza

HTML

<div class="mui-drop-menu"> 
  <div class="mui-toggler">Styl výpisu</div> 
  <ul class="mui-drop-content" role="menu"> 
    <li role="heading">Zvolte styl zobrazení</li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li>
  </ul>
</div><!-- / mui-drop-menu -->

<div class="mui-drop-menu"> 
  <div class="mui-toggler">Řazení</div> 
  <ul class="mui-drop-content" role="menu"> 
    <li role="heading">Zvolte styl zobrazení</li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li>
  </ul>
</div><!-- / mui-drop-menu -->

CSS

.mui-drop-menu { position: relative; display: inline-block;}
.mui-drop-menu .mui-toggler { cursor: pointer; user-select: none}
.mui-drop-content { display: none; position: absolute; left: 0; top: 100%; min-width: 180px; z-index: 1000; list-style: none; padding: 0}
.mui-drop-content li[role="heading"] { user-select: none}

JavaScript

// MUI Dropdown 
$('.mui-drop-content').hide(); // default

$('.mui-toggler').on('click', function(e) {
  e.stopPropagation(); // Prevent event from bubbling up (important for outside click handler)
  var $menu = $(this).closest('.mui-drop-menu');
  var $dropContent = $menu.find('.mui-drop-content');
  $('.mui-drop-content').not($dropContent).slideUp(60);// Close other open dropdowns if needed
  // Toggle this dropdown
  $dropContent.stop(true,true).slideToggle(100, function() {
      // If shown, set CSS for absolute positioning
      if ($dropContent.is(':visible')) {
          $dropContent.css({
              top: $menu.find('.mui-toggler').outerHeight()
          });
      }
  });
});

$('.mui-drop-content').on('click', function(e) { // Prevent clicks inside dropdown from closing it
  e.stopPropagation();
});

$(document).on('click', function() { // Closing the dropdown bz clicking outside
  $('.mui-drop-content').slideUp(60);
});
// /end of MUI Dropdown