はい、純粋なCSSを使用してハンバーガーメニューを作成できます。特定の手順は次のとおりです。1。非表示のチェックボックスをスイッチとして使用し、ラベルからハンバーガーアイコンをシミュレートし、ULを使用してナビゲーションメニューを作成します。 2. CSSを使用して3つのスパンをハンバーガーアイコンにスタイリングし、チェック狀態(tài)の変換を通してアニメーションを回転および非表示にして、「X」クロージング効果を形成します。 3.?兄弟セレクターを使用してNAVメニューのディスプレイを制御し、最初にメニューを非表示にし、チェック時(shí)にスケーリで展開し、大きな畫面にハンバーガーボタンを非表示にし、水平メニューを表示します。 4. Aria-Labelを追加して、アクセシビリティを改善し、キーボードナビゲーションとスクリーンリーダー間の互換性を確保します。このソリューションはJavaScriptを必要とせず、CSSセレクターと入力狀態(tài)に依存して相互作用を?qū)g現(xiàn)し、軽量のレスポンシブサイトに適していますが、外部シャットダウンをクリックするなどの複雑な機(jī)能をサポートしていません。モバイルタッチとマルチデバイスの互換性をテストする必要があります。

CSSのみのハンバーガーメニューを作成することは、HTMLとCSSのみを使用して完全に実行可能です。JavaScriptは不要です。トリックは、非表示のチェックボックスを使用し、 :checked擬似クラスを使用してメニュー狀態(tài)を切り替え、 ~ （一般兄弟）セレクターと組み合わせてメニューディスプレイを制御します。

純粋なCSSを使用して、シンプルで機(jī)能的なハンバーガーメニューを構(gòu)築する方法は次のとおりです。

?1。HTML構(gòu)造

チェックボックス、ハンバーガーアイコン（3つのスパン）、およびナビゲーションメニューを使用した最小構(gòu)造から始めます。

 <nav class = "navbar">
  <入力型= "チェックボックス" id = "nav-toggle" class = "nav-toggle">
  <label for = "nav-toggle" class = "ハンバーガー">
    <span> </span>
    <span> </span>
    <span> </span>
  </label>
  <ul class = "nav-menu">
    <li> <a href = "＃"> home </a> </li>
    <li> <a href = "＃"> bout </a> </li>
    <li> <a href = "＃">サービス</a> </li>
    <li> <a href = "＃">連絡(luò)先</a> </li>
  </ul>
</nav>

• チェックボックス（ #nav-toggle ）は、トグルスイッチとして機(jī)能します。
• チェックボックスの<label>は、クリック可能なハンバーガーアイコンになります。
• .nav-menuメニューが開いているときに表示されるリストです。

?2。ハンバーガーのアイコンをスタイルします

3つのスパンをハンバーガーメニューのように見せ、アクティブなときにそれらをアニメーション化します。

 .hamburger {
  ディスプレイ：Flex;
  フレックス方向：列;
  カーソル：ポインター;
  幅：30px;
  高さ：20px;
  justify-content：space-bethed;
}

.hamburgerスパン{
  表示：ブロック;
  高さ：3px;
  幅：100％;
  背景：＃333;
  ボーダーラジウス：3px;
  遷移：0.3秒の容易さ。
}

/ *メニューが開いているときにアニメーション */
＃nav-toggle：チェックされた.hamburgerスパン：nth-child（1）{
  変換：回転（45deg）翻訳（5px、6px）;
}
＃nav-toggle：チェック済み.hamburgerスパン：nth-child（2）{
  不透明：0;
}
＃nav-toggle：チェック済み.hamburgerスパン：nth-child（3）{
  変換：回転（-45deg）翻訳（7px、-5px）;
}

これにより、メニューが切り替えられると、クラシックな「X」クローズアニメーションが作成されます。

?3。メニューのスタイルと切り替え

チェックボックスを非表示にして、ナビゲーションメニューをスタイリングして、チェックボックスがチェックされたときにのみ表示されます。

 .nav-toggle {
  表示：なし; / *チェックボックスを非表示 */
}

.nav-menu {
  ディスプレイ：Flex;
  リストスタイル：なし;
  マージン：0;
  パディング：0;
  フレックス方向：列;
  位置：絶対;
  上：60px;
  左：0;
  幅：100％;
  背景：＃f8f8f8;
  Box-Shadow：0 5px 10px RGBA（0,0,0,0.1）;
  変換：scaley（0）;
  変換オリジン：トップ;
  遷移：0.3sの容易さを変換します。
}

.nav-menu li {
  パディング：10px 20px;
}

.nav-menu li a {
  テキスト裝置：なし;
  色：＃333;
  フォントサイズ：18px;
}

/ *チェックボックスがチェックされたらメニューを表示 */
＃nav-toggle：checked?.nav-menu {
  変換：scaley（1）;
}

/ *オプション：モバイルのみにします */
@media（min-width：768px）{
  .nav-toggle、
  .hamburger {
    表示：なし;
  }
  .nav-menu {
    ディスプレイ：flex！fection;
    位置：靜的;
    変換：なし;
    Flex-Direction：row;
    ギャップ：20px;
    背景：透明;
    Box-Shadow：なし;
  }
}

？ ~セレクターにより、チェックボックスが直接的な兄弟ではありませんが、 .nav-menuを制御できます。それは、DOMで次のようにする必要があります。

?4。アクセシビリティのヒント

よりアクセスしやすくする：

• ラベルにaria-labelを追加します：

   <label for = "nav-toggle" class = "ハンバーガー" aria-label = "トグルメニュー">

• キーボードナビゲーションのフォーカススタイルを検討してください。

---

最終メモ

このCSSのみのハンバーガーメニューは、シンプルなサイトに適しています。それは軽量で、JavaScriptを完全に回避します。覚えておいてください：

• 可視性を切り替えるだけです。高度なアニメーションやJSなしでの外部クリッククロージングはありません。
• モバイルでは、タッチターゲットが十分に大きいことを確認(rèn)してください。
• デバイスと畫面サイズでテストします。

基本的に、それは相互作用をシミュレートするためのフォーム入力狀態(tài)とCSSセレクターの巧妙な使用です - JSは必要ありません。

以上がCSSのみのハンバーガーメニューを作成する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。