jQuery animate example to create mobile sliding menu

Using jQuery animate you can animate the controls. In this example we will see how to animate the control width using jQuery animate and toggle.

Click on menu icon to animate

jQuery code to slide/animate menu bar

<script language="javascript"> $(document).ready(function () { $(".menuicon").on("click", function () { $(".menu").animate({ width: 'toggle' }, "slow"); }); }); </script>

Source code:

<html> <head> <style> .menu { float: left; display: none; padding: 0px 5px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu ul li { margin: 0; padding: 0; } .menu ul li a { text-decoration: none; color: #292323; background: #ccc; display: block; padding: 5px 30px 5px 5px; border-bottom: solid 1px #fff; height: 20px; white-space: nowrap; } .menuicon { border: solid 1px #000; border-radius: 50%; padding: 5px 8px; float: left; cursor: pointer; } .menuiconbar { width: 25px; height: 5px; background-color: black; margin: 3px 0; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script language="javascript"> $(document).ready(function () { $(".menuicon").on("click", function () { $(".menu").animate({ width: 'toggle' }, "slow"); }); }); </script> </head> <body> <div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="menuicon"> <div class="menuiconbar"></div> <div class="menuiconbar"></div> <div class="menuiconbar"></div> </div> </div> <br clear="all" /> </body> </html>