CSS Vertical Sliding Menu

- July 08, 2018
A simple, but attractive vertical sliding menu created in Vanilla JS & CSS animation.

CSS vertical sliding Menu example

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

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:-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Step 2: Add the following HTML code in the body of your webpage.
<div class="ms_menu_body__wrapper hide-menu">
        <ul>
            <li class="ms_menu__item"><i class="ms_menu__item-icon fa fa-circle-thin"></i><a href="#"> Menu 1 </a></li>
            <li class="ms_menu__item"><i class="ms_menu__item-icon fa fa-circle-thin"></i><a href="#"> Menu 2</a></li>
            <li class="ms_menu__item"><i class="ms_menu__item-icon fa fa-circle-thin"></i><a href="#"> Menu 3</a></li>
  <li class="ms_menu__item"><i class="ms_menu__item-icon fa fa-circle-thin"></i><a href="#"> Menu 4</a></li>
        </ul>
    </div>
Add your links in the above code, you can also increase number of links by adding <li> 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:
<script>
var menuTrigger = function() {
    var triggerElement = document.querySelector('.ms_menu__trigger');

    triggerElement.addEventListener('click', function() {
        var menuBody = document.querySelector('.ms_menu_body__wrapper');

        if(menuBody.classList.contains("hide-menu")) {
            menuBody.classList.remove('hide-menu');
            menuBody.classList.add('show-menu'); 
        }
        else {
            menuBody.classList.remove('show-menu');
            menuBody.classList.add('hide-menu');   
        }
    });
}

var init = (function(window, undefined) {
    menuTrigger();

    return init;
})(window);
</script>

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

Leave your reply.
EmoticonEmoticon