JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<ul class="mymenu">
  <li>Bookings
    <ul>
      <li>Consultation Hours</li>
      <li>Evening Opening</li>
      <li>Early Mornings</li>
      <li>Weekend Opening</li>
      <li>Online Appt Booking</li>
      <li>Booking Timescale</li>
      <li>Advance Booking</li>
      <li>Sit & Wait</li>
      <li>Text Reminders</li>
    </ul>
  </li>
  <li>Contact</li>
  <li>Arrival & Waiting
    <ul>
      <li>Something</li>
      <li>Something Else</li>
    </ul>
  </li>
  <li>Clinical Services</li>
  <li>Follow-up & Support</li>
</ul>

SCSS

ul.mymenu {
  $m-items: 5;
  $m-height: 75px;
 
  display: block;
  position: relative;
  overflow: hidden;
  list-style-type: none;
  width: 100%;
  height: $m-height;
  margin: 0;
  padding: 0;
  
  > li {
    display: none;
    position: absolute;
    left: 0;
    background-color: rgb(199, 238, 157);
    margin: 0;
    padding: 5px 0;
    height: 100%;
    text-align: center;
    
    &:nth-child(even){
      background-color: rgb(244, 149, 199);
    }
  }
  
  // Sub-menu
  ul {
    display: none; // hidden by default
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    overflow: hidden;
    font-size: 0.8em;  // 80% of the parent font size
    list-style-type: none;
    height: $m-height / 2;
    margin: 0;
    padding: 0;
    
    > li {
      display: block;
      position: absolute;
      margin: 0;
      padding: 0;
      height: 100%;
      text-align: center;
    }
  }
  
}

JavaScript

(function(){
	// some initialization variables
	var $menu = $('.mymenu'),	// the menu
  		$lis = $menu.find('> li'),	// the 1st level items
  		width = $menu.width(),	// the menu width
      l1_items_count = $lis.length,	// the number of 1st level items
      l1_items_width = width / l1_items_count;	// the width of the 1st level items
  
  // initialize the menu
  $lis
  	// put the 1st level items in their place
  	.each(function(idx, item){
    	$(item)
      	.css('left', (l1_items_width * idx) + 'px')
        .attr('position', idx+1);
    })
    // give the 1st level items their correct width
  	.width(l1_items_width + 'px')
    // show the 1st level items after all the calculations are done
    .show();
      
  var showSubMenus = function($menu){
  	var subMenu = $menu.find('> ul'),
    		subItems = subMenu.find('> li'),
        subItemsCount = subItems.length,
        subItemsWidth = subMenu.width() / subItemsCount;
    
    subItems
      .each(function(idx, item){
        $(item).css('left', (subItemsWidth * idx) + 'px');
      })
    	.width(subItemsWidth);
    subMenu.slideToggle();
  };
  
  var hideSubMenus = function($menu){
  	var subMenu = $menu.find('> ul');
        
    subMenu.slideToggle();
  };
      
  // handle the 1st level items click even
	$lis.on('click', function(){
  	var $this = $(this),
    		isExpanded = $this.attr('expanded'),
    		position = $this.attr('position') * 1;
        
    if(isExpanded){
    	$this
      	.animate({width: l1_items_width})
        .removeAttr('expanded');
        
      hideSubMenus($this);
    } else {
    	$lis.css('z-index', 0);
    	$this
      	.animate({ width: l1_items_width * (l1_items_count - position + 1)}, function(){
        	showSubMenus($this);
        })
        .attr('expanded', 'expanded')
        .css('z-index', 2);
        
      
    }
    
  })
})();