Pure CSS Vertical Menu with Submenu – Accordion Menu

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Accordion Menu
Author:	Moh Taufiqur Rohman
Licence:	MIT Licence
Published:	January 17, 2024
Repository:	Fork on GitHub
Dependencies:	Font Awesome 5
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	2.56 KB

Demo Download

How to Use CSS Vertical Menu with Submenu

1. First of load Font Awesome 5 for menu icons by adding the following CDN link in the head tag of your HTML page.

<!-- Fontawesome 5-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

2. After that, create HTML structure for vertical menu like below and add your menu links. If you are unsure about icons, you may get started with Font Awesome.

    <div class="middle">
        <div class="menu">
            <ul>
                <li class="item" id="profile">
                    <a href="#profile" class="btn"><i class="fa fa-user"></i> Profile</a>
                    <div class="smenu">
                        <a href="">Post</a>
                        <a href="">Picture</a>
                    </div>
                </li>

                <li class="item" id="messages">
                    <a href="#messages" class="btn"><i class="fa fa-envelope"></i> Messages</a>
                    <div class="smenu">
                        <a href="">New</a>
                        <a href="">Sent</a>
                        <a href="">Spam</a>
                    </div>
                </li>

                <li class="item" id="settings">
                    <a href="#settings" class="btn"><i class="fa fa-cog"></i> Settings</a>
                    <div class="smenu">
                        <a href="">Password</a>
                        <a href="">Language</a>
                    </div>
                </li>

                <li class="item">
                    <a href="#" class="btn"><i class="fa fa-sign-out-alt"></i> Logout</a>
                </li>
            </ul>
        </div>
    </div>

3. Now its time to stylize your menu, you can add style.css file into head tag of your HTML document.

<!-- Vertical Menu CSS -->
<link rel="stylesheet" href="css/style.css">

4. If you want to add inline styles (or customize css classes). Use the following CSS.

.menu {
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.item {
    border-top: 1px solid #18dcff;
    overflow: hidden;
}

.btn {
    display: block;
    padding: 16px 20px;
    background: #17c0eb;
    color: white;
    position: relative;
}

.btn::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #17c0eb;
    left: 20px;
    bottom: -7px;
    transform: rotate(45deg);
}

.btn i {
    margin-right: 10px;
}

.smenu {
    background: #333;
    overflow: hidden;
    transition: max-height 0.3s;
    max-height: 0;
}

.smenu a {
    display: block;
    padding: 16px 26px;
    color: white;
    margin: 4px 0;
    position: relative;
}

.smenu a::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background: #18dcff;
    left: 0;
    top: 0;
    transition: .3s;
    opacity: 0;
}

.smenu a:hover::before {
    opacity: 1;
}

.item:target .smenu {
    max-height: 10em;
}

You have done, save your pure CSS vertical menu with submenu and enjoy 🙂

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.