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

イメージドロップダウン

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

このサンプルは、スタイルシートだけでドロップダウンメニューを表示します。トップメニューとサブメニューにテキストの代わりにイメージを表示しています。サブメニューを「ぼかした」状態で表示してマウスを移動すると「ぼかし」を消します。

サブメニューには次のようなイメージを用意してマウスを移動したら上のイメージから下のイメージに切り替えます。

#nav :hover ul li a.apples
{
  background: url(fruit/apples2.jpg); /* サブメニュー */
}
#nav :hover ul.sub li a:hover
{
  background-position: 0 50px; /* イメージの切り替え */
  position: relative;
}

<!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</title>
  <link href="DhtmlAdvanced/cssPlayImageDropdown/StyleSheet.css" rel="stylesheet" type="text/css" />
 </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部

ボックス内のスタイルシート(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;
}
#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);
}
#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);
}
#nav :hover ul.sub li a:hover
{
  background-position: 0 50px;  /* horizontal vertical */
  position: relative;
}
#nav :hover ul.sub li a:hover b
{
  left: 100px;
  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/cssPlayImageDropdown/StyleSheet.css" rel="stylesheet" type="text/css" />

ボックス内のコードを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="opacity" src="DhtmlAdvanced/cssPlayImageDropdown/fruits.jpg" alt="" />
</div>

コメント・提案の投稿！

名前
メール
件名
本文

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

イメージドロップダウン

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

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

イメージドロップダウン

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!