Hamburger menu: make the spaces between checkbox label "slices" clickable - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

Hamburger menu: make the spaces between checkbox label "slices" clickable

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor </title> 
  <style>
#hamburger-menu-icon {
   position:fixed;
   top:0;
   left:0;
   margin:0;
   padding:0;
}

#hamburger-menu-label {
   display:block;
   width:26px;
   height:26px;
   background:linear-gradient(to bottom, Chartreuse 0%, yellow 21%, blue 21%, pink 41%, OrangeRed 41%, grey 61%, BlueViolet 61%, Chartreuse 81%, yellow 81%, blue 100%);
   cursor:pointer;
}

#hamburger-menu-checkbox {
   display:none;
}

#hamburger-menu-panel {
   display:none;
   background:pink;
   position:fixed;
   top:32px;
   left:0;
   width:100%;
   margin:0;
}

#hamburger-menu-panel p {
   margin:0;
   padding:5px 7px;
   vertical-align:middle;<!--from   w w  w  .java2 s .c o m-->
   text-align:center;
   border-bottom:2px solid OrangeRed;
   cursor:pointer;
}

#hamburger-menu-panel p:hover {
   background-color:grey;
}

#hamburger-menu-checkbox:checked~#hamburger-menu-panel {
   display:block;
   animation:anim 0.3s ease-in-out;
   transform-origin:top;
}

@keyframes anim  {
   0% {
      display:none;
   }
   
   1% {
      display:block;
      transform:scaleY(0);
   }
   
   100% {
      transform:scaleY(2);
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div id="hamburger-menu-icon"> 
   <label id="hamburger-menu-label" for="hamburger-menu-checkbox"> </label> 
   <input id="hamburger-menu-checkbox" type="checkbox"> 
   <div id="hamburger-menu-panel"> 
    <p>Lorem </p> 
    <p>Lorem </p> 
    <p>Lorem </p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials