Vertical Animated Menu with CSS3 and jQuery

A lite version vertical animated menu powered with CSS3 and jQuery. The menu comes with colorful & full height vertical bars that expand to full screen on click event.

Plugin Overview

Plugin: vertical-animated-menu
Author: Rudy Sanchez
Licence: MIT Licence
Published: April 24, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and jQuery UI 1.12.0 or Latest

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 3 KB



How to Use Vertical Animated Menu :

1. Load the jQuery and jQuery UI into your HTML document in order to use vertical animated menu .

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. After this, include the vertical menu‘s CSS and JavaScript file into your page.

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

<!-- Vertical Menu Js -->
<script src="js/menu.js"></script>

3. Create HTML structure for vertical animated menu like below and done.

 <div id="wrap">
        <div class="strip" id="optionOne">
            <p>Option 1</p>
        </div>

        <div class="strip" id="optionTwo">
            <p>Option 2</p>
        </div>

        <div class="strip" id="optionThree">
            <p>Option 3</p>
        </div>

        <div class="strip" id="optionFour">
            <p>Option 4</p>
        </div>

        <div class="strip" id="optionFive">
            <p>Option 5</p>
        </div>

        <div class="strip" id="optionSix">
            <p>Option 6</p>
        </div>

    </div>