Create Slide Navigation Bar using Html and Css

February 03, 2021 June 01, 2021
copied button
         
        <!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="" content="">

    <title>Side nav bar</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" integrity="sha512-BnbUDfEUfV0Slx6TunuB042k9tuKe3xrD6q4mg5Ed72LTgzDIcLPxg6yI2gcMFRyomt+yJJxE+zJwNmxki6/RA==" crossorigin="anonymous" />

    <style>

     *{

  margin: 0px;

  ppadding: 0px;

  box-sizing: border-box;

}

body{

  background-color: black;

}



.container{

  position: absolute;

  height: 100vh;

  background-color: #4a94a7;

  margin-left: -16%;

  transition: 0.8s;

  border-bottom-right-radius:  10px;

}



.box{

  position: relative;

  margin-top: 0.9rem;

  padding: 0.4rem;

  font-size: 15px;

  width: 10rem;

  text-align: center;

}



i{

  cursor: pointer;

  font-size: 1.3rem;

}



.ga{

  padding: 1rem;

  height: 1rem;

  float: left;

}



a{

  text-decoration: none;

  outline: none;

  color: white;

  transition: 0.8s;

}



.box:hover{

  font-size: 1.5rem;

  

}



.border{

  background-color: red;

}



.ra{

  right: 2px;

  float: right;

}



.container:hover{

  margin-left: 0px;

}



.box i{

  float:left;

  

}



.icon i {

  transition: 0.8s;

  

}

.icon{

  top: 100vh;

}



.icon i:hover{

  font-size: 2rem;

}



@media only screen and (max-width: 768px) {

  .container{

    margin-left: -35%;

  }

}



     </style>

  </head>

  <body>

    <div class="container">

          

            <i class="fas fa-ellipsis-v ra"></i>

         

          

          

          <div class="box">

          <i class="fas fa-home"></i>

          <a href="#">Home</a>

        </div>

        

        <div class="box">

          <i class="fas fa-code"></i>

          <a href="#">Source code</a>

        </div>

        

        <div class="box">

          <i class="fab fa-servicestack"></i>

          <a href="#">Services</a>

        </div>

        

        <div class="box">

          <i class="fas fa-address-card"></i>

         <a href="#">About us</a>

        </div>

        

        <div class="box">

          <i class="fas fa-address-book"></i>

          <a href="#">Contact us</a>

        </div>

        

        <div class="icon">

          <i class="fab ga fa-facebook-f"></i>

          <i class="fab ga fa-instagram"></i>

          <i class="fab ga fa-twitter"></i>



        </div>

    </div>

  </body>

</html>
Daily Tech

Create Slide Navigation Bar using Html and Css

Post a Comment
