Home   →   Blog   →   Animated Toggle Menu

Animated Toggle Menu

We bring to your attention our new concept of a free animated toggle menu that can be helpful to web developers for creating websites. We hope you'll like our menu and find a way to use it in your development practice.

What is Animated Toggle Menu?

Our animated toggle menu is both spectacular and ergonomic, and that's why it will be highly appreciated by users of any site. Luckily, we avoided the mistake often being made by web developers who create expressive but "heavy" site design. Our animated toggle menu is visually appealing, laconic and easy-to-use.

yes_2.gif

We offer you lightweight, open-source menu which requires minimum lines of code. By using this menu, you’ll be able to create a stylish and user-friendly website for all the clients.

How to use?

Animated Toggle Menu uses css3 animations, as well as the jQuery library.

To take the full use of the menu, add the following block after opening the <body> tag:

<div class=“menu-overlay”></div>

In order to add the menu itself, you need this code:

<div class="menu"> <div class="hamburger-menu-wrapper">

<button class="hamburger-menu">

<span>toggle menu</span>

</button>

</div>

<div class="menu-list">

<a href="#">Link 1</a><br>

<a href="#">Link 2</a><br>

<a href="#">Link 3</a><br>

<a href="#">Link 4</a><br>

</div>

</div>

Remember, the "menu" class is going to take 100% wide.

js for the menu:

(function() {

'use strict';

$('.hamburger-menu').click(function (e) {

e.preventDefault();

if ($(this).hasClass('active')){

$(this).removeClass('active');

$('.menu-overlay').fadeToggle( 'fast', 'linear' );

$('.menu .menu-list').slideToggle( 'slow', 'swing' )

} else {
 $(this).addClass('active');

$('.menu-overlay').fadeToggle( 'fast', 'linear' );

$('.menu .menu-list').slideToggle( 'slow', 'swing' );

$('.hamburger-menu-wrapper').toggleClass('bounce-effect');

}

})

})();

And, of course, don’t forget to connect jQuery library.

 

We hope you found our animated toggle menu appealing and useful. Feel free to take full advantage of it during the website development.

You can also visit this page to learn more about our menu.

Next Posts
1ab000fbd6a1796435389b4321ab227e090cc832 Android Widgets
Android widgets are small applications that can be embedded in other applications such as the home screen or the lock screen view.
B024f4c82197da697048707e69639f79cd6dfb6c Swift 3.0 Has Been Released
Apple released the new version of Swift. What's new?
Notice Our website uses cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the privacy policy. By closing this banner you agree to the use of cookies.