Saetl.net

Simple And Easy TempLate

Image Menu with Jqueryの使い方

  1. 下記ページの 「Download Source」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--ダウンロードしたファイル-->
    <link rel="stylesheet" type="text/css" href="css/Image Menu with Jquery.css">
    </head> 
    

    サンプルのcssコード(サンプルのcssは改変しています)

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    body {
    	margin: 0;
    	padding: 0;
    	background: #fff;
    }
    #container {
    	width: 700px;
    	margin: 50px auto;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからImage Menu with Jqueryの設定*/
    
    .jimgMenu {
    	position: relative;
    	width: 670px;
    	height: 200px;
    	overflow: hidden;
    	margin: 25px 0px 0px;
    }
    .jimgMenu ul {
    	list-style: none;
    	margin: 0px;
    	display: block;
    	height: 200px;
    	width: 1340px;
    }
    .jimgMenu ul li {
    	float: left;
    }
    .jimgMenu ul li a {
    	text-indent: -1000px;
    	background: #FFFFFF none repeat scroll 0%;
    	border-right: 2px solid #fff;
    	cursor: pointer;
    	display: block;
    	overflow: hidden;
    	width: 78px;
    	height: 200px;
    }
    .jimgMenu ul li.landscapes a {
    	background: url(../images/landscapes.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.people a {
    	background: url(../images/people.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.nature a {
    	background: url(../images/nature.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.abstract a {
    	background: url(../images/abstract.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.urban a {
    	background: url(../images/urban.jpg) repeat scroll 0%;
    	min-width: 310px;
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.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>
    <!--Javascript追記-->
    <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() {
        
        // if the element is currently being animated (to a easeOut)...
        if ($(this).is(':animated')) {
          $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
        } else {
          // ease in quickly
          $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
        }
      }, function () {
        // on hovering out, ease the element out
        if ($(this).is(':animated')) {
          $(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
        } else {
          // ease out slowly
          $(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
        }
      });
    });
    </script>
    </body> 
    
    ・<body></body>内にコードを記述
      <div class="jimgMenu">
        <ul>
          <li class="landscapes"><a href="#nogo">Landscapes</a></li>
          <li class="people"><a href="#nogo">People</a></li>
          <li class="nature"><a href="#nogo">Nature</a></li>
          <li class="abstract"><a href="#nogo">Abstract</a></li>
          <li class="urban"><a href="#nogo">Urban</a></li>
        </ul>
      </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Image Menu with Jquery</title>
    <link rel="stylesheet" type="text/css" href="css/Image Menu with Jquery.css">
    </head>
    
    <body>
    <div id="container">
      <div class="jimgMenu">
        <ul>
          <li class="landscapes"><a href="#nogo">Landscapes</a></li>
          <li class="people"><a href="#nogo">People</a></li>
          <li class="nature"><a href="#nogo">Nature</a></li>
          <li class="abstract"><a href="#nogo">Abstract</a></li>
          <li class="urban"><a href="#nogo">Urban</a></li>
        </ul>
      </div>
    </div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.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 () {
    
      // find the elements to be eased and hook the hover event
      $('div.jimgMenu ul li a').hover(function() {
        
        // if the element is currently being animated (to a easeOut)...
        if ($(this).is(':animated')) {
          $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
        } else {
          // ease in quickly
          $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
        }
      }, function () {
        // on hovering out, ease the element out
        if ($(this).is(':animated')) {
          $(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
        } else {
          // ease out slowly
          $(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
        }
      });
    });
    </script>
    </body>
    </html>
    
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル