Modern Sidebar Menu in HTML and CSS
The use of a modern sidebar menu in HTML and CSS is one of the most effective options for improving Web site usability and navigation. This kind of menu comes as an organized structure that offers space efficiency besides being elegant in its appearance.
Sidebars are helpful to content-heavy sites as it makes it easy for users to move from one page and category to another.
A clean, modern sidebar gives the visitors an idea of what is available throughout the site without overloading them with information.
It also offers a step-by-step instructions for an attractive sidebar and the author has added his code that you can use at no cost.
GitHub Source: Modern Sidebar Menu
Features
- Easy to Customize: It is very simple to change the look and designs of the sidebar like the color and the format of the sidebar to match that of your website.
- Icons Used: Current menu icons are also very attractive and adding a side bar make navigating easier for the user.
- Compatibility: Designed with an intention of synchronizing itself to all the current generation browsers and devices.
- Clean Code: It is also written in clear and understandable coding that will make work easier to modify owing to the organized coding structure.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- Dropdown Sidebar Menu
- Responsive Side Navigation Bar With Tooltips
- Simple Responsive Navigation Menu Bar
- Responsive Drop Down Menu Bar with Sub Menu
- Navigation Bar with Dark and Light Mode
- Sticky Navigation Menu Bar
Video Tutorial
Steps to Build Sidebar Menu
- Create Project Folder: The first step is to begin making a new project folder on your computer.
- Create index.html: To the structure of the project, add an HTML-file called index.html.
- Create style.css: Also for the sidebar, add an external stylesheet file namely, style.css.
- Copy & Paste the Code Below: To finish the sidebar setup, use the code below from this article.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Sidebar Menu - JV Codes</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<aside>
<p> JV Codes </p>
<a href="javascript:void(0)">
<i class="fa fa-user" aria-hidden="true"></i>
My drive
</a>
<a href="javascript:void(0)">
<i class="fa fa-laptop" aria-hidden="true"></i>
Computers
</a>
<a href="javascript:void(0)">
<i class="fa fa-clone" aria-hidden="true"></i>
Shared with me
</a>
<a href="javascript:void(0)">
<i class="fa fa-star" aria-hidden="true"></i>
Starred
</a>
<a href="javascript:void(0)">
<i class="fa fa-trash" aria-hidden="true"></i>
Trash
</a>
</aside>
<div class="social">
<a href="https://www.linkedin.com/in/florin-cornea-b5118057/" target="_blank">
<i class="fa fa-download"></i>
</a>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the sidebar menu:
/* Sets a light blue background color for the entire body */
body {
background-color: #80e6ff;
}
/* Styles for the sidebar (aside) element */
aside {
color: #fff; /* Text color inside the sidebar */
width: 250px; /* Width of the sidebar */
padding-left: 20px; /* Padding on the left side */
height: 100vh; /* Full viewport height */
background-image: linear-gradient(90deg , #bd1c00, #b86e00); /* Gradient background */
border-top-right-radius: 80px; /* Rounded top-right corner */
}
/* Styles for links inside the sidebar */
aside a {
font-size: 12px; /* Small font size */
color: #fff; /* Text color */
display: block; /* Makes links block elements */
padding: 12px; /* Padding around links */
padding-left: 30px; /* Extra padding on the left */
text-decoration: none; /* Removes underline from links */
-webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
}
/* Hover effect for sidebar links */
aside a:hover {
color: #000000; /* Changes text color to black on hover */
background: #fff; /* Changes background to white */
outline: none; /* Removes any outline */
position: relative; /* Positions relative for pseudo-elements */
border-top-left-radius: 20px; /* Rounded top-left corner on hover */
border-bottom-left-radius: 20px; /* Rounded bottom-left corner on hover */
}
/* Adds spacing between icon and text inside each sidebar link */
aside a i {
margin-right: 5px;
}
/* Adds decorative effect below and above links on hover */
aside a:hover::after {
content: ""; /* Empty content for decoration */
position: absolute;
background-color: transparent;
bottom: 100%; /* Positions it above the link */
right: 0;
height: 35px;
width: 35px;
border-bottom-right-radius: 18px; /* Rounded bottom-right corner */
box-shadow: 0 20px 0 0 #fff; /* Shadow effect */
}
aside a:hover::before {
content: ""; /* Empty content for decoration */
position: absolute;
background-color: transparent;
top: 38px; /* Positions it below the link */
right: 0;
height: 35px;
width: 35px;
border-top-right-radius: 18px; /* Rounded top-right corner */
box-shadow: 0 -20px 0 0 #fff; /* Shadow effect */
}
/* Styles for the paragraph inside the sidebar */
aside p {
margin: 0;
padding: 40px 0; /* Padding on top and bottom */
}
/* Additional styles for body to ensure full height, width, and margin reset */
body {
font-family: 'Roboto'; /* Sets font family */
width: 100%;
height: 100vh; /* Full viewport height */
margin: 0; /* Removes default margin */
}
/* Placeholder styles for the social media section */
.social {
height: 0; /* Sets height to zero for layout purposes */
}
/* Styles for icons inside the social media section */
.social i:before {
width: 20px;
height: 20px;
font-size: 18px; /* Icon size */
position: fixed;
color: #fff; /* Icon color */
background: linear-gradient(90deg , #bd1c00, #b86e00); /* Gradient background for icon */
padding: 10px; /* Padding around the icon */
border-radius: 50%; /* Makes icon circular */
top: 10px;
right: 10px; /* Positions it in the top-right corner */
}
Download Source Code
Modern Sidebar Menu is an amazing and professionally designed sidebar menu code for web designers. The practical use of this modern sidebar menu can be seen with the HTML and CSS source code which you can download from the button below. This code has no copyright concern; hence one may use it in any of his/her projects with ease.
Conclusion
HTML, CSS Modern Sidebar Menu is an effective and beautiful element to be implemented on the website.
Please, you may use this code on your website, provided that you link back to JV Source Codes to support our work. For more tutorials, check out our channel, and for any questions, feel free to leave a comment below, and I’ll get back to you.
