Pure CSS Vertical Menu with Submenu – Accordion Menu

Pure CSS Vertical Menu with Submenu - Accordion Menu
Code Snippet:
Author:
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 27,253
License: MIT
Edit Code online: CodeHim
Read More

The “Accordion Menu” is a well designed pure CSS vertical menu with submenu. The menu comes with Font Awesome 5 icons library that makes it more attractive. This menu is best to create minimal navigation system for Non-JavaScript web projects. It works like an accordion (using #anchor target). Users can easily navigate main links and submenus through this menu.

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

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 🙂

1 thought on “Pure CSS Vertical Menu with Submenu – Accordion Menu”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X