ブログ

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

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

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

> サンプル

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

jquery

[javascript]
$(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);
}
);

});
[/javascript]
 

css

[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;
}
[/css]

HTML

[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>
[/html]

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