JavaScript + Ajax 実践サンプル集 - アニメーション付のドロップダウンメニュー

アニメーション付のドロップダウンメニュー　《プログラマーがネットで副収入を得る方法とは》

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

このサンプルは、CSS3のスタイルシートを利用してアニメーション付のドロップダウンメニューを表示します。マウスをトップメニューに移動するとサブメニューがアニメーション付でドロップダウンします。なお、ドロップダウンは影付きで表示されます。JavaScript/jQueryを一切使用しないでアニメーション化できるのは素晴らしいですね！

※このサンプルは、Google Chrome、Safariでご覧ください。IE, Firefoxでは、正常に動作しません。

このサンプルを編集して試してみる

<!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>CSS3 - The future now- animated menus</title>
  <link href="DhtmlAdvanced/animatedDropdownMenu/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="wrapper">
    <div id="info">
      <div class="menuHolder">
        <ul class="menu">
          <li class="first"><a href="#url">menu1</a></li>
          <li><a href="#url">menu2</a>
            <div>
              <ul>
                <li><a href="#url">menu2.1</a></li>
                <li><a href="#url">menu2.2 with description</a></li>
                <li><a href="#url">menu2.3</a></li>
                <li><a href="#url">menu2.4 with description</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#url">menu3</a>
            <div>
              <ul>
                <li><a href="#url">menu3.1</a></li>
                <li><a href="#url">menu3.2 with description</a></li>
                <li><a href="#url">menu3.3</a></li>
                <li><a href="#url">menu3.4 with description</a></li>
                <li><a href="#url">menu3.5</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#url">menu4</a>
            <div>
              <ul>
                <li><a href="#url">menu4.1</a></li>
                <li><a href="#url">menu4.2 with description</a></li>
                <li><a href="#url">menu4.3</a></li>
                <li><a href="#url">menu4.4 with description</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#url">menu5</a>
            <div>
              <ul>
                <li><a href="#url">menu5.1</a></li>
                <li><a href="#url">menu5.2 with description</a></li>
                <li><a href="#url">menu5.3</a></li>
                <li><a href="#url">menu5.4 with description</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#url">menu6<b></b></a></li>
          <li class="pad"><b></b></li>
        </ul>
      </div>
      
      <p class="info">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae urna quis nunc
        feugiat aliquet. Proin a est non augue scelerisque eleifend eget et sapien. Nunc
        et dolor leo, vitae tempor erat. Donec ipsum augue, placerat et scelerisque ut,
        convallis et metus. Aliquam nisl enim, rhoncus quis aliquet non, elementum viverra
        metus. Proin ante turpis, aliquet ac convallis quis, feugiat et magna. Etiam vitae
        metus dolor. Donec euismod lorem in urna tincidunt ac gravida purus facilisis. Donec
        eu justo risus. Vivamus fringilla augue turpis. Etiam justo tortor, pulvinar id
        aliquet vitae, vehicula eu ligula. Ut eu sapien massa. Vivamus iaculis hendrerit
        ligula id adipiscing. Aenean quis magna dui, non vehicula tellus.
      </p>
      <p class="info" style=" float:right; margin: 10px;">
        Source: <a href="http://www.cssplay.co.uk/">www.cssplay.co.uk</a></p>
    </div>
  </div>
</body>
</html>

CSS部HEAD部BODY部

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

            
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2005-2010 stu nicholls - cssplay.co.uk. All rights reserved.
=================================================================== */

.menuHolder
{
  width: 650px;
  height: 31px;
  position: relative;
  margin-left: 10px;
}
.menu, .menu ul
{
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  font-family: arial, sans-serif;
}
.menu
{
  width: 650px;
  height: 30px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

.menu li
{
  float: left;
  position: relative;
  z-index: 10;
}
.menu li a
{
  float: left;
  display: block;
  height: 31px;
  padding: 0 10px;
  line-height: 30px;
  position: relative;
  z-index: 20;
  color: #ddd;
  text-decoration: none;
  font-size: 12px;
  background: url(images/back.png) no-repeat center top;
}
.menu li.first a
{
  background: url(images/back.png) no-repeat left top;
}

.menu li.pad
{
  width: 90px;
  height: 31px;
}
.menu li.pad b
{
  display: block;
  height: 31px;
  width: 90px;
  background: url(images/back.png) no-repeat right top;
}

.menu ul
{
  width: 180px;
  height: auto;
  position: absolute;
  top: -130px;
  -webkit-transition: all 0.8s ease-in-out;
  z-index: 1;
  padding: 10px 0;
  background: #000;
  -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 8px;
}
.menu ul li
{
  width: 180px;
}
.menu ul li a
{
  width: 160px;
  height: 20px;
  line-height: 20px;
  background: transparent;
}

.menu:hover
{
  height: 200px;
}
.menu a:hover
{
  color: #0cf;
}
.menu li:hover > a
{
  color: #0cf;
}

.menu li:hover ul
{
  -webkit-transform: translate(0,161px);
}

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

            
<link href="DhtmlAdvanced/animatedDropdownMenu/style.css" rel="stylesheet" type="text/css" />

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

            
<div id="wrapper">
  <div id="info">
    <div class="menuHolder">
      <ul class="menu">
        <li class="first"><a href="#url">menu1</a></li>
        <li><a href="#url">menu2</a>
          <div>
            <ul>
              <li><a href="#url">menu2.1</a></li>
              <li><a href="#url">menu2.2 with description</a></li>
              <li><a href="#url">menu2.3</a></li>
              <li><a href="#url">menu2.4 with description</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#url">menu3</a>
          <div>
            <ul>
              <li><a href="#url">menu3.1</a></li>
              <li><a href="#url">menu3.2 with description</a></li>
              <li><a href="#url">menu3.3</a></li>
              <li><a href="#url">menu3.4 with description</a></li>
              <li><a href="#url">menu3.5</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#url">menu4</a>
          <div>
            <ul>
              <li><a href="#url">menu4.1</a></li>
              <li><a href="#url">menu4.2 with description</a></li>
              <li><a href="#url">menu4.3</a></li>
              <li><a href="#url">menu4.4 with description</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#url">menu5</a>
          <div>
            <ul>
              <li><a href="#url">menu5.1</a></li>
              <li><a href="#url">menu5.2 with description</a></li>
              <li><a href="#url">menu5.3</a></li>
              <li><a href="#url">menu5.4 with description</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#url">menu6<b></b></a></li>
        <li class="pad"><b></b></li>
      </ul>
    </div>
    
    <p class="info">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae urna quis nunc
      feugiat aliquet. Proin a est non augue scelerisque eleifend eget et sapien. Nunc
      et dolor leo, vitae tempor erat. Donec ipsum augue, placerat et scelerisque ut,
      convallis et metus. Aliquam nisl enim, rhoncus quis aliquet non, elementum viverra
      metus. Proin ante turpis, aliquet ac convallis quis, feugiat et magna. Etiam vitae
      metus dolor. Donec euismod lorem in urna tincidunt ac gravida purus facilisis. Donec
      eu justo risus. Vivamus fringilla augue turpis. Etiam justo tortor, pulvinar id
      aliquet vitae, vehicula eu ligula. Ut eu sapien massa. Vivamus iaculis hendrerit
      ligula id adipiscing. Aenean quis magna dui, non vehicula tellus.
    </p>
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

アニメーション付のドロップダウンメニュー　《プログラマーがネットで副収入を得る方法とは》

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

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

アニメーション付のドロップダウンメニュー 《プログラマーがネットで副収入を得る方法とは》

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

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

アニメーション付のドロップダウンメニュー　《プログラマーがネットで副収入を得る方法とは》