Learn to code - how to create a side bar menu with icons.







Try yourself >>







Part 1


Instructions



tip: You should add the Fontawesome library as script in order to use the fonts, you can see live example in our Code editor, just click the "Try yourself" button.


Try yourself >>


Add HTML:



Code Example:

      
      
      
       
        
        
        <div class="sidenav">
          <a href="#home"><i class="fas fa-igloo"></i></i> Home</a>
          <a href="#services"><i class="fas fa-file-signature"></i> Contact</a>
          <a href="#clients"><i class="fas fa-tasks"></i> Project</a>
          <a href="#contact"><i class="far fa-address-card"></i> About</a>
          <a href="#contact"><i class="fas fa-map-signs"></i> Sitemap</a>
          <a href="#contact"><i class="fas fa-search"></i> Serach</a>
        </div>
        
        <div class="sidemain">
          
          <h2>Side bar with icons</h2>
          <p>HTML meaning is Hyper Text Markup Language 
HTML is the conventional language for creating Web pages. 
HTML is series of elements 
with HTML you tell the browser how to display the content .</p>
          
        </div>
             
       
      
      
    
      
  


Part 2


Add CSS:



Code Example:

      
      
      
       <style>
          .sidenav {
            width: 165px;
            position: fixed;
            height: 100%;
            z-index: 1;
            top: 0;
            left: 0;
            overflow-x: hidden;
            background-color: #282828;
            padding-top: 16px;
          }
          
          .sidenav a {
            padding: 16px 8px 6px 16px;
            text-decoration: none;
            font-size: 22px;
            color: #9A9A9A;
            display: block;
          }
          
          .sidenav a:hover {
            color: #f2f2f2;
          }
          
          .sidemain {
            margin-left: 160px; /* Should be the same as the width of the sidenav */
            padding: 0px 10px;
            font-size:22px;
          }
          
          
          /*responsiveness */
          @media screen and (max-height: 450px) {
            .sidenav {padding-top: 14px;}
            .sidenav a {font-size: 16px;}
          }
          
        </style>   
      
      
    
      
  

tip: For full live example click the button below:


Try yourself >>



don't wait! learn to code for free ,we provide free classes online, our main goal is to allow students Programming courses and other online coding courses in one place, learn free.

Navigation