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.


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>



<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>



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

js for the menu:

(function() {

'use strict';

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


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


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

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

} else {

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

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





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.

comments powered by Disqus
Cf68cdaaf75f9cd1417267c6b1cafb3813c488a1 Virtual Reality Applications
Augmented reality apps are widely used – from geolocalization to using it in gaming industry. Augmented reality app is a new way to access data determined by environment conditions.
754d17aa02f8c56a0e0b671d45bf2455f6177062 Agile Methodology (Scrum)
Scrum is the very popular agile methodology for managing product development and project delivery. Scrum is the framework that could be applied for the development of product use cases, different projects or entire products.
1a1b621bfd24aba09a56bb25cf18719ad46ef190 News App Development
Smartphones are regularly used everywhere & anytime: in cars, on the way to the office, during the rest on holidays or weekends. That’s very convenient way for users to access important or just fun information with the help of news mobile app.
D63ac21dfd17c4acc93d52d9bdc72fea10e84edd Geolocation Services in Mobile Tracking Software
Geolocation services are used by many mobile apps, websites, mobile operators etc.