Sticky left menu bar with transparent background - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

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

Description

Sticky left menu bar with transparent background

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.menurow {<!--from   w ww .j a  va  2  s. co m-->
   display:table-row;
   vertical-align:top;
   box-sizing:border-box;
}

.menucell {
   display:table-cell;
   padding:0;
   vertical-align:top;
}

.menu {
   position:fixed;
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
   width:301px;
   padding:6px;
   height:calc(100vh - 21px);
   background-color:Chartreuse;
}

.menuSubheader {
   height:31px;
   padding:9px 6px 9px 16px;
   font-size:19px;
   line-height:31px;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
   cursor:pointer;
   position:relative;
   background-color:yellow;
}

.itemList {
   width:301px;
   height:auto;
   z-index:81;
   background-color:blue;
}

.item {
   height:36px;
   padding:6px 6px 6px 16px;
   background-color:pink;
}

.buffer {
   width:301px;
   height:100%;
   margin-top:11px;
   overflow:hidden;
   text-align:center;
   display:table-cell;
   align-content:center;
   vertical-align:middle;
   color:OrangeRed;
   background-color:grey;
   border:3px dashed BlueViolet;
}
</style> 
 </head> 
 <body> 
  <div class="menu"> 
   <div class="menurow"> 
    <div class="menucell"> 
     <div class="menuSubheader"> 
      <span>Lorem i</span> 
     </div> 
     <div class="itemList"> 
      <div class="item"> 
       <span>Lore</span> 
      </div> 
      <div class="item"> 
       <span>Lore</span> 
      </div> 
      <div class="item"> 
       <span>Lore</span> 
      </div> 
     </div> 
     <div class="menuSubheader"> 
      <span>Lorem i</span> 
     </div> 
     <div class="itemList"> 
      <div class="item"> 
       <span>Lore</span> 
      </div> 
      <div class="item"> 
       <span>Lore</span> 
      </div> 
     </div> 
     <div class="menuSubheader" data-visible="false"> 
      <span>Lorem i</span> 
     </div> 
     <div class="itemList"> 
      <div class="item"> 
       <span>Lore</span> 
      </div> 
      <div class="item"> 
       <span>Lore</span> 
      </div> 
      <div class="item"> 
       <span>Lore</span> 
      </div> 
     </div> 
    </div> 
   </div> 
   <div class="buffer"> 
    <span>Lorem ipsum dolor sit ame</span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials