CSS responsive nav list burger style in mobile view - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

CSS responsive nav list burger style in mobile view

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">
body {<!--from w w  w. j ava2  s . co  m-->
   margin:0;
}

ul {
   list-style-type:none;
   margin:0;
   padding:0;
   width:26%;
   background-color:Chartreuse;
   position:fixed;
   height:100%;
   overflow:auto;
}

li a {
   display:block;
   color:yellow;
   padding:9px 17px;
   text-decoration:none;
}

li a.active {
   background-color:blue;
   color:pink;
}

li a:hover:not(.active) {
   background-color:OrangeRed;
   color:grey;
}

img {
   width:51%;
   height:auto;
}

.container {
   margin-left:26%;
   padding:2px 17px;
   height:1001px;
}

@media screen and (max-width: 480px)  {
   body {
      background-color:BlueViolet;
   }
   
   ul {
      position:relative;
      width:100%;
   }

}
</style> 
 </head> 
 <body> 
  <ul> 
   <li> <img src="https://www.java2s.com/style/demo/Opera.png" alt="htmll logo" align="middle"> </li> 
   <li> <a class="active" href="#home">Lorem </a> </li> 
   <li> <a href="#news">Lorem </a> </li> 
   <li> <a href="#contact">Lorem </a> </li> 
   <li> <a href="#about">Lorem </a> </li> 
  </ul> 
  <div class="container"> 
   <h1>Lorem ip</h1> 
  </div>  
 </body>
</html>

Related Tutorials