Sidebar Menu With Background Video Using HTML & CSS

Learn how to create a sidebar menu with a background video using HTML and CSS.

Sidebar Menu With Background Video Using HTML & CSS

This Sidebar Menu With Background Video is built using HTML and CSS to create a modern and visually engaging side navigation system. The design combines a stylish sidebar menu with a full-screen video background, providing a unique user experience that enhances the overall appearance of a website.

The project uses HTML for the structure and CSS for styling, animations, and layout design. The sidebar contains navigation links organized in a clean format, while the background video adds a professional and dynamic visual effect. The layout is fully responsive and works smoothly across desktops, tablets, and mobile devices.

Steps to Create a Sidebar Menu With Background Video

Follow these simple steps to build a side navigation bar with a video background:

Create a project folder, for example, sidebar-menu-background-video.
Inside the folder, create two files: index.html and style.css.
Add the HTML structure for the sidebar navigation menu.
Insert a background video using the HTML video element.
Create navigation links and organize them inside the sidebar.

                            
                                <!DOCTYPE html>

<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->

<html>
<head>
	<title>Sidebar With Bg Video</title>
	<link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>

    <input type="checkbox" id="chk" name="chk">
    <video src="Shots of Different Food.mp4" autoplay muted loop></video>
<header>
  <h2>The Providers <i class="fas fa-utensils"></i></h2>
  <div class="btn">
  <button>Register</button>
  <button>Signin</button>
  <i class="fas fa-search"></i>
  </div>
</header>
  
  <div class="sidebar">
    <label for="chk" title="Click Me"><i class="fas fa-utensils"></i></label>
    <div class="menu">
    <h1>TP</h1><hr>
      <ul>
        <li>Chicken</li>
        <li>Beef</li>
        <li>Drink's</li>
        <li>Hot Drink's</li>
        <li>Salad's</li>
        <li>Icecrem</li>
        <li>About Us</li>
        <li>Help</li>
      </ul>
    </div>
  </div>
</body>
</html>

Apply CSS styling to customize the sidebar design and video positioning. Add hover effects and transitions to improve user interaction. Make the layout responsive for desktops, tablets, and mobile devices. Save the files and open the project in a browser to view the final result.

                            
                                <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
*{
  margin: 0;
  padding: 0;
}
body{
  justify-content: center;
  align-content: center;
  display: flex;
  font-family: 'Poppins', sans-serif;
}
header{
  width: 100%;
  height: 50px;
  z-index: 1;
  margin: 10px
}
header h2 {
  float: left;
  color: #fff;
  font-size: 2em;
  transform: translateX(70px);
  transition: .5s ease-in-out;
}
.btn{
  float: right;
  margin-right: 5%;
}
.btn i{
  color: #fff;
  font-size: 2em;
  vertical-align: middle;
  cursor: pointer;
  margin: 0 30px;
}
button{
  padding: 10px;
  margin: 5px 20px;
  background: transparent; 
  outline: none;
  border:2px solid #fff;
  color: #fff;
  cursor: pointer;  
}
button:hover{
  color: #000;
  background: #fff;
  transition: .4s;
}
.sidebar{
  position: absolute;
  top: 0;
  left: -200px;
  width: 250px;
  height: 100vh;
  background: #fff;
  border-radius: 10px;
  transition: .5s ease-in-out;
}
.sidebar i{
  position: absolute;
  top: 45%;
  right: 0;
  margin: 10px;
  font-size: 2em;
  padding: 5px;
  cursor: pointer;
}
.menu{
    width: 200px;
    height: 100vh;
    background: #eee;
} 
h1{
  text-align: center;
  padding: 5px;
  font-size: 3em
}
.menu ul{
  padding: 10px;
  margin-top: 20px;
  list-style: none;
}
.menu ul li{
  padding: 10px;
  font-size: 20px;
  transition: .5s;
  cursor: pointer;
}
.menu ul li:hover{
  background: #ccc;
}
video{
  width: 100%;
  transition: 1s;
  position: fixed;
}
#chk{
  display: none;
}
#chk:checked ~ .sidebar{
   left: 0;
}
#chk:checked ~ video{
   filter: brightness(.3);
}
#chk:checked ~ header h2{
   transform: translateX(270px);
}

</style>

Download Code Files