開発（実験）スクリプト用にバーチャルホストを作ったので、以前作っていたサンプルをそちらに移した。
その際、メニューが味気ないと思い、jQueryを使って階層メニューを作った。
試行錯誤はあったものの、結果的にはシンプルに実装できた。と思う。
参考にしたサイト
伸び縮みはjQueryで。
start.jsから一部抜粋
// for menu
$("#menu ul.list-item-list").css({ display:"none" });
var effect_speed = 'fast';
$("#menu ul.list li.list-item").hover( function () {
$(this).children("ul.list-item-list").slideDown(effect_speed);
}, function () {
$(this).children("ul.list-item-list").slideUp(effect_speed);
});hoverの挙動はスタイルシートで、それぞれ実装した。
devel.cssから一部抜粋
/* for menu */
#menu, #menu ul, #menu ul li
{
margin: 0;
padding: 0;
}
#menu
{
height: 40px;
position: relative;
}
#menu ul
{
list-style:none;
}
#menu ul.list
{
float:left;
position: absolute;
top: 0;
left: 0;
}
#menu ul li.list-item
{
color: #192a33;/* HSV 201 50 20 */
background-color: #e6d7c3;/* HSV 34 15 90 */
float:left;
position: relative;
text-align: center;
width: 260px;
height: 40px;
line-height: 40px;
}
#menu ul li.list-item p
{
font-weight: bold;
margin: 0;
padding: 0;
}
#menu ul li.list-item:hover
{
color: #e6d7c3;/* HSV 34 15 90 */
background-color: #665f57;/* HSV 34 15 40 */
}
#menu ul.list-item-list li.list-item
{
color: #192a33;/* HSV 201 50 20 */
background-color: #e6d7c3;/* HSV 34 15 90 */
}
コメントする