Jquery Cursor Following Menu è un plugin che consente di inserire nelle pagine web un menu di navigazione del sito che segue il puntatore del mouse ad ogni suo spostamento. Creato con la libreria jQuery e con CSS, Jquery Cursor Following Menu è facile da implementare e da configurare.
Lo script dispone di un codice semplice, due livelli di navigazione e il suo aspetto è modificabile tramite CSS. La caratteristica dello script è quella di riprodurre un menu che segue il mouse in modo non visivamente invasivo e senza comprometterne l’usabilità delle pagine web.
Utilizzo e implementazione
Implementazione dello script all’interno del tag HEAD
|
1 2 3 |
<link href="malihu.cfm.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> |
Inserimento del codice (di esempio) del menù all’interno del tag BODY
|
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="http://manos.malihu.gr/cursor-following-menu/">See the post</a></li> <li><a href="http://manos.malihu.gr/tuts/cursor_following_menu.zip">↓ Download</a></li> </ul> </li> <li><a href="http://manos.malihu.gr">malihu</a></li> </ul> </div> </div> |
Richiamo della funzione da inserire prima della chiusura del tag BODY
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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="malihu.jquery.cfm.js"></script> |
Potrete settare le varie opzioni sopra secondo le proprie esigenze.
Visualizate la pagina della demo per vedere lo script in azione!
Demo Download Info | Sito Web | Autore
| Articolo pubblicato 6 anni fa nella categoria 
