July 8th 2018

Developer:	Bruno Passos
File Size:	3.65 KB
License:	MIT License
Official Website:	BrunoPassos

Download

Demo

Features

Css Animated
Font Awesome Icon
Best User Experience
Easy to use & modify
Customizable
SEO & Mobile Friendly
Sliding
Lightweight

Requirements

This menu requires following:-

1- Font Awesome Stylesheet
2- JavaScript

How to Use

To add this vertical menu in your site, follow the given below steps.

Step 1: Add Font Awesome style sheet in your website head tag. If you have already installed font awesome icons, then skip this step. If not, add following CDN link for icons:-

Step 2: Add the following HTML code in the body of your webpage.




 Menu 1 

 Menu 2

 Menu 3

 Menu 4

Add your links in the above code, you can also increase number of links by adding

tag with the class name "ms_menu__item".
Step 3: Add the following css file in your website:


.hidden {
    display: none;
}
ul, ol, li {
    list-style: none;
    color: white;
    margin: 0;
    padding: 0;
}
.ms_menu_bar__wrapper {
    height: 100%;
    width: 60px;
    background: #2B1F34;
    padding: 15px 10px;
    float: left;
    position: relative;
    z-index: 10;
}

    .ms_menu__trigger {
        font-size: 30px;
        text-align: center;
        cursor: pointer;
        transition: color 0.6s;
    }

        .ms_menu__trigger:hover {
            color: #2F879B;
        }

    .ms_menu__item-icon {
        margin-right: 10px;
    }

.ms_menu_body__wrapper {
    float: left;
    background: rgba(24, 88, 109, 0.8);
    position: relative;
    left: -1px;
}

    .ms_menu__item {
        border-bottom: 1px solid #37616A;
        padding: 15px 40px 15px 15px;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.6s;
        text-decoration: none;
        color: #fff;
    }

    .ms_menu__item:hover {
        background: rgba(0,0,0,0.4);
    }

    .hide-menu {
        opacity: 0;
        transition: all 0.06s;
        position: relative;
        z-index: 0;
        left: -90px;

    }

    .show-menu {
        transition: all 0.1s;
        left: -1px;
    }

Step 4: Finally add the following JavaScript code:

You have done, best of luck ! don't forget to share.

This post first appeared on Programming Explain, please read the originial post: here