Fixed Sidebar Menu HTML CSS
In Today post I will show you, how to create a SideBar Menu using HTML & CSS only.
The sidebar allows the user to navigate different sections or pages on the webpage of information to the right side or left side of a website. Which have links to help the user to move various site within the webpage and makes it easier for users? The sidebar became an essential part of the web pages.
In this video tutorial [Side Bar Menu], we are going to link the button along with icons at the left top side corner of the webpage, also with hover effect when the button is hovered nice effects appear. And an animation effect will also be added to the link to make animate nice.
Here is the full video tutorial that will show step by step how to create a Side Bar Menu using HTML & CSS
In the video tutorial, I will be using pure HTML and CSS only to write the code. So if you’re a beginner, then you can easily understand the codes of this program and be able to create this type of sidebar menu.
I will also share the code below so you can see and follow along with the video tutorial
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fixed Sidebar Menu Html CSS</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="sidebar">
<h2>Next</h2>
<ul class="nav">
<li>
<a href="#">
<i class="fas fa-server"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-concierge-bell"></i>
<span>Services</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-calendar-alt"></i>
<span>Events</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<span>Setting</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question-circle"></i>
<span>About</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-address-card"></i>
<span>Contact</span>
</a>
</li>
</ul>
</div>
<div class="main">
<!-- <h2>Fixed Sidebar Menu Html CSS</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
dolores illum?
</p>
<h2>Fixed Sidebar Menu Html CSS</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
dolores illum?
</p>
<h2>Fixed Sidebar Menu Html CSS</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
dolores illum?
</p>
<h2>Fixed Sidebar Menu Html CSS</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
dolores illum?
</p>
<h2>Fixed Sidebar Menu Html CSS</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
dolores illum?
</p>
<h2>Fixed Sidebar Menu Html CSS</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
dolores illum?
</p>
<h2>Fixed Sidebar Menu Html CSS</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
dolores illum?
</p>
<h2>Fixed Sidebar Menu Html CSS</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
dolores illum?
</p> -->
</div>
</body>
</html>CSS
/* colors
#ED1C5B; light
#E20E4E; dark
*/
/* reset */
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Sidebar start here */
.sidebar{
position: fixed;
background: #ED1C5B;
width: 200px;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.sidebar h2{
text-align: center;
font-size: 20px;
text-transform: uppercase;
color: #ffffff;
background: #E20E4E;
padding: 20px;
font-weight: bold;
}
.sidebar ul li {
margin: 25px 0;
}
.sidebar ul li a{
color: #ffffff;
padding: 0 30px;
}
.sidebar ul li a:hover{
color: #000000;
margin-left: 20px;
transition: 0.4s;
}
/* Sidebar end Here */
/* Main Content Section Start Here */
.main{
margin-left: 200px;
padding: 5px;
}
.main h2{
margin-top: 20px;
}
