jQueryを使用した、マウスオーバーでメニューをバウンドして広げて表示するチュートリアル

jQueryを使用した、マウスオーバーでメニューをバウンドして広げて表示するチュートリアル

言葉ではなかなか伝え方が難しいですが、マウスオーバー時に要素をストンと下に広げて表示し説明等をみせるようにするチュートリアルを参考にサンプルを作ってみました。動きはデモを見て頂いた方が分かりやすいですね。

How to Make a Smooth Animated Menu with 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;
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能