Home CSS Animation Sidebar Menu Using Html and CSS Animated Menu Sidebar

Sidebar Menu Using Html and CSS Animated Menu Sidebar

603
0

In this video, you’ll learn how to create Animated Sidebar Menu Using Html and CSS.

The sidebar is regularly used to show a few sorts of extra data for clients, for example, menu navigational connects to key pages.

Below is the video tutorials. watch and practices

Here are The sources code Html and CSS

Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sidebar menu Html Css</title>
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>

  <body>
    <input type="checkbox" id="check" />
    <label for="check"  class="checkbtn">
      <i class="fas fa-times" id="closebtn"></i>
      <i class="fas fa-bars" id="openbtn"></i>

    </label>

    <div class="sidebar">
      <div class="logo">
        <h1>J</h1>
      </div>
      <ul class="nav">
        <li class="link-nav">
          <a href="#">
            <i class="fas fa-home"></i>
            <span>Home</span>
          </a>
        </li>
        <li class="link-nav">
          <a href="#">
            <i class="fas fa-user"></i>
            <span>About Me</span>
          </a>
        </li>
        <li class="link-nav">
          <a href="#">
            <i class="fas fa-concierge-bell"></i>
            <span>Services</span>
          </a>
        </li>
        <li class="link-nav">
          <a href="#">
            <i class="fas fa-briefcase-medical"></i>
            <span>Portfolio</span>
          </a>
        </li>
        <li class="link-nav">
          <a href="#">
            <i class="fas fa-blog"></i>
            <span>Blog</span>
          </a>
        </li>
        <li class="link-nav">
          <a href="#">
            <i class="fas fa-envelope"></i>
            <span>Contact</span>
          </a>
        </li>

      </ul>

    </div>
<!-- Conten Area  -->
    <div class="content">
      <h2>Animated Sidenav Html And CSS</h2>
    </div>
   

  </body>
</html>

CSS

/* #202040 
#ffbd69;*/

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body{
  box-sizing: border-box;
  font-family: monospace;
}

.logo{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color:  #202040  ;
  color: #ffffff;
  margin-bottom: 10px;
  margin: 0 auto;
}

.logo h1{
  font-size: 80px;
}

.sidebar{
  background-color:#ffbd69 ;
  left: -250px;
  width: 250px;
  height: 100vh;
  text-align: center;
  padding-top: 30px;
  position: fixed;
  transition:  all .5s ease;
}

.sidebar a{
  display: block;
  padding: 20px 0;
  color: #202040;
  font-size: 15px;
  margin-top: 10px;
}

.sidebar a:hover{
  color: #ffffff;
  background-color: #202040;
  font-weight: bold;
  border-right: 2px solid #ffffff;
}

.sidebar .fas{
  display: block;
}

.link-nav{
  border-bottom:  1px solid rgba(9, 10, 12, 0.06);
}

#check{
  display: none;
}

label #openbtn, label #closebtn{
  position: absolute;
  cursor: pointer;
}

label #openbtn{
  top: 20px;
  left: 70px;
  font-size: 40px;
  background-color: #ffbd69;
  padding: 10px;
}

label #closebtn{
z-index: 1111;
top: 20px;
left: -212px;
font-size: 30px;
}

#check:checked ~ .sidebar{
  left:0;
}

#check:checked ~ label #closebtn{
  left: 212px;
}

#check:checked ~ label #openbtn{
  left:170px;
  opacity: 0;
}

#check:checked ~ .content{
  margin-left: 250px;
}

.content{
  background: url(images/bg.jpg) ;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding-top: 100px;
  transition: all .5s;
}


You May Like This Related Videos

Responsive Services Section Using Only Html & Css ➤ https://youtu.be/G4UNzxzqyV0 Responsive Pricing table Using Only HTML & CSS ➤ https://youtu.be/1jiPIUixvq0 How to Create a Hero Image HTML And CSS Only ➤ https://youtu.be/YwKnWrRbNes

Download Image

Sidebar Menu Using Html and CSS
Sidebar Menu Using Html and CSS
(Visited 206 times, 2 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here