Collapsible side menu on four levels

Useful for dashboards

by Ovi Stof

HTML

<button id="btnMnu" onclick="fcMnu_lat()" class="fa fa-bars" ></button>
<div id="mnuLat" style="display :none">
  <a href="#" class="btn_exit">Exit the app<i  style='float:right' class="fa fa-sign-out"></i></a>
  <ul>
    <li class="submenu"><a href="">Option 1</a>  
      <ul> 
        <li class="submenu"><a href="">Option 1.1</a>
          <ul>
            <li><a href="#">Option 1.1.1</a></li>  
            <li><a href="#">Option 1.1.2</a></li>    						
            <li class="submenu"><a href="">Option 1.1.3</a>
              <ul>
                <li><a href="#">Option 1.1.3.1</a></li>                   
                <li><a href="#">Option 1.1.3.2</a></li>
                <li><a href="#">Option 1.1.3.3</a></li>           
              </ul>
            </li>          
          </ul>
        </li>
        <li class="submenu"><a href="">Option 1.2</a>
          <ul>
            <li><a href="#">Option 1.2.1</a></li>  
            <li><a href="#">Option 1.2.2</a></li>  
            <li><a href="#">Option 1.2.3</a></li> 
          </ul>
        </li>				
      </ul>
    </li>	
    <li class="submenu"><a href="">Option 2</a>  
      <ul> 
        <li class="submenu"><a href="">Option 2.1</a>
          <ul>
            <li><a href="#">Option 2.1.1</a></li>    
            <li><a href="#">Option 2.1.2</a></li>    					  
          </ul>
        </li>
        <li class="submenu"><a href="">Option 2.2</a>
          <ul>
            <li><a href="#">Option 2.2.1</a></li>    
            <li><a href="#">Option 2.2.2</a></li>    						      
          </ul>
        </li>				
      </ul>
    </li>			
    <li class="submenu"><a href="">Option 3</a>
      <ul>
        <li><a href="#">Option 3.1</a></li>
        <li><a href="#">Option 3.2</a></li>
      </ul>
    </li>
    <li class="submenu"><a href="">Option 4</a>
      <ul>
        <li><a href="#">Option 4.1</a></li>  	
        <li><a href="#">Option 4.2</a> </li>
      </ul>
    </li>		
    <li><a href="#">Option...

CSS

@charset "UTF-8";
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
:root {
  --culMnu: RGB(15, 110, 160);
  --culSubMnu: RGB(50, 150, 250);
  --culPlana: RGB(30, 170, 240);
  --culMnuActiv: darkRed;
  --culTxt: White;
  --culTxtHover:white;
  --culFundal: White;
  --bordura:white;
  --marTxt:12px;
  --latMnu:max-content; /* 250px; */
  --latMnu2: max-content; /* 280px; */
  --latResp: 98%;
  --culRespNiv1:orange;
  --culRespNiv2:green;
  --culRespNiv3:maroon;
  --culRespNiv4:purple;  
}
@media only screen and (min-width: 600px) 
{
	#mnuLat {
		position:fixed;
		background: var(--culMnu);
		font-family: 'Arial Narrow', Tahoma, Arial, sans-serif;
		top:115px;
		left:0;
		width: var(--latMnu);
		z-index:9999;
		animation: aparitie .5s;
		animation-delay: .1s;
		animation-fill-mode: backwards;
		}
	@keyframes aparitie {
		from { opacity: 0; }
		to { opacity: 1; }
		}
	#mnuLat:before {
		content: '';
		display: block;
		}
	#mnuLat:after {
		content: '';
		display: table;
		clear: both;
		}
	#mnuLat a {
		display: block;
		padding: 15px 12px;
		color: var(--culTxt);
		text-decoration: none;
		}
	#mnuLat ul,
	#mnuLat ul li,
	#mnuLat ul ul {
		list-style: none;
		margin: 0;
		padding: 0;
		}
	#mnuLat  ul {
		position: relative;
		z-index: 597;
		float: left;
		width: var(--latMnu);
		}
	#mnuLat ul li {
		float: left;
		min-height: 1px;
		line-height: 1em;
		vertical-align: middle;
		position: relative;
		}
	#mnuLat ul li:hover {
		position: relative;
		z-index: 999;
		cursor: default;
		}
	#mnuLat ul ul {
		display:none; 
		position: absolute;
		top: 100%;
		left: 0px;
		z-index: 598;
		width: var(--latMnu2);
		}
	#mnuLat ul ul li {float: none;}
	#mnuLat ul ul ul {
		top: -2px;
		right: 0;
		}
	#mnuLat ul li:hover > ul {display:block;}
	#mnuLat ul ul {
		top: 1px;
		left: 99%;
		}
	#mnuLat ul li {float: none;border-bottom: 1px dashed var(--bordura);}
	#mnuLat ul ul {margin-top: 3px;}
	#mnuLat > ul > li.activ a {background:...

JavaScript

function fcMnu_lat() 
{
  var x = document.getElementById("mnuLat");
  if (x.style.display === "block") 
  {x.style.display = "none";} 
  else 
  {x.style.display = "block";}

  const buton = document.getElementById("btnMnu");
  if (buton.classList.contains('fa-bars')) 
  {
    buton.classList.remove('fa-bars');
    buton.classList.add('fa-times');
    buton.style.color = "#14306d";
    buton.style.borderColor  = "#14306d";
    buton.style.backgroundColor="#87CEEB";
  } else {
    buton.classList.remove('fa-times');
    buton.classList.add('fa-bars');
    buton.style.color = "#176f9f";
    buton.style.borderColor = "#176f9f";
    buton.style.backgroundColor="#B0E0E6";
  }
}