How to Create a Creative Vertical Menu in HTML & CSS

Creating a vertical menu in HTML and CSS can add a unique look to your website and dashboard layout and enhance user experience. Vertical menus are great for side navigation. You can make them stylish and interactive with the help of CSS. In this article, we'll follow the steps to building a creative vertical menu from scratch using only HTML and CSS.

Step 1: Setting Up the HTML Structure

First, I need to create the basic HTML structure for our vertical menu. In this example, I created an nav element with a list of anchors to represent the menu items. Each of them will link to different sections of the site, and we can later style these to be visually appealing.

<section>
        <nav>
            <a href="" data-name="Home">Home</a>
            <a href="" data-name="About Us">About Us</a>
            <a href="" data-name="Services">Services</a>
            <a href="" data-name="Contact Us">Contact Us</a>
        </nav>
</section>

Step 2: Styling the Vertical Menu with CSS

Next, I added styles to the menu using CSS inside the style tag on head. I used CSS to make the menu vertical, add hover effects, and customize the appearance. Here I added a ::after pseudo-element to each tag, which used to create the sliding text effect.

nav {
    width: 250px;
}

nav a {
    display: block;
    width: 100%;
    padding: 10px;
    position: relative;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    background-color: rgba(255,255,255,0.1);
    margin: 5px 0;
    border-radius: 5px;
    transition: 0.2s all ease-in-out;
}

nav a:hover {
    color: transparent;
    background-color: transparent;
}

nav a::after {
    content: attr(data-name);
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 40px;
    left: 10px;
    top: 3px;
    opacity: 0;
    transition: 0.4s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

nav a:hover::after {
    opacity: 1;
    letter-spacing: 2px;
    color: #ffee10;
}

Conclusion

This creative vertical menu, styled with only HTML and CSS, provides an eye-catching navigation element that’s easy to implement. By experimenting with pseudo-elements, letter-spacing, and transitions, you can design a professional-looking menu for your website. This method can be customized further with different colors, fonts, and effects, allowing you to create a unique and attractive menu for your project.