sidebar source code

byAsgarTech -

 beginners project sidebar menu list project


#htmlproject Hi, thanks for Visit my site this is beginners projects for those student are learning programming in web development so share with and subscribe my channel I dedicated to helping beginners navigate through their project journey! Our channel focuses on providing step-by-step tutorials and guidance on creating a project sidebar menu list. Whether you are new to programming or looking to enhance your skills, our videos are designed to simplify the process and make it accessible for everyone. Join our community of aspiring developers and enthusiasts by subscribing to our YouTube channel today! Don't forget to hit the notification bell to stay updated with our latest videos. Start your project journey with us and unlock endless possibilities.


output:





Source Code : 

Html5: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sidebaar</title>
    <link rel="stylesheet" href="side.css" />
  </head>

  <body>
    <div class="root">
      <input type="checkbox" id="check" />
      <label for="check"> <h4 class="men">on</h4></label>
      <div class="sidebar">
        <div class="sidebtn">
          <label for="check"> <p>off</p></label>
        </div>
      </div>
    </div>
  </body>
</html>


CSS:

* {
  margin: 0;
  padding: 0;
}

.root {
  height: 100vh;
  width: 100%;
  background-color: black;
}

.sidebar {
  width: 250px;
  height: 100%;
  background: green;
  margin-left: -300px;
  transition: all 0.3s linear;
  position: absolute;
}
#check {
  display: none;
}
label b {
  position: fixed;
}
.sidebtn {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

label {
  align-items: center;
  display: flex;
  color: #fff;
}
label p {
  padding: 10 30px;
  cursor: pointer;
  color: black;

}

.sidebtn p{
  padding: 10px 30px;
  cursor: pointer;
  background-color: black;
  color: #fff;
}

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

label .men {
  margin: 10px 0 0 10px;
  background-color: #fff;
  cursor: pointer;
  color: black;
  text-align: center;
  padding: 10px 15px;
}
#check:checked ~ label .men {
  color: red;
  /* opacity: 0; */
  display: none;
}

#BeginnersGuide #ProjectSidebarMenu #programmingtutorials #htmlcssproject #htmlcssprojectsforbeginners #htmlcssprojectsforpractice #htmlcssprojecttutorial #htmlcssprojectbangla #htmlcssprojecteasytutorial #htmlcssprojectcodewithharry #htmlcssprojectswithsourcecode #htmlcssprojecttamil #htmlcssprojectideas #htmlcssprojectinhindi #htmlcssprojectresponsive #htmlcssprojectloginpage #htmlcssprojectbanglatutorial #htmlcssprojectportfolio #htmlcssprojectstepbystep #htmlcssprojectinvisualstudiocode #htmlcssprojectand #htmlcssprojectthapatechnical #htmlcssprojectwebsite #htmlcssprojectapnacollege #htmlcssprojectmalayalam



Subscribe my Channel: https://www.youtube.com/channel/UCNUT102NG0xRiofbNfMftew

Instagram : https://www.instagram.com/thefuture.dev/?next=%2F&hl=en


thanks...



Tags
Previous Post Next Post

Contact Form