こんにちは。
まずは、レイアウトよりも動作に注目した css 作成を行います。
ie6 しか対応していません。他はいずれ。
<li> へのマウスオーバーを検知させるために、以下のような javascript を読み込ませ
ます。li:hover が ie で使えないからです。ff なら有効です。
<script src="prototype.js" type="text/javascript"></script>
<script src="event-selectors.js" type="text/javascript"></script>
<script src="ddm.js" type="text/javascript"></script>
---ddm.js---
Event.observe (window, 'load', init, false);
var Rules =
{
'ul.navlist': function (el) {
$A(el.childNodes).each (function(li) {
if (li.tagName == 'LI') {
li.onmouseover = function () {Element.addClassName (li, 'over')}
li.onmouseout = function () {Element.removeClassName (li, 'over')}
}
});
}
}
function init () {
EventSelectors.start (Rules);
}
---ddm.js---
次に、以下の css を読み込ませます。この適用結果は添付画像のようになりま
す。一応、マウスオーバーで nest <ul> を表示できるようになりました。
ul {
list-style-type: none;
margin: 0;
width: 100%;
}
.navlist li {
float: left;
height: 2em;
line-height: 2em;
}
.navlist {
position: relative;
background-color: #bfbfbf;
}
.navlist .subnavlist {
display: none;
position: absolute;
top: 2em;
left: 0;
background-color: #dfdfdf;
}
.navlist li.over .subnavlist,
.navlist li.current .subnavlist {
display: block;
}
.navlist li.over .subnavlist {
z-index: 10;
}
ここで気になる点は多々ありますが、その中で、
- 1段目と2段目の横幅が違う、
- nest <ul> をもたない1段目の <li> にマウスオーバーした時、2段目が表示されない、
- 各メニュー項目 (<li>) の幅を揃えたい、
というのを次回変更したいと思います。
p.s.
----
自分だったらこうする、という意見がありましたら書き込みお願いします。
css にへとへとなので、上手い人がやるともっと素敵なんでしょうが。
☆ A M B ☆
