プルダウン時の最上部メニューの画像置換について

質問

お世話になります。サイト製作初心者のpeace193と申します。

以下のサイトを参考に自分なりにカスタマイズしました。本来はテキストであるタグ最上部のli内はクラスで画像に変え、ホバー時にCSSで個々に他の画像に置き換わるようにしました。

http://www.leigeber.com/2008/11/drop-down-menu/

そこで質問なのですが、プルダウンした時に、最上部のメニューを個別にホバーした時の画像のままにしたいのですが、このサンプルを生かす場合、どのようなCSS、またはjavascriptが必要でしょうか？（例えば、menu02-01-01やmenu03-01にホバーしたとき、それぞれmenu02のホバー画像を維持、menu03のホバー画像を維持。）

参考サイト上では

ul.menu .menulink:hover, ul.menu .menuhover {background: url(/images/header_over.gif)}

で変えているようですが、私はメニュー毎に置き換わる画像を変えたいのです。

お忙しいところ恐縮ですが、ご教示いただけると幸いです。

<ul class="menu" id="menu">

<li><a href="#" class="menu01"></a></li>

<li><a href="#" class="menu02"></a>

<ul>
<li><a href="#" class="sub">menu02-01</a>
<ul>
<li><a href="#">menu02-01-01</a></li>
<li><a href="#">menu02-01-02</a></li>
</ul>

<li><a href="#">menu02-02</a></li>
<li><a href="#">menu02-03</a></li>
</ul>

</li>

<li><a href="#" class="menu03"></a>
<ul>
<li><a href="#">menu03-01</a></li>
<li><a href="#">menu03-02</a></li>
<li><a href="#">menu03-03</a></li>
</ul>
</li>
<li><a href="#" class="menu04"></a></li>
</ul>

回答No.1

fujillin · ベストアンサー

オリジナルがそのように作られていないので面倒ですね。

バックグラウンドを替えるのにCSSのhoverを利用して行っていますが、サブメニューがある時にサブメニュー上にカーソルが移動するとhoverが効かなくなるので、そのままだと元の画像に戻ってしまいます。
オリジナルではそれを防止するために一時的にmenuhoverというクラス設定をすることでバックグラウンドを変更しています。
この時のクラス名（="menuhover"）はユーザ指定が可能ですが、メニュー全体で共通となっているので個別に使い分けることができません。

＜方法1＞
CSSでバックグラウンドを変えているのをスクリプトで直接変更するようにして、メニュー開の時に「画像開」をメニューを閉じた時に「画像閉」をそれぞれのメニューで表示するようにする。

この方法だと、スクリプトのCSS設定部分を削除して、画像変更部分を付け加えるという作業になるので、かなりの部分を作り直す感じ。まぁ、最初から作るのと大してかわらないかも…

＜方法2＞
暫定的なクラス名（menuhover）を個別指定できるようにするために、スクリプト内のインデックスを利用してmenuhover0、menuhover1…みたいにしてしまい、それに対応するCSSを用意しておく。

この方法でテストしてみたところ、一応、個別に画像の使い分けが可能になります。
インデックス番号の決まり方が「menu」内のUL要素の番号がその親要素直下のリンクタグに対して適用されることになるので、番号を考えるのが面倒という欠点があります。（↓例のように番号がメニューの構成に応じて飛び飛びになる）

とりあえず、方法2の場合の例（配布もとのサンプルを例にした場合）
--- CSS ---
/*
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
*/
ul.menu .menu0:hover, ul.menu .menuhover0 {background:url(images/bg0.gif)}
ul.menu .menu1:hover {background:url(images/bg1.gif)}
ul.menu .menu2:hover, ul.menu .menuhover4 {background:url(images/bg2.gif)}
ul.menu .menu3:hover, ul.menu .menuhover6 {background:url(images/bg3.gif)}

menu0～menu3は順番に0～3に対応。これに対応する内部インデックスはサンプルの構成の場合0、なし、4、6となります。
menu1にはサブメニューがないので、menuhoverもありません。（ドロップダウンがないのでインデックス番号がない）

--- javascript ---

dd.prototype.stの中でclass名を一時設定している部分と、それを元に戻している部分の2箇所のaをa+xに変更（xはインデックス番号、aはユーザ指定の一時設定用クラス名の変数）

--- HTML ---
↑のCSSの1行上にmenulinkの指定（通常状態の指定）がありますが、これを残すのならclass設定はmenulinkに追加する形で、残さないならmenulinkは不要になりますので、単独でmenu0、menu1…のようにしてあげれば良いです。
（menulinkを残した例：構成のみで項目は省略）
<ul class="menu" id="menu">
<li><a href="#" class="menulink menu0">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="menulink menu1">Non-Dropdown</a></li>
<li>
<a href="#" class="menulink menu2">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink menu3">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
</ul>
</li>
</ul>

お礼

fujillin様

多忙な中ご回答下さり、誠にありがとうございました！

fujillin様の書かれた方法２を試し、

CSSのホバー時クラスにmenuhoverでナンバリングし、scriptファイル内でaのみのところに、

p.className+=' '+a+x;
p.className=p.className.replace(a+x,'')

を加える事で成功致しました！

私にとっては凄く嬉しい瞬間でした！感謝の念で一杯でございます。本当にありがとうございました！

厚かましいですが、機会がございましたら、方法１も教えていただけると幸いです。

取り急ぎお礼まで。

回答No.2

yyr446

ご提示のHTMLを以下の様にして、
<ul class="menu" id="menu">
<li><a href="#" class="menulink menu01"></a>
</li>

<li><a href="#" class="menulink menu02"></a>
<ul>
<li><a href="#" class="sub">menu02-01</a>
<ul>
<li><a href="#">menu02-01-01</a></li>
<li><a href="#">menu02-01-02</a></li>
</ul>
<li><a href="#">menu02-02</a></li>
<li><a href="#">menu02-03</a></li>
</ul>
</li>

<li><a href="#" class="menulink menu03"></a>
<ul>
<li><a href="#">menu03-01</a></li>
<li><a href="#">menu03-02</a></li>
<li><a href="#">menu03-03</a></li>
</ul>
</li>

<li><a href="#" class="menulink menu04"></a>
</li>

</ul>

CSSは以下の様にします。
body {margin:25px; font:11px Verdana,Arial; background:#eee}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
//ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(images/header.gif); width:134px}
//以下でホバー間の画像をセットします。
ul.menu .menu01.menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(image/menu01.gif); width:134px}
ul.menu .menu02.menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(image/menu02.gif); width:134px}
ul.menu .menu03.menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(image/menu03.gif); width:134px}
ul.menu .menu04.menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(image/menu04.gif); width:134px}

//ul.menu .menulink:hover, ul.menu .menuhover{background:url(images/header_over.gif)}
//以下でホバー時の画像をセットします。
ul.menu .menu01.menulink:hover, ul.menu .menuhover {background:url(images/menu01H.gif)}
ul.menu .menu02.menulink:hover, ul.menu .menuhover {background:url(images/menu02H.gif)}
ul.menu .menu03.menulink:hover, ul.menu .menuhover {background:url(images/menu03H.gif)}
ul.menu .menu04.menulink:hover, ul.menu .menuhover {background:url(images/menu04H.gif)}

ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

お礼

yyr446様

多忙な中ご回答下さり、誠にありがとうございました！

fujillin様とは別の方法という事で、勉強になりました。次の機会に是非試させて頂きます！本当にありがとうございました！

取り急ぎお礼まで。