Yahoo! User Interface Blog (YUIBlog)

Nel YUI 3 Galleria: SimpleMenu 1.3KB Julien Lecomte con tastiera e supporto ARIA

Julien Lecomte ha scritto il modulo SimpleMenu per l'uso su Yahoo! Cerca (il link "More" utilizza questo codice). E 'superbamente luce - uno script 1.3KB minified sfruttando il nucleo YUI 3, l'architettura a plugin , e tastiera / messa a fuoco utilità di gestione. Inoltre, è semplice da usare. Lo ha condiviso la Galleria 3 YUI - si può utilizzare sotto licenza BSD YUI o si può afferrare la fonte da GitHub e utilizzare il codice di Julien come punto di partenza per il vostro progetto.

Julien non ha avuto il tempo di documentare il widget completamente, così ho scritto un caso comune utilizzo .

Prendete un semplice pezzo di markup:

 <- Attivatore di menu -> <a href="http://developer.yahoo.com/yui/" id="optionsmenu"> YUI-Related Links </ a> <-! Contenuto del menu -> <div id="optionsmenucontainer" class="yui-cssreset"> <li> <a href="http://developer.yahoo.com/yui/"> YUI documentazione </ a> </ li> <li> <a href="http://yuilibrary.com"> YUI sito del progetto </ a> </ li> <li> href="http://yuilibrary.com/forum/"> discussione <a YUI forum </ a> </ li> <a <li> href="http://yuiblog.com"> YUIBlog </ a> </ li> <li> <a href = "http://developer.yahoo .com / yui / Teatro / "> YUI Theater </ a> </ li> <a <li> href="http://yuilibrary.com/gallery/"> YUI 3 Gallery </ a> </ li> <li> <a href="http://twitter.com/yuilibrary"> @ YUILibrary su Twitter </ a> </ li> <li> <a href = "http://twitter.com/miraglia/yui / soci "> @ YUILibrary sviluppatori su Twitter </ a> </ li> </ ul> </ div> 

E il seguente script:

 <Tipo di script = "text / javascript" 
 src = "http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.10-01/
 costruire / gallery-simple-menu / gallery-simple-menu-min.js "> </ script>

 <script language="javascript">
 YUI (). Utilizzare ('gallery-semplice-menu', function (Y) {
     Y.one ('optionsmenu #') il tappo (Y.Plugin.SimpleMenu).;
 });
 </ Script>

Ciò che rimane è semplicemente un po 'stile CSS. Widget di Julien si applica il .menu-visible classe quando il menu viene attivato, un approccio semplice è quello di impostare la posizione di default del contenitore menù di assoluto e spostarlo fuori dallo schermo. Poi, nel vostro .menu-visible dichiarazione, rimuovere l'offset e consentire il widget per posizionare il contenitore sotto il suo elemento attivatore:

 # {Optionsmenucontainer
     a sinistra:-4500px;
     position: absolute;
 }

 # Optionsmenucontainer.menu-visibile {
     left: auto;
 }

Clicchi attraverso per provare questo esempio in azione.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!