HTML+CSS3+JSで実装されたドロップダウンメニュー

HTML+CSS3+JSで実装されたドロップダウンメニュー

成果を達成する

html

<div class="コンテナ">
  <h1 class="title">ドロップダウン メニュー</h1>
  <ul>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">最初のメニュー <i class="icon-arrow"></i></a>
      <ul class="ドロップダウンメニュー">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">当社について</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">2 番目のメニュー <i class="icon-arrow"></i></a>
      <ul class="ドロップダウンメニュー">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">当社について</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">3 番目のメニュー <i class="icon-arrow"></i></a>
      <ul class="ドロップダウンメニュー">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">当社について</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </li>
  </ul>
  <p class="text-center">
    CSS3 のみで同じメニューをご覧ください: <a href="https://codepen.io/pedronauck/pen/jaluz" target="_blank">https://codepen.io/pedronauck/pen/jaluz</a>
  </p>
</div>

CS

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
url をインポートします(https://fonts.googleapis.com/css?family=Pacifico);
体 {
  フォントファミリ: "Lato"、Helvetica、Arial;
  フォントサイズ: 16px;
}

.テキストセンター{
  テキスト配置: 中央;
}

*、*:前、*:後 {
  -webkit-border-sizing: ボーダーボックス;
  -moz-border-sizing: 境界線ボックス;
  境界線のサイズ: 境界線ボックス;
}

。容器 {
  幅: 350ピクセル;
  マージン: 50px 自動;
}
.コンテナ > ul {
  リストスタイル: なし;
  パディング: 0;
  マージン: 0 0 20px 0;
}

。タイトル {
  フォントファミリー: 'Pacifico';
  フォントの太さ: normal;
  フォントサイズ: 40px;
  テキスト配置: 中央;
  行の高さ: 1.4;
  色: #2980B9;
}

.ドロップダウン{
  テキスト装飾: なし;
}
.dropdown [データトグル="ドロップダウン"] {
  位置: 相対的;
  表示: ブロック;
  色: 白;
  背景: #2980B9;
  -moz-box-shadow: 0 1px 0 #409ad5 インセット、 0 -1px 0 #20638f インセット;
  -webkit-box-shadow: 0 1px 0 #409ad5 インセット、0 -1px 0 #20638f インセット;
  ボックスシャドウ: 0 1px 0 #409ad5 インセット、0 -1px 0 #20638f インセット;
  テキストシャドウ: 0 -1px 0 rgba(0, 0, 0, 0.3);
  パディング: 10px;
}
.dropdown [データトグル="dropdown"]:hover {
  背景: #2c89c6;
}
.ドロップダウン .アイコン矢印 {
  位置: 絶対;
  表示: ブロック;
  フォントサイズ: 0.7em;
  色: #fff;
  上: 14px;
  右: 10px;
}
.dropdown .icon-arrow.open {
  -moz-transform:回転(-180度);
  -ms-transform:回転(-180度);
  -webkit-transform: 回転(-180度);
  変換: 回転(-180度);
  -moz-transition: -moz-transform 0.6 秒;
  -o-transition: -o-transform 0.6秒;
  -webkit-transition: -webkit-transform 0.6 秒;
  遷移: 変換 0.6 秒;
}
.dropdown .icon-arrow.close {
  -moz-transform:回転(0度);
  -ms-transform:回転(0度);
  -webkit-transform: 回転(0度);
  変換: 回転(0度);
  -moz-transition: -moz-transform 0.6 秒;
  -o-transition: -o-transform 0.6秒;
  -webkit-transition: -webkit-transform 0.6 秒;
  遷移: 変換 0.6 秒;
}
.dropdown .icon-arrow:before {
  内容: '\25BC';
}
.ドロップダウン .ドロップダウンメニュー {
  最大高さ: 0;
  オーバーフロー: 非表示;
  リストスタイル: なし;
  パディング: 0;
  マージン: 0;
}
.dropdown .dropdown-menu li {
  パディング: 0;
}
.dropdown .dropdown-menu li a {
  表示: ブロック;
  色: #6f6f6f;
  背景: #EEE;
  -moz-box-shadow: 0 1px 0 白のインセット、0 -1px 0 #d5d5d5 インセット;
  -webkit-box-shadow: 0 1px 0 白のインセット、0 -1px 0 #d5d5d5 インセット;
  box-shadow: 0 1px 0 白のインセット、0 -1px 0 #d5d5d5 インセット;
  テキストシャドウ: 0 -1px 0 rgba(255, 255, 255, 0.3);
  パディング: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
  背景: #f6f6f6;
}
.dropdown .show、.dropdown .hide {
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  変換原点: 50% 0%;
}
.ドロップダウン .表示 {
  表示: ブロック;
  最大高さ: 9999px;
  -moz-transform: スケールY(1);
  -ms-transform: スケールY(1);
  -webkit-transform: スケールY(1);
  変換: scaleY(1);
  アニメーション: showAnimation 0.5s easy-in-out;
  -moz-animation: showAnimation 0.5s イーズインアウト;
  -webkit-animation: showAnimation 0.5s イーズインアウト;
  -moz-transition: 最大高さ 1s イーズインアウト;
  -o-transition: 最大高さ 1s イーズインアウト;
  -webkit-transition: 最大高さ 1s、イーズインアウト;
  遷移: 最大高さ 1s、イーズインアウト;
}
.ドロップダウン .非表示 {
  最大高さ: 0;
  -moz-transform: スケールY(0);
  -ms-transform: スケールY(0);
  -webkit-transform: スケールY(0);
  変換: スケールY(0);
  アニメーション: hideAnimation 0.4s イーズアウト;
  -moz-animation: hideAnimation 0.4s イーズアウト;
  -webkit-animation: hideAnimation 0.4s イーズアウト;
  -moz-transition: 最大高さ 0.6 秒のイーズアウト;
  -o-transition: 最大高さ 0.6 秒のイーズアウト;
  -webkit-transition: 最大高さ 0.6 秒のイーズアウト;
  遷移: 最大高さ 0.6 秒のイーズアウト;
}

@keyframes アニメーションを表示 {
  0% {
    -moz-transform: スケールY(0.1);
    -ms-transform: スケールY(0.1);
    -webkit-transform: スケールY(0.1);
    変換: スケールY(0.1);
  }
  40% {
    -moz-transform: スケールY(1.04);
    -ms-transform: スケールY(1.04);
    -webkit-transform: スケールY(1.04);
    変換: スケールY(1.04);
  }
  60% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.04);
    -ms-transform: スケールY(1.04);
    -webkit-transform: スケールY(1.04);
    変換: スケールY(1.04);
  }
  100% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.02);
    -ms-transform: スケールY(1.02);
    -webkit-transform: スケールY(1.02);
    変換: スケールY(1.02);
  }
  100% {
    -moz-transform: スケールY(1);
    -ms-transform: スケールY(1);
    -webkit-transform: スケールY(1);
    変換: scaleY(1);
  }
}
@-moz-keyframes アニメーションを表示 {
  0% {
    -moz-transform: スケールY(0.1);
    -ms-transform: スケールY(0.1);
    -webkit-transform: スケールY(0.1);
    変換: スケールY(0.1);
  }
  40% {
    -moz-transform: スケールY(1.04);
    -ms-transform: スケールY(1.04);
    -webkit-transform: スケールY(1.04);
    変換: スケールY(1.04);
  }
  60% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.04);
    -ms-transform: スケールY(1.04);
    -webkit-transform: スケールY(1.04);
    変換: スケールY(1.04);
  }
  100% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.02);
    -ms-transform: スケールY(1.02);
    -webkit-transform: スケールY(1.02);
    変換: スケールY(1.02);
  }
  100% {
    -moz-transform: スケールY(1);
    -ms-transform: スケールY(1);
    -webkit-transform: スケールY(1);
    変換: scaleY(1);
  }
}
@-webkit-keyframes アニメーションを表示 {
  0% {
    -moz-transform: スケールY(0.1);
    -ms-transform: スケールY(0.1);
    -webkit-transform: スケールY(0.1);
    変換: スケールY(0.1);
  }
  40% {
    -moz-transform: スケールY(1.04);
    -ms-transform: スケールY(1.04);
    -webkit-transform: スケールY(1.04);
    変換: スケールY(1.04);
  }
  60% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.04);
    -ms-transform: スケールY(1.04);
    -webkit-transform: スケールY(1.04);
    変換: スケールY(1.04);
  }
  100% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.02);
    -ms-transform: スケールY(1.02);
    -webkit-transform: スケールY(1.02);
    変換: スケールY(1.02);
  }
  100% {
    -moz-transform: スケールY(1);
    -ms-transform: スケールY(1);
    -webkit-transform: スケールY(1);
    変換: scaleY(1);
  }
}
@keyframes アニメーションを非表示 {
  0% {
    -moz-transform: スケールY(1);
    -ms-transform: スケールY(1);
    -webkit-transform: スケールY(1);
    変換: scaleY(1);
  }
  60% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.02);
    -ms-transform: スケールY(1.02);
    -webkit-transform: スケールY(1.02);
    変換: スケールY(1.02);
  }
  100% {
    -moz-transform: スケールY(0);
    -ms-transform: スケールY(0);
    -webkit-transform: スケールY(0);
    変換: スケールY(0);
  }
}
@-moz-keyframes アニメーションを非表示 {
  0% {
    -moz-transform: スケールY(1);
    -ms-transform: スケールY(1);
    -webkit-transform: スケールY(1);
    変換: scaleY(1);
  }
  60% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.02);
    -ms-transform: スケールY(1.02);
    -webkit-transform: スケールY(1.02);
    変換: スケールY(1.02);
  }
  100% {
    -moz-transform: スケールY(0);
    -ms-transform: スケールY(0);
    -webkit-transform: スケールY(0);
    変換: スケールY(0);
  }
}
@-webkit-keyframes アニメーションを非表示 {
  0% {
    -moz-transform: スケールY(1);
    -ms-transform: スケールY(1);
    -webkit-transform: スケールY(1);
    変換: scaleY(1);
  }
  60% {
    -moz-transform: スケールY(0.98);
    -ms-transform: スケールY(0.98);
    -webkit-transform: スケールY(0.98);
    変換: スケールY(0.98);
  }
  80% {
    -moz-transform: スケールY(1.02);
    -ms-transform: スケールY(1.02);
    -webkit-transform: スケールY(1.02);
    変換: スケールY(1.02);
  }
  100% {
    -moz-transform: スケールY(0);
    -ms-transform: スケールY(0);
    -webkit-transform: スケールY(0);
    変換: スケールY(0);
  }
}

js

// ドロップダウンメニュー
var ドロップダウン = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(関数(el){
	var ボタン = el.querySelector('a[data-toggle="dropdown"]'),
			メニュー = el.querySelector('.dropdown-menu'),
			矢印 = button.querySelector('i.icon-arrow');

	button.onclick = 関数(イベント) {
		if(!menu.hasClass('show')) {
			menu.classList.add('表示');
			menu.classList.remove('非表示');
			矢印.classList.add('開く');
			矢印.classList.remove('閉じる');
			イベントをデフォルトにしない();
		}
		それ以外 {
			menu.classList.remove('表示');
			menu.classList.add('非表示');
			arrow.classList.remove('open');
			矢印.classList.add('閉じる');
			イベントをデフォルトにしない();
		}
	};
})

Element.prototype.hasClass = function(className) {
    this.className を返し、新しい RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

上記は、HTML+CSS3+JS で実装されたドロップダウン メニューの詳細な内容です。HTML+CSS3+JS ドロップダウン メニューの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  htmlダウンロード機能の詳しい説明

>>:  CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

推薦する

CSS3 における擬似クラスの一般的な使用法の詳細な説明

before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...

Dockerfile を使用したカスタムイメージの構築の実装

目次序文Dockerfile の紹介Dockerfileはイメージプロセスを構築するDockerfi...

CSS3に基づいてiPhoneを描く

結果：実装コードhtml <div class='iphone'> &l...

MySql ストレージ エンジンとインデックスに関する知識のまとめ

ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...

Alibaba Cloud イメージリポジトリの Docker 構成変更の実装

docker リポジトリ自体は非常に遅いですが、中国の Alibaba Cloud ミラー リポジト...

Flex プログラム Firefox で中国語を入力すると文字化けするバグ

Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...

jQueryは画像追従効果を実現します

この記事では、画像フォロー効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...

HTML ページジャンプのパラメータ渡しの問題

効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...

Vueはプルダウンとスクロールでデータを読み込む例を実装しています

目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...

ウェブサイト上で flv/MP4 やその他のビデオ ファイルを再生できない問題は、MIME タイプに関連しています。

ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...

フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

この記事はVueのライフサイクルを理解するのに役立ちます

目次1. beforeCreate & created 2. マウント前とマウント済み3. ...

Vueベースのビデオプレーヤーの実装例

既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。ビデ...

Dockerでプロジェクトを実行する方法

1. プロジェクトwarが保存されているディレクトリを入力しますDockerfileを編集する vi...