In this article, we will learn to design a modern sidebar menu by using HTML and CSS, The Sidebar menu is a component that is used for vertical navigation. It can be customized and made responsive by using simple HTML and CSS. To make a collapsing sidebar, you need to have HTML and CSS knowledge for creating it.
Example: In this example, first we will create a structure by using HTML after that we will decorate that structure by using CSS.
HTML File: In this file, we will design the structure of our modern side navbar, here we will not use any single line of CSS. We will do that after the structure is ready.
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h2>GeeksforGeeks</h2>
<a href="#">
Data Structures
</a>
<a href="#">
Algorithms
</a>
<a href="#">
Interview Preparation
</a>
<a href="#">
Python
</a>
<a href="#"> Java </a>
</div>
</body>
</html>
|
CSS File: This file contains all the CSS styling rules to create the custom animated sidebar. This file is used in the above HTML code.
CSS
div {
color: #fff;
width: 250px;
padding-left: 20px;
height: 100vh;
background-image: linear-gradient(30deg, #11cf4d, #055e21);
border-top-right-radius: 90px;
}
div h2 {
padding: 40px 0 0 0;
cursor: pointer;
}
div a {
font-size: 14px;
color: #fff;
display: block;
padding: 12px;
padding-left: 30px;
text-decoration: none;
outline: none;
}
div a:hover {
color: #56ff38;
background: #fff;
position: relative;
background-color: #fff;
border-top-left-radius: 22px;
border-bottom-left-radius: 22px;
}
|
Complete Solution: Here we will combine the above sections’ HTML and CSS to create a perfect modern sidebar menu.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Sidebar Div */
div {
color: #fff;
width: 250px;
padding-left: 20px;
height: 100vh;
background-image: linear-gradient(30deg, #11cf4d, #055e21);
border-top-right-radius: 90px;
}
/* Div header */
div h2 {
padding: 40px 0 0 0;
cursor: pointer;
}
/* Div links */
div a {
font-size: 14px;
color: #fff;
display: block;
padding: 12px;
padding-left: 30px;
text-decoration: none;
outline: none;
}
/* Div link on hover */
div a:hover {
color: #56ff38;
background: #fff;
position: relative;
background-color: #fff;
border-top-left-radius: 22px;
border-bottom-left-radius: 22px;
}
</style>
</head>
<body>
<div>
<h2>GeeksforGeeks</h2>
<a href="#">
Data Structures
</a>
<a href="#">
Algorithms
</a>
<a href="#">
Interview Preparation
</a>
<a href="#">
Python
</a>
<a href="#"> Java </a>
</div>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
09 May, 2023
Like Article
Save Article