Меню, летающее за курсором на jQuery
1 2 |
<link href="/css/malihu.cfm.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> |
2#: Следующий код вставляйте сразу после предыдущего:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div id="cf_menu"> <div class="container"> <div class="title">MENU</div> <ul> <li><a href="#" onclick="Animate2id('#home');return false">↑ Home</a></li> <li><a href="#" onclick="Animate2id('#about');return false">About me</a></li> <li><a href="work">+ Work</a> <ul> <li><a href="#" onclick="Animate2id('#recent');return false">Recent</a></li> <li><a href="#" onclick="Animate2id('#web');return false">Web</a></li> <li><a href="#" onclick="Animate2id('#print');return false">Print</a></li> </ul> </li> <li><a href="#" onclick="Animate2id('#blog');return false">Blog</a></li> <li><a href="links">+ Interesting links</a> <ul> <li><a href="#" onclick="Animate2id('#freebies');return false">Freebies & Resources</a></li> <li><a href="#" onclick="Animate2id('#people');return false">People</a></li> </ul> </li> <li><a href="#" onclick="Animate2id('#contact');return false">Contact</a></li> <li><a href="info">+ Script info</a> <ul> <li><a href="#">See the post</a></li> <li><a href="#">↓ Download</a></li> </ul> </li> <li><a href="#">malihu</a></li> </ul> </div> </div> |
3#: Следующий код вставляйте в самый низ нужных страниц после тега /body или же сразу после предыдущего кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> //cursor following menu config $mouseover_title="+ MENU"; //menu title text on mouse-over $mouseout_title="MENU"; //menu title text on mouse-out $menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds) $menu_following_easing="easeOutCirc"; $menu_cursor_space=30; //space between cursor and menu $menu_show_speed="slow"; //menu open animation speed $menu_show_easing="easeOutExpo"; //menu open animation easing type $menu_hide_speed="slow"; //menu close animation speed $menu_hide_easing="easeInExpo"; //menu close animation easing type </script> <script src="/js/malihu.jquery.cfm.js"></script> |