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

今回はデザインを変更します。サンプルをご覧ください。
サンプルを見る
*サンプルはver0.12を使用

ほぼスタイルシートで設定できました。
ポイントはyahoo ui menuデフォルトの画像を変更する場合
17行目から21行目のようにスタイルで使用する画像のパスを宣言するようです。
ほぼスタイルシートで設定できました。
ポイントはyahoo ui menuデフォルトの画像を変更する場合
17行目から21行目のようにスタイルで使用する画像のパスを宣言するようです。
[html]

メニューのサンプル

YAHOO.widget.MenuItem.prototype.IMG_ROOT = “images/”;
// Change the path to the submenu indicator images for each menu item
YAHOO.widget.MenuItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH = “arr1.gif”;
YAHOO.widget.MenuItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH = “arr2.gif”;
YAHOO.widget.MenuItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH = “arr3.gif”;
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 {/*メニューの1番外のボックス*/
background-color:#E8F7FF;
border:solid 1px #c4c4be;
padding:0px;
font-size:1.2em;
left:-1000px;
}
div.yuimenu div.yuimenu{/*サブメニューのフォントサイズ*/
font-size:1em;
}
div.yuimenu h6 {/*グループのタイトル*/
font-weight:bold;
background-color:#CDEDFE;
padding-bottom:3px;
color:#09c;
}
div.yuimenu ul {/*メニューの外から2番目のボックス*/
border:solid 1px #c4c4be;
border-width:1px 0 0 0;
}
div.yuimenu li a{/*メニューリストのスタイル*/
color:#09c;
background:url(“images/liimg1.gif”) no-repeat 0px 0.4em;
padding-left:8px;
}
div.yuimenu li.selected{/*メニューリスト選択時*/
background-color:#09c;
}
div.yuimenu li.selected a.selected{/*メニューリスト選択時*/
text-decoration:none;
background:url(“images/liimg2.gif”) no-repeat 0px 0.4em;
}
div.yuimenu li.selected a.selected {/*メニューリスト選択時*/
color:#333;
}
div.yuimenu li.yuimenuitem img {/*サブメニューがある場合のアイコン画像*/
height:11px;
width:11px;
margin:0 -16px 0 0;
padding-left:10px;
border:0;
}

[/html]

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中