CSS専用の折り畳みナビゲーションの作成

JavaScriptを使用している間、モバイルナビゲーションを開くことは堅実なオプションです、それはCSSだけでそれをすることも可能です.サブメニューでさえ、必ずしも仕事をする必要はありません.pseudo classes and sibling selectors 答えは!

ハウ
折りたたみ式のナビゲーションは、通常、3つの水平線を参照して、愛情を込めてハンバーガーメニューと呼ばれるものによって引き起こされます.これは多くの議論されたアイコンでした、しかし、人々はそれに慣れました.

CSSのみのナビゲーションを作成するには<input /> エレメント付きtype="checkbox" , 私たちは:checked それが選択されるかどうか見る擬似クラス.そして、我々は<label> それは入力要素にリンクしている for 属性.
これは私が普段作ったものの簡略化されたバージョンです.

<nav>
  <input type="checkbox" id="trigger" />
  <label aria-label="open main navigation" for="trigger"><span></span></label>
  <ul>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
  </ul>
</nav>

入力要素の後にラベル要素を置くことに注意してください.これは、入力の状態によってラベルをスタイル化することを可能にします:focus , :checked , など).

チェックボックスの非表示
チェックボックスの入力は完全になくなります.私はナビゲーションの残りの部分が固定され、チェックボックスのラベルをクリックして標準的な動作がそれにスクロールしているので、位置を修正しました.

input {
  opacity: 0;
  width: 0;
  height: 0;
  appearance: none;
  position: fixed;
}

トリガーの作成
あなたはここでハンバーガーのアイコンの背景画像を追加するか、またはそれらを作成するセレクタの前後に使用することができます.これはトリガーの目に見える部分です.状態.
あなたは'不要'について疑問に思うかもしれないspan インサイドlabel タグ、私はそれが簡単にスタイリングを作るために追加、スパンアウトを残すことができます.

label {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  width: 15px;
  height: 10px;
  margin: 40px;
}

label span {
  display: block;
  width: 100%;
  background: hotpink;
  height: 2px;
  transition: transform 1s;
}

label span::before,
label span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  height: 2px;
  background: hotpink;
  transition: 0.4s
}

label span::before {
  top: 0;
}

label span::after {
  top: calc(100% - 2px); /* to make the transition easier :) */
}

ナビゲーションの隠蔽
あなたがちょうど加えることができる間display: none はい、display: block ときにそれを表示するには、変換を使用して、より多くの楽しみです.
私は翻訳を選んだul ユーザーがトリガーをクリックするまで、X軸上の100 Vwはスクリーンからそれを隠します.

ul {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100vw);
  transition: transform 0.2s;
  background: white;
}

オープン状態の作成
私は以前に、チェックされた擬似クラスを使用することについて話しました、擬似クラスは特定の状態があるとき、要素に追加されるキーワードです.
ラジオとチェックボックスの入力タイプには:checked 状態.チェックボックスをチェックすることができますし、それらをクリックして、別のラジオボタンを選択するには別のボタンにする必要があります.チェックボックスは私たちの目標に適しています.
これは、NAVトリガーのオープン状態のためのCSSを追加する場所です、多くのウェブサイトはスタイルでなくて、これを活気づけます、そして、それは私の意見で恥です.
あなたがCSSに新しいならば、コードは威圧的に見えるかもしれません、しかし、あなたが大声でそれを読むならば、時々それをよりはっきり理解するのを助けます.例えば最初の行:チェックされた'入力'の兄弟'ラベル'の内部要素' span 'を選択します.
それはまだ少しばかげたように聞こえたが、実際に実際にここで完璧になりません.

input:checked + label span {
  transform: rotate(45deg);
}

input:checked + label span::before, input:checked + label span::after {
  top: calc(50% - 1px);
  transition: 0.4s;
}
input:checked + label span::after {
  transform: rotate(90deg);
}

ナビゲーションを示す
私は一般的な兄弟セレクタをここで使用しました.input:checked + label + ul も動作しましたが、エラーに対してより敏感です.

input:checked ~ ul {
  transform: none;
  transition: transform 0.4s; 
}

Bezierとすべての派手なものとのかなりのSCSSバージョン:

でもどうして?
我々がそうすることができるので!
これはJavaScriptを使ってクラスを追加するよりもずっと複雑に思えるかもしれません.これは、擬似クラスや兄弟セレクタを処理するときに良くなりたい場合は、偉大な運動ではない、それも非常に頑丈です.あなたのウェブサイトは、JSで小さなエラーを想像して、これは人々がもはやあなたのナビゲーションを使用できないことを意味します.JavaScriptを狂気のアニメーションに残して、CSSのものとしてナビゲーションを開いて、閉じるように単純なものを保ちましょう.

アクセシビリティ
この記事全体を捨てる良い点は、入力要素を使ってナビゲーションを開閉することですsemantic .
しかし、本当にそれについて考えるならば、スクリーン読者を使用している大部分の人々input より意味のある要素button 要素は正確に開発者ではありませんが、実際には盲目の開発者をいらいらさせるかもしれません.
あなたがクリアを加えるならば、トリガーはキーボードで自動的にアクセス可能ですaria-label あなたは、Aを使うほとんどの開発者より多くをしましたbutton 折り目のナビゲーションを開きます.
私は本当に実際の盲目のユーザーやアクセシビリティの専門家からのいくつかの入力を愛し、私は完全に無知かどうかのコメントで私に知らせてください.