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

Posted
2012-02-03

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

参照：Image Menu with Jquery – Design Tips & Techniques – Maui Blog

こちらの記事では、メニューにカーソルを乗せると選択したメニューの画像が横に広がって見せるタイプ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;
}

パンくずリストを表示してくれるWordPressのプラグイン、Breadcrumb NavXT

WordPressにGooglemapを表示するWpプラグイン-Google Maps Anywher

memocarilog