jQueryを使ったイメージメニューのチュートリアル

jQueryを使った、選択すると滑らかに展開する画像を使ったメニューの作り方です。


こちらの記事では、メニューにカーソルを乗せると選択したメニューの画像が横に広がって見せるタイプ1と、メニューにカーソルを乗せると選択したメニュー以外のメニューが縮小されて、選択したメニュー画像を大きく見せるタイプ2の作り方が紹介されています。

demo

タイプ1のデモ:Jquery Image Menu Example 1
タイプ2のデモ:JQuery Image Menu Example 2

デモのファイルもこちらの記事からダウンロードできます。

タイプ1のメニューの作り方

リスト形式のメニューをhtmlで作ります。

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>
    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="#">Urban</a></li>
  </ul>
</div>

CSSはfroatでliを横並びにして、メニューにしたい画像をliの背景に指定します。liのテキスト部分は-1000pxなどとし画面に表示されないように指定します。一番最後のメニューのクラスにmin-widthで最初に見せておく横幅を指定します。ulの横幅に展開した場合の横サイズを指定して、overflow: hiddenを指定し展開した時にメニュー全体の横幅が大きくならない様にします。

※CSSの詳しいコードは元記事をご参照下さい。

スライドのアニメーションにjQuery Easing Pluginを使用します。(ダウンロードできるファイル内にも入っています。)

htmlのヘッド内でjQuery本体とCSSとjQueryプラグインを下記のように読み込みます。

<link href="css/jimgMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>

続けてヘッド内で下記のコードを読み込みます。

スムースするアニメーションはeasing:”easeOutQuad”の箇所で指定を変更する事ができます。指定できるアニメーションとサンプルは”jQuery Easing – jQuery 日本語リファレンス”で確認できます。

<script type="text/javascript">
$(document).ready(function () {
  // find the elements to be eased and hook the hover event
  $('div.jimgMenu ul li a').hover(function() {    
  	//↑'div.jimgMenu ul li a'にメニューの要素名を指定
    // if the element is currently being animated
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad", complete: "callback"});
      //width: "310px"の箇所でホバー時に開く横幅を指定
      //duration: 450の箇所ではスムースするスピードを指定
    } else {
      // ease in quickly
      $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad", complete: "callback"})
     //width: "310px"の箇所でマウスアウト時の横幅を指定
      //duration: 400の箇所ではスムースするスピードを指定
    } else {
      // ease out slowly
      $(this).stop(':animated').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad", complete: "callback"});
    }
  });
});
</script>

作ってみたサンプル

作ってみたサンプルのデモ→Jquery Image Menu|memocarilog demo

サンプルのhead部分

<link href="example.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('div.jimgMenu ul li a').hover(function() {
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "400px"}, {duration: 850, easing:"easeOutExpo"});
    } else {
      $(this).stop().animate({width: "400px"}, {duration: 800, easing:"easeOutExpo"});
    }
  }, function () {
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "130px"}, {duration: 800, easing:"easeOutExpo"})
    } else {
      $(this).stop('animated:').animate({width: "130px"}, {duration: 850, easing:"easeOutExpo"});
    }
  });
});
</script>

サンプルのbody部分

<body>
<div class="jimgMenu">
  <ul>
    <li class="book"><a href="#">book</a></li>
    <li class="cup"><a href="#">cup</a></li>
    <li class="flower"><a href="#">flower</a></li>
    <li class="neko"><a href="#">neko</a></li>
  </ul>
</div>
</body>

サンプルのcss部分

body {
	margin:0;
	padding:0;
	color: #333;
}
.jimgMenu {
	position: relative;
	width: 870px;
	height: 290px;
	overflow: hidden;
	margin: 25px 0px 0px;
}

.jimgMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 290px;
	width: 1340px;
}

.jimgMenu ul li {
	float: left;
}

.jimgMenu ul li a {
	text-indent: -1000px;
	border-right: 2px solid #fff;
	display:block;
	overflow:hidden;
	width:130px;
	height: 290px;
}
.jimgMenu ul li.book a {
	background: url(image/books.jpg) no-repeat ;
}
.jimgMenu ul li.cup a {
	background: url(image/cup.jpg) no-repeat ;
}
.jimgMenu ul li.flower a {
	background: url(image/flower.jpg) no-repeat ;
}
.jimgMenu ul li.neko a {
	background: url(image/neko.jpg) repeat scroll 0%;
	min-width:400px;
}

Related Article

No Comments & Tracbacks

Leave a Comment

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


*


Categorys

Tags

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