jQuery-Animate-Menu-Effect
Create by Gapra
Requirement
jQuery (1.9.0 or later)
note: jQuery 1.9.0 or later is strongly recommended because using jQuery less than 1.8.3
Compatibility
Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Not tested on IE.
Sample Site
View demo site to view the result. See demo here
HTML Structure
Load jQuery latest version (1.9.0 or later) and script.js on assets directory, eg:
<script type="text/javascript" src="assets/scripts/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="assets/scripts/script.js"></script>Write HTML structure for menu, eg:
..... <div class="menu"> <ul> <li><a href="#" class="whoami">who am i</a></li> <li><a href="#" class="myworks">my works</a></li> <li><a href="#" class="blog">blog</a></li> <li><a href="#" class="contact">contact me</a></li> </ul> </div> <div id="awesome-menu"> <a href="#awesome-menu" class="showmenu">menu</a> <a href="#awesome-menu" class="hidemenu">hide</a> <p> <span class="title-overlay show">.....</span> <span class="title-overlay hide">.....</span> </p> </div> .....You can modification animate on script.js in section
..... $('.menu li a.whoami').animate({ marginTop : '30px' }, 400, function() { $('.menu li a.myworks').animate({ marginTop : '30px' }, 400, function() { $('.menu li a.blog').animate({ marginTop : '30px' }, 400, function() { $('.menu li a.contact').animate({ marginTop : '30px' }, 400); }); }); }); .....It's very simple
