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 スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)
推薦する
VMware 仮想マシン ubuntu18.04 インストール チュートリアル
インストール手順1. 仮想マシンを作成する 2. [カスタム（詳細）]を選択し、[次へ]をクリックし...
Docker-compose ネットワークの詳細な例
今日は Docker でのネットワーク設定を試し、後で忘れないようにプロセスを記録しました。 (シス...
HTML テーブルタグチュートリアル (23): 行の境界線の色属性 BORDERCOLORDARK
行ごとに、暗い境界線の色を個別に定義できます。基本的な構文<TR 境界線の色を暗くする=col...
DIVのぼかし機能を実装する方法
マウスを動かしたときにDIVが消えるように手ぶれ補正を使用するdiv タグ自体は onblur イベ...
高品質なウェブページのデザイン方法 高品質なウェブページ（画像とテキスト）のデザイン経験
オープンプラットフォームの増加に伴い、そこから派生するさまざまなアプリケーションサービスも増加傾向に...
ウェブページでよく使用される共有コードの完全なリスト（フロントエンドに必須）
コードをコピーコードは次のとおりです。 1. 新浪微博<a href="http:/...
Alibaba Cloud によって追加されたセキュリティ グループ ポートと、追加後にアクセスできない問題のトラブルシューティング
目的： 1. Alibaba Cloud Serverを介してサーバーの外部ネットワークをマッピング...
Ant Design Pro ログイン機能にグラフィック検証コード コンポーネントを統合する方法
序文：この記事では、Ant Design Proログイン機能にグラフィック検証コードコンポーネントを...
MySQLでルートユーザーのパスワードを変更する方法
方法1: SET PASSWORDコマンドを使用する mysql> username@loca...
Dockerを使用してMySQLデータベースをインストールするDeepinの詳細な説明
まずMySQLソースをクエリするdocker 検索 mysql公式ウェブサイトにアクセスしてイメージ...
HTML 要素に注釈を付けるときにクラスと ID のどちらが優れているかを分析する
Web ページには、非常に複雑な HTML 構造があります。CSS を使用して関連するスタイルを定義...
HTML の一般的でないタグ optgroup、sub、sup、bdo のサンプルコード
Optgroup は、ドロップダウン リストのコンテンツをより整理するために、select タグで使...
キャッシュサーバーを構築するためのMemcached方式
序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...
Linuxプロセス通信におけるFIFOの実装
FIFO通信（先入れ先出し）関連のないプロセス間の通信を可能にする FIFO 名前付きパイプ。パイプ...
ネイティブjsは9マスグリッドのドラッグアンドドロップを実現します
ネイティブJSを使用して9つの正方形のグリッドを記述し、9つのグリッドの位置をドラッグして変更する効...