折りたたまれたヘッダーは、特別オファーや重要なお知らせなど、ユーザーにとって重要な情報を表示するのに最適なソリューションです。多くの開発者は、このタイプの効果を作成するときに JavaScript に依存していますが、純粋な CSS を使用して、よりシンプルな折りたたまれたヘッダー効果を作成することは完全に可能です。 折りたたまれたヘッダーは、視差効果と同様に機能します。折りたたまれたヘッダーの背景は固定されたままなので、ユーザーがページを下にスクロールすると、その下のコンテンツがその上に流れていきます。このチュートリアルでは、次の折りたたまれたタイトル効果を作成する方法を説明します。 このプレゼンテーションは 3 つの部分で構成されています。
ヘッダーを折りたたむと、ユーザー エクスペリエンスが向上します。ユーザーは特別な情報を見たいときにいつでもスクロールできますが、残りのコンテンツを読んでいるときに邪魔になることはありません。 それでは、折りたたみヘッダーを段階的に作成する方法を見てみましょう。 1. HTMLを作成する HTML は 3 つの主要な部分で構成されています。 固定されたトップメニューバーに使用され、.banner は折りたたまれたヘッダー、.article は残りのコンテンツに使用されます。コードは次のようになります。 <div class="コンテナ"> <ヘッダー> <ナビ> <ul class="メニュー"> <li class="logo"><a href="#">開発とデザイン</a></li> <li><a href="#">ホーム</a></li> <li><a href="#">ブログ</a></li> <li><a href="#">概要</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </ヘッダー> <div class="banner"> <div> <h2 class="banner-title">次回のウェビナーをお見逃しなく</h2> <p class="banner-desc">今すぐサインアップして電子書籍を無料でお選びください</p> </div> <button class="btn-signup" type="button" onclick="location.href='#'"> ウェビナーへ移動 » </ボタン> </div> <記事クラス="記事"> <p>...</p> </記事> </div> 2. CSSを使用して基本的なスタイルを追加する まず、リセット スタイルとベース スタイルを定義して CSS を開始します。次に例を示します。 * { ボックスのサイズ: 境界線ボックス; マージン: 0; パディング: 0; フォントファミリー: サンセリフ; 色: #222; } { テキスト装飾: なし; } ul { リストスタイルタイプ: なし; } 3.トップメニューバーを配置する 固定メニューバーをページ上部に配置するには、 要素の位置は固定に設定され、z-index は 0 より大きい値に設定されます。 z-index のデフォルトは auto なので、要素の親よりも高い z-index 値にする必要があります。次のCSSでは99を使用しています。 要素の親: ヘッダー { 高さ: 70px; 背景: #222; 位置: 固定; 幅: 100%; zインデックス: 99; } z-index: 99; ルールにより、折りたたみ可能なヘッダーが完全に折りたたまれ、残りのコンテンツがページの上部に達した場合でも、上部のメニュー バーがすべての要素の上部に表示されたままになります。 4. メニュースタイルを設定する 折りたたまれたヘッダーを作成するために次の CSS ルールは必要ありませんが、トップ メニューを使用してスタイルを設定できます。 ナビゲーション{ 高さ: 継承; } .メニュー{ ディスプレイ: フレックス; 高さ: 継承; アイテムの位置を中央揃えにします。 パディング: 0 20px; } .menu li { パディング: 0 10px; } .メニュー a { 色: 白; } .ロゴ { フレックス: 1; フォントサイズ: 22px; } .nav とメニュー項目の継承 (100%) 幅にして、画面全体に広がるようにします。 さらに、.menu はフレックスボックスを使用してメニュー項目を水平に並べ、align-items プロパティで垂直方向に中央揃えします。 また、.logo 要素に flex: 1; CSS ルールを追加したこともわかります。 flext プロパティは、flex-grow、flex-shrink、flex-basis の省略形です。値が 1 つしかない場合は flex-grow を参照し、他の 2 つのプロパティはデフォルト値のままになります。 flex-grow が 1 に設定されている場合、指定された要素は flex コンテナー内のすべての余分なスペースを取得します。そのため、メニュー要素はコンテナーの左側に押し出され、メニュー項目は右側に残ります。 5. 折り畳んだタイトルを配置する 折りたたまれたヘッダーも、上部のメニュー バーと同様に位置が固定されています。ただし、z-index 値は取得されないため、ユーザーがページを下にスクロールして残りのコンテンツが徐々にバナーを覆うと、バナーが「折りたたまれる」可能性があります。 .バナー{ /* 位置決め用 */ 幅: 100%; 高さ: 300px; 位置: 固定; 上: 70px; 背景: 線形グラデーション(45度, #98cbff, #98ffcb); /* コンテンツの配置用 */ ディスプレイ: フレックス; flex-direction: 列; コンテンツの均等配置: スペースを均等に; アイテムの位置を中央揃えにします。 } ご覧のとおり、折りたたまれたヘッダー内のコンテンツを揃えるために、再び flexbox を使用しています。現在は列ベースのフレックス レイアウトになっており、justify-content プロパティと align-items プロパティを使用して要素を垂直方向と水平方向に簡単に配置できます。 6. 折り畳みタイトルのスタイルを設定する これは折りたたまれたヘッダー効果の一部ではありませんが、上記のデモでは .banner 要素の子孫 (タイトル、説明、ボタン) がどのようにスタイル設定されているかを次に示します。 .バナータイトル{ フォントサイズ: 32px; 下マージン: 10px; テキスト配置: 中央; } .バナーの説明 { フォントサイズ: 22px; テキスト配置: 中央; } .btn-サインアップ{ 色: 白; 背景色: #0056ab; 境界線: 0; パディング: 15px 25px; フォントサイズ: 16px; カーソル: ポインタ; } 下のスクリーンショットでは、現時点でのデモの様子がわかります。上部のメニュー バーとアコーディオン ヘッダーはどちらも位置が固定されているため、ページの上部に配置され、コンテンツの上半分を覆います。次のステップでは、残りのコンテンツのスタイルを設定して、ヘッダーを折りたたみ可能にします。 7. 残りのコンテンツのスタイルを設定する スクロール時にヘッダーを折りたたむには、次の 4 つの操作を行う必要があります。
コードで表すと次のようになります: 。記事 { 幅: 100%; 位置: 相対的; 上: 370ピクセル; 背景: 白; 高さ: 100%; パディング: 30px 10%; } .記事 p { 下マージン: 20px; } コード全体を見る そして、折りたたみヘッダーが完成しました。以下に、CSS 全体を表示します。この記事に示されている折りたたまれたヘッダー効果のライブデモも確認できます。 * { ボックスのサイズ: 境界線ボックス; マージン: 0; パディング: 0; フォントファミリー: サンセリフ; 色: #222; } { テキスト装飾: なし; } ul { リストスタイルタイプ: なし; } ヘッダー { 高さ: 70px; 背景: #222; 位置: 固定; 幅: 100%; zインデックス: 99; } ナビゲーション{ 高さ: 継承; } .メニュー{ ディスプレイ: フレックス; 高さ: 継承; アイテムの位置を中央揃えにします。 パディング: 0 20px; } .menu li { パディング: 0 10px; } .メニュー a { 色: 白; } .ロゴ { フレックス: 1; フォントサイズ: 22px; } .バナー{ /* 位置決め用 */ 幅: 100%; 高さ: 300px; 位置: 固定; 上: 70px; 背景: 線形グラデーション(45度, #98cbff, #98ffcb); /* コンテンツの配置用 */ ディスプレイ: フレックス; flex-direction: 列; コンテンツの均等配置: スペースを均等に; アイテムの位置を中央揃えにします。 } .バナータイトル{ フォントサイズ: 32px; 下マージン: 10px; テキスト配置: 中央; } .バナーの説明 { フォントサイズ: 22px; テキスト配置: 中央; } .btn-サインアップ{ 色: 白; 背景色: #0056ab; 境界線: 0; パディング: 15px 25px; フォントサイズ: 16px; カーソル: ポインタ; } 。記事 { 幅: 100%; 位置: 相対的; 上: 370ピクセル; 背景: 白; 高さ: 100%; パディング: 30px 10%; } .記事 p { 下マージン: 20px; } 結論は ヘッダーを折りたたむと、ページの上部に追加のコンテンツを簡単に表示できます。これらは視差効果と同様に機能します。異なる背景を異なる速度で動かし、流れるコンテンツを固定要素に対して配置する必要があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法
最近、Oracle、MySQL、SQL Server 2005 のデータ ページング クエリについて...
1. システム構成1. sudoパスワードをオフにするsudo コマンドを使用するたびにパスワード...
これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...
1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...
目次序文1. オブジェクト構築にプロトタイプを設定する1.1 __proto__ の使用における特殊...
今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...
IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...
この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...
マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...
Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...
需要背景:ミニプログラムページに GIF ダイナミック画像を挿入しますが、GIF 画像は通常サイズが...
ステップ 1: yum install httpd -y #httpd サービスをインストールします...
目次1. Springbootプロジェクトを準備する2. 関連する設定を実行する3.パッケージ4.D...
最新バージョンの WIN10 では、Microsoft は仮想化コンテナに基づくセキュリティ メカニ...
背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...