THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
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にしておくとよい。

サンプルその2

<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で表現する3種類のロールオーバー
そちらを読んでください。

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

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

■ サンプルプレビュー

  • ナビサンプル
    • ナビサンプル
    • ナビサンプル
  • ナビサンプル
    • ナビサンプル
    • ナビサンプル
  • ナビサンプル
    • ナビサンプル
    • ナビサンプル

今回のサンプルでは、.hideや.showを使ってみたが、
それぞれに速度をつけてみたり(slowやfast)
.slideUpや.slideDownなどでもいいと思います。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。