jQueryを使用した、マウスオーバーでメニューをバウンドして広げて表示するチュートリアル
言葉ではなかなか伝え方が難しいですが、マウスオーバー時に要素をストンと下に広げて表示し説明等をみせるようにするチュートリアルを参考にサンプルを作ってみました。動きはデモを見て頂いた方が分かりやすいですね。
参考記事の左の方の”Download”より、デモのファイルも丸ごとダウンロードできます。詳しく説明されていましたので、分かりやすかったです。
使い方のメモ
バウンドするアニメーションの部分はjQuery Easing Pluginを使用していますので、別途ダウンロードします。
jQuery Easing Plugin
HTMLの部分は、元の記事では下記のようにリスト形式でメニューを作り、P要素でメニューのデフォルトで表示する部分とサブテキストの部分とで分けています。P要素ではなくてもulでもよいです。
<ul> <li class="green"> <p><a href="#">Home</a></p> <p class="subtext">The front page</p> </li> <li class="yellow"> <p><a href="#">About</a></p> <p class="subtext">More info</p> </li> <li class="red"> <p><a href="#">Contact</a></p> <p class="subtext">Get in touch</p> </li> <li class="blue"> <p><a href="#">Submit</a></p> <p class="subtext">Send us your stuff!</p> </li> <li class="purple"> <p><a href="#">Terms</a></p> <p class="subtext">Legal things</p> </li> </ul>
メニューリストのCSSはli要素をフロートして横並びにします。
次にヘッド内でCSSファイルとjQuery本体とjQuery Easing Pluginを読み込みます。
続けて下記のコードをヘッド内で読み込みます。
マウスオーバー時に150px(最大時のメニューの高さ)拡張し、その拡張が終わる頃にバウンドするようになっています。そしてマウスアウト時に50px(元のメニューの高さ)に戻ります。
$(document).ready(function(){
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
サンプルdemo
実際にサンプルを作ってみました。
「作ってみたサンプルdemo」
サンプルのhead部分
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Smooth Animated Menu|memocarilog</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$(this).blur();
});
$("li").mouseover(function(){
$(this).stop().animate({height:'130px'},{queue:false, duration:800, easing: 'easeOutBounce'})
});
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:800, easing: 'easeOutBounce'})
});
});
</script>
</head>
サンプルのbody部分
<body> <ul> <li> <p><a href="#">Webdesign</a></p> <p class="sub">Webデザインに関してのページです。</p> </li> <li> <p><a href="#">Wordpress</a></p> <p class="sub">Wordpressに関してのページです。</p> </li> <li> <p><a href="#">jQuery</a></p> <p class="sub">jQueryに関してのページです。</p> </li> <li> <p><a href="#">Mac</a></p> <p class="sub">Macに関してのページです。</p> </li> <li> <p><a href="#">iPhone</a></p> <p class="sub">iPhoneに関してのページです。</p> </li> </ul> </body>
サンプルのcss部分
ul{
margin:0;
padding:0;
}
li{
width:120px;
height:50px;
float:left;
background-color: #7EA1B2;
color:#333;
text-align:center;
border: solid 1px #29596D;
display: block;
overflow:hidden;
}
a{
color:#333;
text-decoration:none;
}
p{
padding:0px 5px;
font-size: 15px;
}
.sub{
color:#fff;
padding:20px 10px 0 10px;
font-size: 11px;
border-top:dotted 1px #29596D;
}
No Comments & Tracbacks