Building a Sidebar Navigation Menu using HTML and CSS

In this tutorial, we'll dive into creating a stylish and responsive sidebar navigation menu using HTML and CSS. This menu is designed to adapt to various screen sizes and enhances the user experience, making it easy to navigate through a website or application.

<div class="menu">
    <ul class="menu-content">
        <li><a href="#"><span class="material-symbols-outlined">home</span><span>Home</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">dashboard</span><span>DashBoard</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">explore</span><span>Explore</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">analytics</span><span>Analytics</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">settings</span><span>Settings</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">person</span><span>Account</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">report</span><span>Report</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">email</span><span>Contact</span></a></li>
        <li><a href="#"><span class="material-symbols-outlined">logout</span><span>Logout</span></a></li>
    </ul>
</div>

The code starts with a main-container div, which serves as the container for the entire menu.
Inside the main-container, there is a menu division, where the actual menu items are defined.
The menu items are organized as an unordered list (ul) with the class menu-content.
Each list item (li) represents a menu option and contains an anchor (a) element.
Inside each anchor element, there are two span elements. The first span contains a material symbol icon, and the second span displays the menu item's text.

The code snippet for CSS is given below:

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

body {
    min-height: 100vh;
    background: linear-gradient(#051f30, #000000);
}

.menu::-webkit-scrollbar {
    display: none;
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 85px;
    height: 100%;
    transition: .3s;
    scrollbar-width: none;
    overflow: hidden scroll;
    background: #ffffff12;
    -ms-overflow-style: none;
    padding: 20px 20px 20px 0;
    backdrop-filter: blur(5px);
    box-shadow: 8px 0px 9px 0px #00000014;
}

.menu:hover {
    width: 260px;
}

.menu:hover li span:nth-child(2) {
    display: block;
}

.menu-content li {
    list-style: none;
    border-radius: 0px 50px 50px 0;
    transition: .3s;
    margin-bottom: 20px;
    padding-left: 20px;
}

.menu-content li:hover {
    background: #0c0c0c;
}

.menu-content li span:nth-child(2) {
    display: none;
}

a {
    text-decoration: none;
    color: rgb(213, 213, 213);
    display: flex;
    align-items: center;
    font-family: 'calibri';
}

.material-symbols-outlined {
    padding: 10px;
    font-size: 25px;
    margin-right: 10px;
    border-radius: 50%;
    background: #0c0c0c;
}

The main-container spans the full width and has a background created with a linear gradient that transitions from a dark blue (#051f30) to black (#000000).
The menu division represents the sidebar menu. It has a defined height and a background with a semi-transparent white color (#ffffff12).
The menu also has padding on the top, right, and bottom. It's given a fixed width of 85px and has a box shadow on the right side to create a subtle shadow effect.
The backdrop-filter property is used to apply a blur effect to the menu.
Each li (menu item) has a list-style of none, which removes the bullet points.

The menu items have a border-radius that creates a rounded appearance on the left side, giving it a modern, stylized look.
The anchor (a) elements inside each li have text-decoration removed (no underlines) and a text color of light gray (rgb(213, 213, 213)). They are set to display flex and align items in the center.
The material-symbols-outlined class is used for the icons in the menu. It sets the icon's size, adds margin to the right, and provides a circular background.
When a user hovers over a menu item (li:hover), the background color changes to a darker shade, making the selected item stand out.
Initially, the second span (menu text) is hidden, but it becomes visible when the entire menu is hovered over (menu:hover li span:nth-child(2)).

Overall, this code creates a responsive and stylish sidebar navigation menu with both icon and text options. It uses hover effects to enhance user interaction and provides a visually appealing design for a web application or website.

In conclusion, the provided code showcases a sleek and responsive sidebar menu created using HTML and CSS. It illustrates a modern navigation structure with icons and corresponding text options. The layout is designed to accommodate user interaction, as hovering over the menu expands its width, revealing the descriptive text for each menu item. This design approach aims to offer an intuitive and visually engaging experience for users accessing a web application or website.

Download

Building a Sidebar Navigation Menu using HTML and CSS

You might like