In this sidebar menu in HTML and CSS article, we’ll cover how to create a sidebar menu using HTML and CSS. Whether you’re a beginner or an experienced web developer, this guide will provide you with the knowledge and skills to build a Responsive sidebar menu in HTML and CSS that improves usability and UI. A sidebar menu enhances website UX, offering vertical navigation. Utilizing HTML and CSS, it can be customized and made responsive. An efficient sidebar simplifies navigation and provides quick access to essential content.
Creating Sidebar Menu Using HTML and CSS
A well-designed sidebar menu can enhance user experience and navigation on your website. In this example, we’ll create a responsive sidebar menu using HTML and CSS.
- HTML Structure: Let’s start with the basic HTML structure for our sidebar menu. In this HTML file, we will design the structure of our side navbar.
-
CSS Styling: Now let’s style our sidebar using CSS. Create a separate
styles.cssfile and link it to the<head>section of your HTML - Link Styling: Customize link (<a>) styles for readability and interaction, setting font size, colors, padding, and text decoration.
- Hover Effects: Apply hover effects to links for visual feedback, changing text and background colors, and adjusting border radius for emphasis.
- Content Structure: Organize sidebar content with appropriate headings and links, ensuring clarity and ease of navigation for users.
In this example we are following above mentioned apprach.
<!DOCTYPE html><html>
<head>
<!-- You can Include your CSS here-->
<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>
<!-- Div Header-->
<h2>GeeksforGeeks</h2>
<!-- Links in Div -->
<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>
|