yahoo ui library 「メニュー」 その2

今回はメニューをグループ化したり、サブメニューを作ったりするサンプルです。
サンプルを見る
*サンプルはver0.12を使用

まずはソースをご覧ください。
[html]

メニューのサンプル

YAHOO.example.onMenuAvailable = function(p_oEvent) {
var oMenu = new YAHOO.widget.Menu(“basicmenu”,{x:10,y:20,showdelay:250,hidedelay:750 });
//x,yはそれぞれ表示位置。showdelay,hidedelayは出現、消滅までのミリ秒(1000で1秒)
oMenu.render();
function cp_showmenu(p_oEvent) {
oMenu.show();
}
YAHOO.util.Event.addListener(“menu1”, “mouseover”, cp_showmenu);
}
YAHOO.util.Event.onAvailable(“basicmenu”, YAHOO.example.onMenuAvailable);

body{
padding:0px;
margin:0px;
}
.cp_menu{
border-left:1px #ccc solid;
background:#ee0;
padding:3px;
display:inline;
position:relative;
float:left;
}
div.yuimenu {
position:absolute;
visibility:hidden;
}
div.yuimenu h6 {
font-weight:bold;
}

[/html]
補足
●サブメニューはdiv,ul,lIで入れ子にして作っていくのでcssが外れてもリストの入れ子になります。
●グループのタイトルのスタイルはdiv.yuimenu h6という指定で変更できるようです。
なぜh6なのかは謎ですが… タイトル部分とメニュー部分が分かれているのでスタイルをつけやすそうです。
●24行目mouseoverするとメニューを出す関数を呼び出し。clickでも指定可能。
●26行目onAvailableというのがよく分からなかったので調べてみると指定のIDがあれば関数を実行するもののようです。
以下 機械翻訳…
供給されたIDがある項目が見つけられるとき、供給された回収を実行します。 これは、ページがロードされるときできるだけ早く振舞いを実行するのに使用されることになっています。 あなたがイニシャルページ荷重の後にこれを使用すると、それに要素のための一定時間の間、投票するでしょう。 それが投票する回数と頻度は構成可能です。 デフォルトで、それは10秒投票するでしょう。

結果scriptをhead内にまとめて入れることができて、すっきりしました。
次回はメニューのデザイン部分をテコ入れしたいと思います。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中