Webサイトメニューのデザイン方法は多様です。一部のメニューが常に表示され、すべてのオプションが直接表示されます。その他は隠されており、拡張するためにクリックする必要があります。非表示のメニューの拡張方法は異なります。一部のスライドアウトとカバーコンテンツ、コンテンツを押しのけ、フルスクリーンディスプレイを使用するものもあります。

各方法には利點(diǎn)と短所があり、最良の選択は特定のアプリケーションシナリオに依存します。私は個(gè)人的にスライドアウトメニューを好みますが、確かにすべての狀況が適用されるわけではありません。ただし、スペースを節(jié)約してアクセスしやすいメニューが必要な場合は、スライドアウトメニューを上回りにくくなります。

ただし、スライドアウトメニューは多くの場合、ページコンテンツと競合します。少なくともコンテンツをブロックし、最悪の場合はUIからコンテンツを完全に削除します。

固定位置メニューの耐久性と使いやすさを組み合わせた別のアプローチと、現(xiàn)在のコンテンツからユーザーを削除せずにスペース節(jié)約の隠されたスライドアウトメニューを組み合わせました。

これが私の実裝方法です。

スイッチスイッチ

2つの狀態(tài)（オンとクローズ）を備えたメニューを構(gòu)築し、2つの狀態(tài)を切り替えています。これは、チェックボックスのトリックが登場する場所です。チェックボックスには、これらの狀態(tài)をトリガーするために使用できる2つの一般的なインタラクティブ狀態(tài)（およびチェックされていない（および不確実な狀態(tài)））があるため、完璧です。

チェックボックスはメニューアイコンの下に隠されており、CSSを使用して配置されているため、ユーザーが対話しても表示されません。チェックボックス（または、 ahem 、メニューアイコン）を選択すると、メニューが表示されます。チェックアンチェックはそれを隠します。そんなに簡単です。仕事をするためにJavaScriptさえ必要ありません！

もちろん、チェックボックスのトリックは唯一の方法ではありません。JavaScriptを使用してクラスを切り替えてメニューを開閉する場合は、まったく問題ありません。

重要なことに、チェックボックスはソースコードのメインコンテンツの先を行っている必要があります。最終的には、兄弟セレクターが必要な:checkedセレクターを記述するためです。これがレイアウトの問題を引き起こす場合は、CSSカウントの利點(diǎn)を活用する方法など、ソースコードの順序とは何の関係もないため、レイアウトにグリッドまたはフレックスボックスを使用してください。

appearance CSSプロパティを使用して、チェックボックスのデフォルトスタイル（ブラウザによって追加）を削除し、ユーザーがチェックボックスブロックを表示できないようにメニューアイコンに擬似エレメントを追加します。

まず、基本タグ：

<input type="checkbox" id="menu-toggle">
<div id="page">
  
</div>
<div id="menu">
  
</div>

チェックボックスのトリックとメニューアイコンの基本的なCSS：

 /*チェックボックスを非表示にして、スタイルをリセットします*/
入力[type = "チェックボックス"] {
  外観：初期; /*ボックスを削除*/
  ボーダー：0;マージン：0;アウトライン：なし; /*デフォルトのマージン、境界、輪郭を削除*/
  幅：30px;高さ：30px; /*メニューアイコンサイズを設(shè)定*/
  z-index：1; /*トップにあることを確認(rèn)してください*/
}

/*メニューアイコン*/
入力::後{
  コンテンツ： "\ 2255";
  表示：ブロック;
  フォント：25pt/30px「ジョージア」;
  テキストインデント：10px;
  幅：100％;高さ：100％;
}

/*ページコンテンツコンテナ*/
#page {
  背景：url（ "earbuds.jpg"）#ebebeb center/cover;
  幅：100％;高さ：100％;
}

また、フルサイズの背景畫像になる#pageコンテンツのスタイルも追加しました。

遷移効果

メニューコントロールをクリックすると、2つのことが起こります。まず、メニューアイコンが「×」マークに変更され、クリックしてメニューを閉じることができることを示します。したがって、入力が:checked狀態(tài)にある場合、チェックボックスに入力された擬似要素::afterを選択します。

入力：チェック::後{
  コンテンツ： "\ 00D7"; /*「×」タグに変更*/
  色：#ebebeb;
}

次に、メインコンテンツ（「ヘッドフォン」畫像）が変換され、以下のメニューが表示されます。それは右に動(dòng)き、回転して縮み、その左隅は角度になります。これは、開いたドアのように、コンテンツを押し戻されているように見せるためです。

入力：checked? #page {
  クリップパス：ポリゴン（0 8％、100％0、100％100％、0 92％）;
  変換：transtex（40％）rotatey（10deg）スケール（0.8）;
  変換オリジン：右中央;
  遷移：すべて.3S線形。
}

clip-pathを使用して、畫像の角度を変更します。

変換に遷移を適用しているため、 #pageには最初のclip-path値が必要になるため、移行を行うものがあります。また、 #pageにトランジションを追加します。これにより、開くにつれてスムーズに閉じることができます。

 #page {
  背景：url（ "earbuds.jpeg"）#ebebeb center/cover;
  クリップパス：ポリゴン（0 0、100％0、100％100％、0 100％）;
  遷移：すべて.3S線形。
  幅：100％;高さ：100％;
}

基本的にコア設(shè)計(jì)とコードを完了しました。チェックボックスがチェックされていない場合（「×」マークをクリックして）、ヘッドセット畫像の変換が自動(dòng)的に元に戻され、中央の位置に戻されます。

少しjavascript

既に欲しいものがある場合でも、ユーザーエクスペリエンスを改善するためのもう1つのことがあります。 #page要素]をクリック（またはクリック）するときにメニューを閉じます。このようにして、ユーザーは「×」タグを調(diào)べたり、使用したりせずにコンテンツを返すことができます。

これはメニューを非表示にするもう1つの方法であるため、JavaScriptを使用できます。何らかの理由でJavaScriptが無効になっている場合はどうなりますか？それは問題ではありません。これは、メニューがそれなしで機(jī)能することを妨げない単なる強(qiáng)化です。

 document.queryselector（ "＃page"）。addeventlistener（ 'click'、（e、checkbox = document.queryselector（ 'input'））=> {
  if（checkbox.checked）{checkbox.checked = false; e.StopPropagation（）; }
}）;

これらの3行のコードの目的は、 #page要素にクリックイベントハンドラーを追加することです。チェックボックスが次のような場合は、 :checked狀態(tài)にある場合、チェックボックスを外してメニューを閉じます。

垂直/垂直のデザイン用に作られたデモを見てきましたが、使用しているものに応じて大畫面サイズでも機(jī)能します。

これは1つの方法であるか、典型的なスライドアウトメニューを試してみてください。アニメーションは多くの可能性を開き、他にも數(shù)十のアイデアがあるかもしれません。実際、私はそれらを聞いてみたいと思っています（またはもっと見る）ので、共有してください！

以上がメニューがページで明らかになります。アニメーションを回転させますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。