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 Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	vertical-animated-menu
Author:	Rudy Sanchez
Licence:	MIT Licence
Published:	January 12, 2024
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

Demo Download

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>

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.