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 スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)
推薦する
遭遇したいくつかのブラウザ互換性の問題について簡単に説明します
背景ブラウザの互換性の問題を解決するのは非常に面倒なことです。高度な技術はそれほど必要ありませんが、...
TomcatとJDKのバージョンの対応と各Tomcatバージョンの機能
Apache Tomcat は、Java Servlet および Java Server Pages...
MySQLはSQL文を使用してテーブル名を変更します
MySQL では、SQL ステートメント rename table を使用してテーブル名を変更できま...
WindowsでのMySQLインストールチュートリアルの詳細な紹介
目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...
JavaScript Alert関数の実行順序の詳細な説明
目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...
CocosCreator の新しいリソース管理システムの分析
目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...
MySQL は正常に起動するがポートをリッスンしない場合の解決策
問題の説明MySQL が正常に起動しました。以下に示すように、 ps -ef |grep mysql...
Windows システムでの MySQL 8.0.21 インストール チュートリアル (図とテキスト)
インストールの提案: インストールには .exe を使用せず、圧縮パッケージを使用してください。これ...
Dockerでmysqlのルートパスワードを変更する方法
最初のステップはmysqlコンテナを作成することです docker exec -it コンテナID ...
ベースリンクタグの使用の紹介ベース
<br />リンクをクリックすると、ポップアップ表示される Web ページ アドレスは ...
Ubuntu でパスワードを変更し、パスワードの複雑さのポリシーを設定する方法
1. パスワードを変更する1. 一般ユーザーのパスワードを変更する パスワード現在のパスワードを入力...
MySQL では UTF-8 が推奨されないのはなぜですか?
最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...
IE7 互換モードで IE8 を有効にするコード
最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...
Dockerでデータディレクトリを移行する方法
目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...
CentOS 7でsambaを使用してフォルダーを共有するための完全な手順
序文Samba は、サーバー プログラムとクライアント プログラムで構成され、Linux システム上...