JavaScript + Ajax 実践サンプル集 - イメージドロップダウン v2

イメージドロップダウン v2　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのanimate()apiを使用してサブメニューを表示するときアニメーション化しています。マウスをトップメニューからサブメニューに移動するとサブメニューのイメージがアニメーション化されて表示されます。

このサンプルは、jQueryのanimate() apiを使用して実装しています。

$('.sub li a').hover(function() {
  $(this).stop()
  .animate({ opacity: 0.6 }, 550)
  .animate({ opacity: 1.0 }, 50)
  .css({ backgroundPosition: "0px 50px" })
},
  function() {
    $(this).css({ backgroundPosition: "0 0" });     
  });

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSSplay menus - image dropdown menu v2</title>
<link href="DhtmlAdvanced/cssPlayImageDropdown2/StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {

$('#nav').hover(function() {
      $('.bgfruit').animate({ opacity: 0.4 }, 750);
    },
    function() {
      $('.bgfruit').animate({ opacity: 1.0 }, 750);
    });

$('.sub li a').hover(function() {
      $(this).stop()
      .animate({ opacity: 0.6 }, 550)
      .animate({ opacity: 1.0 }, 50)
      .css({ backgroundPosition: "0px 50px" })
    },
      function() {
        $(this).css({ backgroundPosition: "0 0" });     
      });

});    
</script>
</head>
<body>
<div id="wrapper">
  <ul id="nav">
    <li class="top"><a href="#nogo" class="fruit"><b>Fruit</b></a>
      
      <ul class="sub">   
        <li><a href="#nogo" class="apples"><b>Apples</b></a></li>
        <li><a href="#nogo" class="oranges"><b>Oranges</b></a></li>
        <li><a href="#nogo" class="pears"><b>Pears</b></a></li>
        <li><a href="#nogo" class="bananas"><b>Bananas</b></a></li>
        <li><a href="#nogo" class="lemons"><b>Lemons</b></a></li>   
      </ul>
      
    </li>
    <li class="top"><a href="#nogo" class="veg"><b>Vegetables</b></a>
      
      <ul class="sub">
        <li><a href="#nogo" class="potatoes"><b>Potatoes</b></a></li>
        <li><a href="#nogo" class="carrots"><b>Carrots</b></a></li>
        <li><a href="#nogo" class="turnips"><b>Turnips</b></a></li>
        <li><a href="#nogo" class="parsnips"><b>Parsnips</b></a></li>
      </ul>
      
    </li>
    <li class="top"><a href="#nogo" class="greens"><b>Greens</b></a>
      
      <ul class="sub">
        <li><a href="#nogo" class="cabbages"><b>Cabbages</b></a></li>
        <li><a href="#nogo" class="cauliflower"><b>Cauliflowers</b></a></li>
        <li><a href="#nogo" class="beans"><b>Green Beans</b></a></li>
        <li><a href="#nogo" class="sprouts"><b>Sprouts</b></a></li>
        <li><a href="#nogo" class="peas"><b>Peas</b></a></li>
        <li><a href="#nogo" class="broccoli"><b>Broccoli</b></a></li>
      </ul>
      
    </li>
    <li class="top"><a href="#nogo" class="nuts"><b>Nuts</b></a>
      
      <ul class="sub">
        <li><a href="#nogo" class="almonds"><b>Almonds</b></a></li>
        <li><a href="#nogo" class="cashews"><b>Cashews</b></a></li>
        <li><a href="#nogo" class="walnuts"><b>Walnuts</b></a></li>
        <li><a href="#nogo" class="pistachios"><b>Pistachios</b></a></li>
      </ul>
      
    </li>
  </ul>
  <img class="bgfruit" src="DhtmlAdvanced/cssPlayImageDropdown/fruits.jpg" alt="" />
</div>

</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
$(function() {

  $('#nav').hover(function() {
    $('.bgfruit').animate({ opacity: 0.4 }, 750);
  },
  function() {
    $('.bgfruit').animate({ opacity: 1.0 }, 750);
  });

  $('.sub li a').hover(function() {
    $(this).stop()
    .animate({ opacity: 0.6 }, 550)
    .animate({ opacity: 1.0 }, 50)
    .css({ backgroundPosition: "0px 50px" })
  },
    function() {
      $(this).css({ backgroundPosition: "0 0" });     
    });

});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/image_dropdown.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#nav
{
  padding: 0;
  margin: 0;
  list-style: none;
  height: 50px;
  position: relative;
  z-index: 200;
  font-family: arial, verdana, sans-serif;
  width: 608px;
}
#nav li.top
{
  display: block;
  float: left;
}
#nav li a
{
  display: block;
  float: left;
  height: 50px;
  width: 150px;
  border: 1px solid #888;
  border-color: #ddd #888 #000 #ccc;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
}
#nav li a b
{
  margin-left: -999px; /* hide text */
}
#nav li a.fruit
{
  background: url(fruit/fruit.jpg);
}
#nav li a.veg
{
  background: url(veg/veg.jpg);
}
#nav li a.greens
{
  background: url(greens/greens.jpg);
}
#nav li a.nuts
{
  background: url(nuts/nuts.jpg);
}
#nav li:hover a, #nav a:hover
{
  background-position: 0 50px; /* horizontal vertical */
}
#nav table
{
  position: absolute;
  top: 0;
  left: 0;
  border-collapse: collapse;
  padding: 0;
  width: 0;
  height: 0;
  margin: -1px;
}
#nav .sub
{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav li:hover
{
  position: relative;
  z-index: 200;
}
#nav a:hover
{
  position: relative;
  white-space: normal;
  z-index: 200;
}
#nav :hover ul.sub
{
  left: 0;
  top: 52px;
  background: #edb;
  width: 152px;
  height: auto;
  z-index: 300;
}
#nav :hover ul.sub li
{
  display: block;
  height: 52px;
  position: relative;
  float: left;
  width: 152px;
  font-weight: normal;
}
#nav :hover ul.sub li a
{
  display: block;
  height: 50px;
  width: 150px;
  border: 1px solid #888;
  border-color: #ddd #888 #000 #ccc;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
}
#nav :hover ul.sub li a b
{
  position: absolute;
  left: -9999px;
  margin: 0;
}

/* fruit 
---------------------------*/
#nav :hover ul li a.apples
{
  background: url(fruit/apples2.jpg);
}
#nav :hover ul li a.oranges
{
  background: url(fruit/oranges2.jpg);
}
#nav :hover ul li a.pears
{
  background: url(fruit/pears2.jpg);
}
#nav :hover ul li a.bananas
{
  background: url(fruit/bananas2.jpg);
}
#nav :hover ul li a.lemons
{
  background: url(fruit/lemons2.jpg);
}


/* veg 
---------------------------*/
#nav :hover ul li a.potatoes
{
  background: url(veg/potatoes2.jpg);
}
#nav :hover ul li a.carrots
{
  background: url(veg/carrots2.jpg);
}
#nav :hover ul li a.turnips
{
  background: url(veg/turnip2.jpg);
}
#nav :hover ul li a.parsnips
{
  background: url(veg/parsnip2.jpg);
}
#nav :hover ul li a.cabbages
{
  background: url(greens/cabbage2.jpg);
}
#nav :hover ul li a.cauliflower
{
  background: url(greens/cauliflower2.jpg);
}
#nav :hover ul li a.beans
{
  background: url(greens/beans2.jpg);
}
#nav :hover ul li a.sprouts
{
  background: url(greens/sprouts2.jpg);
}
#nav :hover ul li a.peas
{
  background: url(greens/peas2.jpg);
}
#nav :hover ul li a.broccoli
{
  background: url(greens/broccoli2.jpg);
}
#nav :hover ul li a.almonds
{
  background: url(nuts/almonds2.jpg);
}
#nav :hover ul li a.cashews
{
  background: url(nuts/cashews2.jpg);
}
#nav :hover ul li a.walnuts
{
  background: url(nuts/walnuts2.jpg);
}
#nav :hover ul li a.pistachios
{
  background: url(nuts/pistachios2.jpg);
}

/* change image
----------------------------*/
/*
#nav :hover ul.sub li a:hover
{
  background-position: 0 50px;  
  position: relative;
}
*/

/* show text
-----------------------------*/
#nav :hover ul.sub li a:hover b
{
  left: 145px; /* 100xp */
  top: 15px;
  background: #fff;
  color: #000;
  border: 1px solid #888;
  display: none; /* block - hide text */
  width: 100px;
  height: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
}

img.bgfruit 
{
  width:608px; /* 620 x 250 */
  height:340px;  
}

/*
img.opacity
{       
  filter: alpha(opacity=40); 
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  -moz-opacity: 0.40;
  opacity: 0.4; 
  
}
*/

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="DhtmlAdvanced/cssPlayImageDropdown2/StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="wrapper">
  <ul id="nav">
    <li class="top"><a href="#nogo" class="fruit"><b>Fruit</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="sub">   
        <li><a href="#nogo" class="apples"><b>Apples</b></a></li>
        <li><a href="#nogo" class="oranges"><b>Oranges</b></a></li>
        <li><a href="#nogo" class="pears"><b>Pears</b></a></li>
        <li><a href="#nogo" class="bananas"><b>Bananas</b></a></li>
        <li><a href="#nogo" class="lemons"><b>Lemons</b></a></li>   
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#nogo" class="veg"><b>Vegetables</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="sub">
        <li><a href="#nogo" class="potatoes"><b>Potatoes</b></a></li>
        <li><a href="#nogo" class="carrots"><b>Carrots</b></a></li>
        <li><a href="#nogo" class="turnips"><b>Turnips</b></a></li>
        <li><a href="#nogo" class="parsnips"><b>Parsnips</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#nogo" class="greens"><b>Greens</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="sub">
        <li><a href="#nogo" class="cabbages"><b>Cabbages</b></a></li>
        <li><a href="#nogo" class="cauliflower"><b>Cauliflowers</b></a></li>
        <li><a href="#nogo" class="beans"><b>Green Beans</b></a></li>
        <li><a href="#nogo" class="sprouts"><b>Sprouts</b></a></li>
        <li><a href="#nogo" class="peas"><b>Peas</b></a></li>
        <li><a href="#nogo" class="broccoli"><b>Broccoli</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#nogo" class="nuts"><b>Nuts</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="sub">
        <li><a href="#nogo" class="almonds"><b>Almonds</b></a></li>
        <li><a href="#nogo" class="cashews"><b>Cashews</b></a></li>
        <li><a href="#nogo" class="walnuts"><b>Walnuts</b></a></li>
        <li><a href="#nogo" class="pistachios"><b>Pistachios</b></a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
  </ul>
  <img class="bgfruit" src="DhtmlAdvanced/cssPlayImageDropdown/fruits.jpg" alt="" />
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージドロップダウン v2　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージドロップダウン v2 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージドロップダウン v2　《プログラマーがネットで副収入を得る方法とは》