メニューがページで明らかになります。アニメーションを回転させます

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

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

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

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

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

スイッチスイッチ

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

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

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

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

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

まず、基本タグ：

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

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

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

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

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

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

遷移効果

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

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

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

入力：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％;
}

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

少しjavascript

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

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

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

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

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

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

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