ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

メニューへのオンマウスで「メインビジュアルの切り替え」+「サブメニューのドロップダウン」をjQueryで実装する

ようやく勉強をする時間ができたので、jqueryのサンプルを作ってみた。
内容は、メインメニューへのオンマウスで、以下の2つを同時に実行するというもの。

  • メインビジュアルがクロスフェード
  • サブメニューがドロップダウン

サンプルということで、メインビジュアル・ボタンのデザインやクロスブラウザの対応は割愛させていただきます。とりあえず、サンプルを見てください。

> サンプル

企業サイトでも使えそうなサンプルだと思いますが、いかがでしょうか。
では、コメントアウトで構文のご説明。

jquery

$(function() {


// メインビジュアルのアニメーションスピードをコントロール

var fadeinSP = 300; //フェードインスピード
var fadeoutSP = 300; //フェードアウトスピード


// サブメニューのアニメーションスピードをコントロール

var openSP = 100; //表示スピード
var closeSP = 100; //非表示スピード


// メインビジュアルのdivタグとサブメニューを非表示

$('#main_view div').hide();
$('#main_nav ul li ul').hide();


// 「メインメニュー1」にオンマウスでdiv.nav1_viewをフェードイン

$('#main_nav ul li#nav1').hover(
function () {
$('#main_view div.nav1_view').stop(true, true).fadeIn(fadeinSP);
}, function () {
$('#main_view div.nav1_view').stop(true, true).fadeOut(fadeoutSP);
}
);


// 「メインメニュー2」にオンマウスでdiv.nav2_viewをフェードイン

$('#main_nav ul li#nav2').hover(
function () {
$('#main_view div.nav2_view').stop(true, true).fadeIn(fadeinSP);
}, function () {
$('#main_view div.nav2_view').stop(true, true).fadeOut(fadeoutSP);
}
);


// 「メインメニュー3」にオンマウスでdiv.nav3_viewをフェードイン

$('#main_nav ul li#nav3').hover(
function () {
$('#main_view div.nav3_view').stop(true, true).fadeIn(fadeinSP);
}, function () {
$('#main_view div.nav3_view').stop(true, true).fadeOut(fadeoutSP);
}
);


// 「メインメニュー4」にオンマウスでdiv.nav4_viewをフェードイン

$('#main_nav ul li#nav4').hover(
function () {
$('#main_view div.nav4_view').stop(true, true).fadeIn(fadeinSP);
}, function () {
$('#main_view div.nav4_view').stop(true, true).fadeOut(fadeoutSP);
}
);
// ※liタグのオンマウスで動作するように設定することで、ポインターがサブメニューに移動しても、メインビジュアルを維持し続けます。
//  li aタグに設定すると、ポインターがサブメニューに移動した時にメインビジュアルがデフォルトの状態に戻せます。


// メインメニューのliタグへのオンマウスでサブメニューを表示

$('#main_nav ul li').hover(
function () {
$(this).children('ul').stop(true, true).slideDown(openSP);
}, function () {
$(this).children('ul').stop(true, true).slideUp(closeSP);
}
);

});

 

css

	*{
		margin:0;
		padding:0;
	}
	#body{
		margin:0 auto;
		text-align:center;
	}
	/* デフォルトのメインビジュアル設定 */
	#main_view{
		position:relative;
		width:798px;
		height:250px;
		margin:30px auto 0;
		border:solid 1px #ccc;
		border-bottom:none;
		text-align:center;
		font-size:120%;
	}
	/* メインメニューへのオンマウスで表示されるdivタグの初期設定 */
	#main_view div{
		position:absolute;
		width:798px;
		height:250px;
		top:0;
		left:0;
	}
	/* メインメニュー1へのオンマウスで表示されるdivタグの設定 */
	#main_view div.nav1_view{
		background-color:#FFCC66;
	}
	/* メインメニュー2へのオンマウスで表示されるdivタグの設定 */
	#main_view div.nav2_view{
		background-color:#CCFF99;
	}
	/* メインメニュー3へのオンマウスで表示されるdivタグの設定 */
	#main_view div.nav3_view{
		background-color:#f5f5f5;
	}
	/* メインメニュー4へのオンマウスで表示されるdivタグの設定 */
	#main_view div.nav4_view{
		background-color:#ccffff;
	}
	#main_nav{
		width:800px;
		margin:0 auto;
		text-align:center;
	}
	#main_nav ul{
		list-style:none;
	}
	#main_nav ul li{
		display:inline;
		float:left;
		width:199px;
		border:solid 1px #ccc;
		border-right:none;
	}
	#main_nav ul li.end{
		border-right:solid 1px #ccc;
		width:198px;
	}
	#main_nav ul li a{
		display:block;
		padding:1em 0;
		background-color:#f5f5f5;
	}
	#main_nav ul li a:hover{
		background-color:#fff;
	}
	#main_nav ul li ul{
		position:absolute;
		width:199px;
		top:3em;
		left:0;
		margin-left:-1px;
		border:solid 1px #ccc;
		border-top:none;
	}
	#main_nav ul li ul li{
		display:block;
		width:100%;
		float:none;
		border:none;
		text-align:left;
	}
	#main_nav ul li ul li a{
		float:none;
		padding:5px 10px;
		zoom:1;
	}
	.clear{
		height:0;
		line-height:0;
		clear:both;
	}

 

HTML


<!-- メインビジュアル -->
<div id="main_view">
	<div class="nav1_view"></div>
	<div class="nav2_view"></div>
	<div class="nav3_view"></div>
	<div class="nav4_view"></div>
</div>

<!-- サブメニュー -->
<div id="main_nav">
	<ul>
        <li id="nav1"><a href="#">メインメニュー1</a>
        	<ul>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            </ul></li>
        <li id="nav2"><a href="#">メインメニュー2</a>
        	<ul>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            </ul></li>
        <li id="nav3"><a href="#">メインメニュー3</a>
        	<ul>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            </ul></li>
        <li id="nav4" class="end"><a href="#">メインメニュー4</a>
        	<ul>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            	<li><a href="#">サブメニュー</a></li>
            </ul></li>
    </ul>
<br class="clear">
</div>

あとは、div内に画像を配置するなり、CSSでコントールするなり、思い思いにご設定くだせえ。
でも、もっとスマートな方法があるような気が。もっと勉強しなければ。

投稿日
2012年2月21日
カテゴリー
JavaScript

コメントを残す

デザイン・ポータルサイト事業デザインオフィス blow→in
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント