Simple jQuery Toggle Menu with Awesome Sliding Effects

A simple jQuery based toggle menu that reveals a hidden menu with an awesome sliding effect.

How to use it:

1. Include the latest version of jQuery library on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Create the Html for a hidden menu.

<div class="menu">
<ul>
<li><a href="#">who am i</a></li>
<li><a href="#">my works</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact me</a></li>
</ul>
</div>

3. Create the Html for a toggle button.

<div id="awesome-menu"> 
<a href="#awesome-menu" class="showmenu">menu</a> 
<a href="#awesome-menu" class="hidemenu">hide</a>
</div>

4. The jQuery script to enable the slide menu.

$(document).ready(function(){
$('#awesome-menu a').hover(function(){
$('span.title-overlay').animate({top: 0},400);
}, function(){
$('span.title-overlay').stop(true).animate({top: '-30px'},300);
});

// menu class
$('.menu').css({
'width': '100%',
'text-align': 'center',
'margin-bottom': '20px',
'overflow': 'hidden'
});
$('.menu ul').css('margin-top', '-120px');
$('.menu li').css({
'display': 'inline-block',
'width': '100px',
'height': '100px',
'border-radius': '50%',
'background': '#ddd'
});
$('.menu li a').css({
'display': 'block',
'padding-top': '40px',
'color': '#fff',
'width': '100px',
'height': '60px',
'border-radius': '50%'
});

//menu show effect
$('#awesome-menu a.hidemenu').hide();
$('#awesome-menu span.hide').hide();
$('#awesome-menu a').click(function(){
$('#awesome-menu a.showmenu').fadeOut(function(){
$('#awesome-menu a.hidemenu').fadeIn(function(){
$('#awesome-menu span.show').fadeOut();
$('#awesome-menu span.hide').fadeIn();
});
});
$('.menu ul').animate({marginTop: 0}, 500);
});
$('#awesome-menu a.hidemenu').click(function(){
$('.menu ul').animate({marginTop: '-120px'}, 500);
$('#awesome-menu a.hidemenu').fadeOut(function(){
$('#awesome-menu a.showmenu').fadeIn(function(){
$('#awesome-menu span.show').show();
$('#awesome-menu span.hide').hide();
});
});
});
});

---

This awesome jQuery plugin is developed by gapra. For more Advanced Usages, please check the demo page or visit the official website.