数日前、私はHTML + CSSを使用してHamburgermenuを実装する外国のボスのビデオを見ました。最近SASSを見ていたので、SASSを使用して実装しました。
最終レンダリングは次のとおりです。
VSコードのファイル構造（簡単なSASSは、SCSSファイルをコンパイルするために使用されます）：
ページ構造（index.html）：
_config.scss：
/*色と最大幅の設定*/$プライマリカラー：RGBA（13,110,139、.75）; $ overlay-color：rgba（24,39,51、.85）; $ max-width：980px;/*テキスト色を設定します。 @if（Lightness（$ color）> 70）{@return＃333; } @else {@return #fff; }}/*ミキサー、背景色とテキストの色を設定します*/@mixin set-background（$ color）{background-color：$ color;色：set-text-color（$ color）;}style.scss：
@import '_config';*{margin：0;パディング：0;}。コンテナ{max-width：$ max-width;マージン：0 auto;}/*ショーケースの背景色を設定し、擬似クラスを使用して背景画像を追加し、背景画像のzインデックスを-1に設定します（この画像は内部に表示されます）。そして、テキストを中央に表示するために、フレックスレイアウト*/。showcase {position：relative;を使用します。高さ：100VH;バックグラウンドカラー：$プライマリカラー; ＆：before {content： '';位置：絶対;左：0;上：0;幅：100％;高さ：100％;背景：url（ '../ img/pexels-photo-533923.jpeg'）繰り返しセンターセンター/カバー。 z -index：-1; }＆-inner {display：flex;高さ：100％;フレックス方向：列; justify-content：center; Align-Items：Center;テキストアライグ：センター;色：#fff; font-weight：100; h1 {font-size：4rem;パディング：1.2REM 0; } p {White-Space：pre-rap;フォントサイズ：1.6rem;パディング：0.85Rem 0; } .btn {padding：.65rem 1rem; /*ミキサーを使用して、背景色とテキストの色を設定します*/ @include set-background（lighten（$ primary-color、30％））;国境：なし;境界線：1PX SOLID $プライマリカラー。ボーダーラジウス：5px;テキスト装置：なし;アウトライン：なし;遷移：すべての.2Sは.1sを容易にします。 /*ボタンホバーを使用して、CSS3のスケールを使用してスケーリング効果を設定する場合*境界線：明るい（$ overlay-color、25％）;変換：スケール（.98）; }}}}}}/*原則：チェックボックスを実行するかどうかでスタイルを変更します（チェックボックスの透明度を0に設定すると、z-indexがより高く設定されています）。クリックすると、メニューが表示されます。もう一度クリックすると、メニューが消えます *// *メニューワラップのために固定された設定されて、ショーケースが画面全体に入力されるようにします。同時に、チェックボックスの不透明度を0に設定します。また、ハンバーガーのzインデックスが1に設定されているため、チェックボックスのzインデックスを2に設定する必要があることに注意してください。左：0;上：0; z-index：1; .toggle {position：absolute;左：0;上：0;幅：50px;高さ：50px;不透明：0; z-index：2;カーソル：ポインター; /*チェックボックスがチェックされたら、ハンバーガーでDivと擬似クラスの回転効果を設定します*/＆：checked〜.hamburger> div {transform：Rotate（135deg）; /*擬似クラスは実際に225度回転し、上部を0に設定する必要があります。そうしないと、形成された❌の長さは一貫性がありません*/＆：＆：after {transform：rotate（90deg）;上：0; }} / *チェックボックスが選択されている場合、回転効果も設定されます * /＆：checked：hover〜.hamburger> div {transform：rotate（235deg）; }＆：checked〜.menu {visibility：visible; > div {transform：scale（1）; > div {不透明：1; }}}}}}} .hamburger {position：absolute;左：0;上：0;幅：60px;高さ：60px;パディング：1REM;バックグラウンドカラー：$プライマリカラー;ボックスサイズ：ボーダーボックス;ディスプレイ：Flex;フレックス方向：列; justify-content：center; Align-Items：Center;テキストアライグ：センター; z-index：1; /*divは中央の水平線を生成し、相対的な位置を設定し、その擬似クラスを絶対に設定し、div {position：relative：relative;左：0;上：0;幅：100％;高さ：2px;バックグラウンドカラー：#fff;遷移：すべての.7S容易さ。 /*擬似クラスを使用して、1番目と3番目の水平線を生成する*位置：絶対;左：0;トップ：-10px;幅：100％;高さ：2px;バックグラウンドカラー：継承; }＆：after {top：10px; }}} /*選択したメニューのスタイルを設定します* / /*メニューを固定し、幅と高さを100％に設定し、次に表示するにはflexに表示されます。左：0;上：0;幅：100％;高さ：100％;オーバーフロー：隠し;ディスプレイ：Flex; justify-content：center; Align-Items：Center;可視性：隠された; /*メニューをInvisibleに設定し、チェックボックスが選択されたときに表示されるように設定します*/ Transition：すべて.75S容易さ。 > div {@include set-background（$ overlay-color）;幅：200VW;高さ：200VH;オーバーフロー：隠し;ボーダーラジウス：50％;ディスプレイ：Flex; justify-content：center; Align-Items：Center;テキストアライグ：センター;変換：スケール（0）;遷移：すべての.4S容易さ。 > div {max-width：90vw; Max-Height：90VH;不透明：0;遷移：すべての.4S容易さ。 > ul> li {list-style：none;フォントサイズ：2REM;パディング：.85rem 0;テキスト変換：大文字;変換：skew（-5deg、-5deg）回転（5deg）;/*テキストtilt*/ a {color：enternit;テキスト装置：なし;遷移：色の容易さ。 }}}}}}}}}これは、HTML+SASSの実装Hambergurmenu（ハンバーガースタイルのメニュー）に関する記事です。より関連するHTML+SASS Hambergurmenuを実装するには、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています！