jQueryを使ってマウスホバー時に開閉して中のリストが出現するナビゲーションを作ってみる

2008/09/02

カテゴリ：: jQuery plugin自作

タグ：: jquery; javascript; ナビゲーション

マウスホバー時に開閉して中のリストが出現するナビゲーション

なんとなく、今回の案件で使っているのを載せておきます。

ちょっとばかり、動作に不満はあるのですが、
とりあえずサンプルを載せておきます。

マウスのホバーで開閉するナビゲーションのサンプル

■ サンプルHTML

<ul id="samp-nav">
	<li class="over">
		<img src="samp.png" class="over" />
		<ul>
			<li>
				<a href="#">
					<img src="samp.png" class="roll" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="samp.png" class="roll" />
				</a>
			</li>
		</ul>
	</li>
	<li class="over">
		<img src="samp.png" class="over" />
		<ul>
			<li>
				<a href="#">
					<img src="samp.png" class="roll" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="samp.png" class="roll" />
				</a>
			</li>
		</ul>
	</li>
	<li class="over">
		<img src="samp.png" class="over" />
		<ul>
			<li>
				<a href="#">
					<img src="samp.png" class="roll" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="samp.png" class="roll" />
				</a>
			</li>
		</ul>
	</li>
</ul>

少しわかりづらい構造になっているかもしれないが、
一番外側にulで、liの中身に、
imgともう一つulのまとまりが入っている構造だ。

最初はdlのまとまりで、dtの中にimg、
ddの中にulのまとまりを入れていた。
しかし、今のliにあたるところでdlのまとまりを作らなければ
同じようなスクリプトをつけたときの挙動が上手くいかなくなった。

簡単にスクリプトの説明もすると、
今回のは外側のliにマウスホバーすると、
中のulのまとまりが出現するというスクリプトになっている。

同様の事で、dtにホバーしたらddが出現するというのにしたが、
ddにマウスが移動した時に、ddが再び閉じてしまうということになった。

失敗サンプル

<dl>
  <dt><img /></dt>
  <dd>
    <ul>
      <li></li>
      <li></li>
    </ul>
    </dd>
  
  <dt><img /></dt>
  <dd>
    <ul>
      <li></li>
      <li></li>
    </ul>
    </dd>
</dl>

もしも上手く動作させるようにするなら、
以下のようなHTMLにしておくとよい。

サンプルその２

<dl>
  <dt><img /></dt>
  <dd>
    <ul>
      <li></li>
      <li></li>
    </ul>
    </dd>
</dl>
<dl>
  <dt><img /></dt>
  <dd>
    <ul>
      <li></li>
      <li></li>
    </ul>
    </dd>
</dl>

dlのまとまりをたくさん作るようになるだけだが、
これだけでもスクリプトのつくりが変わってくる。

■ サンプルCSS

ul#samp-nav li{
	margin:0;
	padding:0;
	display:block;
	width:164px;/*画像の幅*/
}

■ サンプルスクリプト

/*画像のロールオーバー*/
$(function(){
    $("img.roll").each(function() {
        var off = this.src;
        var dot = this.src.lastIndexOf('.');
        var on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4);
        $(this).hover(
            function() { this.src = on; },
            function() { this.src = off; });
    });
});

/*Hover時のイベント*/
$(function(){
    $("ul#samp-nav ul").hide();
    $("ul#samp-nav li.over").hover(
        function () {
            index = $("ul#samp-nav li.over").index(this);
            $("img.over").eq(index).next().show();
        }, 
        function () {
           $("img.over").eq(index).next().hide();
        }
    );
});

今回のサンプルだが、上の方のマウスオーバーは以前にも紹介しているので、
（二つの画像とCSSやjQueryで表現する３種類のロールオーバー）
そちらを読んでください。

今回のですが、先ほども書いたように、
一番外側のliにホバーすると、
liの中に入れたulが見えるようになるというスクリプトです。

ホバーした部分のulだけを出現させるようにしたいので、
変数でどこにホバーしたのかのインデックスを取り、
そのインデックスにあたるulを出現させるという仕組みだ。