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 の他の関連記事に注目してください。 |
>>: CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)
推薦する
vue-router 4 の使用例の詳しい説明
目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...
国内SNSのホームページを比較・分析して得た経験をみんなで共有（写真）
この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...
Linuxのsortコマンドの複数のパラメータを理解するための1つの質問
sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...
ES9の新機能の詳細な説明: 非同期反復
目次非同期トラバーサル非同期反復可能トラバーサル非同期反復生成非同期メソッドと非同期ジェネレーター非...
Linuxプロセス監視と自動再起動の簡単な実装方法
目的： Linux では、さまざまな理由でサーバー プログラムがダンプされ、ユーザーの使用に影響する...
ファイルの種類を検出するJavaScriptメソッド
目次1. 画像のバイナリデータを表示する方法2. 絵の種類の見分け方3. 画像の種類を検出する方法3...
Node.js の TCP 接続処理のコア プロセス
数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...
DIV、テーブル、XHTML のウェブサイト構築の違いの分析と説明
簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っ...
Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法
序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...
Linuxダイナミックリンクライブラリの使用
通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...
MySQL 8.0.22 winx64 のインストールと設定方法のグラフィックチュートリアル
MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...
Vueフォームイベントデータバインディングの詳細な説明
<本文> <div id="ルート"> <フォー...
Vue は無限ロードウォーターフォールフローを実装します
この記事では、参考までに、無限ロードウォーターフォールフローを実現するためのVueの具体的なコードを...
ウェブページ上でデスクトップ exe プログラムを呼び出す簡単な方法
この記事では主に、Web ページ上でデスクトップ exe プログラムを呼び出す方法を紹介します。 W...
WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)
WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...