導入: 相変わらずですね。さっそくレンダリングを見てみましょう。 1. ボタンがクリックされる前(携帯電話の場合)またはマウスがポイントされていないとき(PCの場合) 2. マウスをクリックまたはポイントした後。 ドロップダウン メニューを表示することができ、その実装原理も非常に簡単です。覚えておく必要があるのは、この属性のホバーという 1 つのポイントだけです。 すぐにコードを見て、後で説明しましょう。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <スタイル> li{ リストスタイル: なし; 高さ: 28px; } #メニュー{ 表示: インラインブロック; } #メニュー #リスト { 最大高さ: 0; 遷移: 最大高さ 0.25 秒のイーズアウト; オーバーフロー: 非表示; 背景: #f5f4f4; 幅: 80ピクセル; マージン: 0; パディング: 0; テキスト配置: 中央; } #メニュー:ホバー #リスト { 最大高さ: 200px; 遷移: 最大高さ 0.25 秒のイーズイン; 幅: 80ピクセル; マージン: 0; パディング: 0; } 。ボタン{ 高さ: 32px; 幅: 80ピクセル; 上マージン: 6px; 境界線の半径: 4px; 色: #fff; 左パディング: 0; 右パディング: 0; 行の高さ: 32px; 背景: #E33E33; テキスト配置: 中央; } </スタイル> </head> <本文> <div id="メニュー"> <div class="button">詳細情報</div> <ul id="リスト"> <li>パーソナルセンター</li> <li>私のブログ</li> <li>設定</li> <li>ログアウト</li> <li>ログアウト</li> </ul> </div> </本文> </html> div を設定し、それを :hover なしの状態と :hover ありの状態の 2 つの状態に設定するだけです。 :hover がない場合は、メニューを非表示に設定するだけで (overflow: hidden;)、残りのコードは単純なボックス モデルになります。 さて、:hover についてお話しましょう。これは何でしょうか?これは、マウス ポインターが浮かんでいる要素を選択するために使用される CSS セレクターです。したがって、携帯電話でマウスをホバーしたりクリックしたりすると、この属性がトリガーされ、ドロップダウン メニューが表示されます。同時に、ドロップダウン メニューにグラデーション効果を持たせ、より下に引っ張られているような感覚になるように transition 属性を追加しました。 CSS セレクターは魔法のようではありませんか? うまく使用すれば、多くの JS コードを書く必要はありません。今後は CSS セレクターに関するコラムを作成し、すべての CSS セレクターを体系的に紹介する予定です。 要約する 純粋な CSS を使用してドロップダウン メニュー機能のサンプル コードを作成する方法についての記事はこれで終わりです。CSS ドロップダウン メニューに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Portainer を使用して複数の Docker コンテナ環境を管理する方法を説明します。
>>: vue-qr を使用して Vue の QR コードを生成する方法について深く理解する
ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...
下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...
(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...
1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...
序文この記事では、vue に付属している vue-router.js ルーティングを使用してページン...
序文mysql がデフォルトのデータベース パスを変更したため、サービスを開始できませんでした。ログ...
1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...
目次序文ストアドプロシージャ: 1. ストアドプロシージャの作成と呼び出し1. ストアドプロシージャ...
<br /> この記事は allwebdesignresources.com から Ra...
この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分...
目次序文エラー境界エラー境界を超えてトライ/キャッチwindow.onerror、エラーイベント未処...
CSS3アニメーションとJSアニメーションの違いJSはフレームアニメーションを実装しますCSS3はト...
序文みなさんこんにちは。私は梁旭です。職場では、システムの起動後にスクリプトやサービスを自動的に開始...
では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...
0. タグとは何ですか? XML/HTML コードコンテンツをクリップボードにコピー<入力 t...