実験スクリプトの移植

開発（実験）スクリプト用にバーチャルホストを作ったので、以前作っていたサンプルをそちらに移した。その際、メニューが味気ないと思い、jQueryを使って階層メニューを作った。試行錯誤はあったものの、結果的にはシンプルに実装できた。と思う。参考にしたサイト

伸び縮みはjQueryで。 start.jsから一部抜粋

1
2
3
4
5
6
7
8
    // 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から一部抜粋

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* 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 */
}