Your Website's Navigation with an Animated Aside Menu Bar: HTML and CSS Tutorial @rayen-code

Rayen

Navigation is a vital component of any website, and adding creativity to it can make your site more engaging. In this tutorial, we'll guide you through the process of creating an animated aside menu bar using HTML and CSS. Elevate your web design skills and enhance your website's navigation with this visually appealing and interactive design element.




Step 1: HTML Markup:

Start by setting up the HTML structure for your animated aside menu bar. Create an aside element to represent the menu.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon PopUp</title>
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

</head>
<body>


    <aside>

        <div class="btn">
            <i class="fa-solid fa-house"></i>
            <span>Home</span>
        </div>
        <div class="btn">
            <i class="fa-solid fa-user"></i>
            <span>Profile</span>
        </div>
        <div class="btn">
            <i class="fa-solid fa-pen-to-square"></i>
            <span>Edit</span>
        </div>
        <div class="btn">
            <i class="fa-solid fa-bell"></i>
            <span>Notification</span>
        </div>
        <div class="btn">
            <i class="fa-solid fa-download"></i>
            <span>Download</span>
        </div>
        <div class="btn">
            <i class="fa-solid fa-gear"></i>
            <span>Settings</span>
        </div>

    </aside>


    
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
/* style.css  */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box
    ;
    font-family: sans-serif;
}

:root{
    --color: #00b963;
}

body{
    min-height: 100vh;
    background: #a8d5ff;
}

aside{
    background: #f0f0f0;
    display: inline-block;
    margin-top: 150px;
    padding: 5px;
    border-radius: 0 8px 8px 0;
    position: fixed;
    left: -60px;
    transition: 0.2s;
}
aside:hover{
    left: 0;
}

.btn{
    width: 60px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    background: white;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
}

.btn i{
    font-size: 1.5rem;
    color: var(--color);
}

.btn span{
    position: absolute;
    left: 80px;
    width: 120px;
    background: var(--color);
    padding: 10px 15px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    transform: translateX(50px);
    opacity: 0;
    pointer-events: none;
}
.btn span::before{
    content: "";
    position: absolute;
    width: 15px;
    aspect-ratio: 1;
    left: -7px;
    background: var(--color);
    transform: rotate(45deg);
}

.btn:hover{
    background: var(--color);
}
.btn:hover i{
    color: white;
}
.btn:hover span{
    transform: translateX(0);
    opacity: 1;
    transition: 0.5s;
}

You can customize the menu's size, colors, animation speed, and other properties to match your website's design. Add your menu items, links, and icons to complete the menu's functionality.

Congratulations! You've successfully created an animated aside menu bar using HTML, CSS, and JavaScript. This dynamic design element can enhance navigation and user experience on your website.

Implement this animated menu in your web projects to provide users with an intuitive and visually appealing way to access content and navigate your site.

0 Comments