雅虎用戶界面博客（YUIBlog）

在YUI 3畫廊：朱利安Lecomte的1.3KB SimpleMenu與鍵盤和ARIA支持

朱利安Lecomte寫SimpleMenu模塊上使用雅虎 搜索 （“更多”鏈接，使用此代碼）。 這是高檔的光-一個1.3KB縮小的腳本利用YUI 3核心， 插件架構和鍵盤/ 集中管理工具。 此外，它的簡單易用。 他的共享它在YUI 3畫廊-你可以用它在YUI的BSD許可證 ，也可以從GitHub搶來源和使用朱利安的代碼為出發點的自己的項目。

朱利安還沒有來得及記錄的部件完全，所以我寫了一個共同的用例 。

舉一個簡單的一塊標記：

  <！ - 菜單激活 - >
 <a href="http://developer.yahoo.com/yui/" id="optionsmenu"> YUI相關鏈接 </ A>

 <！ - 菜單內容 - >
 <div id="optionsmenucontainer" class="yui-cssreset">
 <UL>
 <LI> <a href="http://developer.yahoo.com/yui/"> YUI文檔 </ a> </ LI>
 <LI> <a href="http://yuilibrary.com"> YUI項目網站 </ a> </ LI>
 <LI> <a href="http://yuilibrary.com/forum/"> YUI論壇 </ A> </ LI>
 <LI> <a href="http://yuiblog.com"> YUIBlog </ A> </ LI>
 <LI> <a href="http://developer.yahoo.com/yui/theater/"> YUI劇院 </ A> </ LI>
 <LI> <a href="http://yuilibrary.com/gallery/"> YUI 3集</ a> </ LI>
 <LI> <a href="http://twitter.com/yuilibrary"> @ YUILibrary在Twitter </ A> </ LI>
 <LI> <a href="http://twitter.com/miraglia/yui/members"> @ YUILibrary開發商在Twitter </ A> </ LI>
 </ UL>
 </ DIV> 

而下面的腳本：

 <腳本類型 =“文/ JavaScript的” 
 SRC =“htt​​p://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.10-01/
建立/畫廊簡單菜單 /畫廊簡單的菜單 min.js“> </ SCRIPT>

中<SCRIPT LANGUAGE="JavaScript">
 YUI（）。使用（“畫廊簡單菜單”，功能（Y）{
     Y.one（'＃optionsmenu'）。插頭（Y.Plugin.SimpleMenu）;
 }）;
 </ SCRIPT>

剩下的只是一些CSS樣式。 朱利安的widget應用.menu-visible類時，菜單被激活，一個簡單的方法是設置菜單容器的默認位置絕對和移動關閉屏幕。 然後，在你的.menu-visible聲明，消除失調，並允許小部件定位容器根據其激活元素：

 ＃optionsmenucontainer {
    左：- 4500px;
    位置：絕對;
 }

 ＃optionsmenucontainer.menu可見 {
    左：汽車;
 }

點擊通過嘗試這個例子在行動。

查找談話： bloglines | technorati

共享和擴展： 書籤與del.icio.us | Digg它！ | 書籤交易！