JavaScriptを使用しないアダプティブメニュー

目標

1. Flexboxプロパティで基本的なスキルを習得します。
2. 水平適応メニューを開発します。
3. 結果としてプロジェクトに適用する決定。

ツールとドキュメント

1. NPM-パッケージマネージャーとして（現在、Yarnに積極的に移行しています）
2. Grunt-プロジェクトの組み立てに役立つツール
3. Flexboxドキュメント（ 役に立つリンクを参照）;
4. サス

構造

• レイアウト -ページ上のコンポーネントと要素の位置を説明します。
• コンポーネント - コンポーネントに含まれる要素の表示と動作を説明します。
• element-単一の要素の表示と動作を説明します;

• ベース -定数の説明、ベーススタイル（ normalize.cssの場合 ）
• コンポーネント -アプリケーションのコンポーネントの説明。 私たちの場合、「メニュー」コンポーネント
• 要素 -ボタン、リンクなどの要素のスタイルの説明
• レイアウト -ページ上のブロックの場所の説明
• style.scss-このファイルでは、すべてをまとめます

CSSおよびHTML入力およびラベルタグ

<label for="input-0" class="label"> 1</label> <input type="radio" name="input-trigger" id="input-0" class="input" /> <label for="input-1" class="label"> 1</label> <input type="radio" name="input-trigger" id="input-1" class="input" /> 

 .input:checked { border-color: red; } 

 .input:checked + .label { color: red; } 

 <input type="radio" name="menu-item-trigger" id="menu-close" class="input input-hidden"> <nav class="menu"> <input type="radio" name="menu-item-trigger" id="menu-item-0" class="input input-hidden" /> <div class="menu-item menu-item-trigger"> <label for="menu-close" class="menu-item-close"> </label> <label for="menu-item-0" class="menu-item-label"> <i class="fa fa-home"></i> <span class="menu-item-label-text">Menu Item 0</span> </label> <div class="menu-sub"> <li class="menu-item menu-item-sub"> <a href="#" class="menu-item-label"> <span class="menu-item-label-text">Sub Item Menu 0</span> </a> </li> <li class="menu-item menu-item-sub"> <a href="#" class="menu-item-label"> <span class="menu-item-label-text">Sub Item Menu 1 - With long label</span> </a> </li> <li class="menu-item menu-item-sub"> <a href="#" class="menu-item-label"> <span class="menu-item-label-text">Sub Item Menu 2 - Withtooolongwordslikeingerman</span> </a> </li> </div> </div> </nav> 

1. name = menu-item-triggerの各要素は、最初のものを除き、状態にあります：オンにすると、label.menu-item-closeおよびdiv.menu-subの後続要素の可視性と位置が変更され、要素label.menu-item-closeが完全になります。 label.menu-item-label要素とオーバーラップし、div.menu-subがlabel.menu-item-label要素の下に表示されました。 つまり、サブメニューを開き、メインメニューをクリックしたときの動作を変更します。
   
   
2. 最初の要素名= menu-item-triggerは、前の段落で適用されたすべての変更をキャンセルする、つまりサブメニューを閉じるためにのみ使用されます。

フレックスボックス

• 「ナレッジベース」やドイツ語の翻訳「Wissensdatenbank」などの長い単語を含むメニュー項目。 この場合、テキストにラッピング要素が追加され、およそ次のスタイルが適用されます。
  
  

   .label-text { // @link: http://htmlbook.ru/css/text-overflow overflow: hidden; text-overflow: ellipsis; width: 100%; display: inline-block; } 

  
  
• 幅を伸ばす必要があるが、幅を設定するときの写真：100％; 親ブロックからクロールします。 ここで、ボックスのサイズ設定が役立ちます。 このアイテムの場合;
  
  
• 子要素が可能な長さ全体を占めていないか、均等に分散されていないという事実にも問題がある可能性があります。 ここではおそらくflex：1 1 autoが役立ちます。

 .menu { display: flex; align-items: center; flex-wrap: wrap; } 

 .menu-item { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; } 

まとめ

1. JavaScriptのロードを待機しません。 ほとんどの場合、メニューはサイトのヘッダーにあるため、これらのスタイルはcore.cssに配置できます。core.cssは、ページが読み込まれたときにユーザーに表示される要素の基本スタイルを記述します。
2. JavaScriptでひどいことが起こり、メニュースクリプトが初期化されていない場合でも、メニューは機能します。

1. CSSセレクターの制限された機能。たとえば、子を変更するときに親を変更することはできません。
2. iOSでは、パフォーマンスの低下が見られました。 意志変更のプロパティを理解し、添付しなければなりませんでした。
3. フォーカスを失ってからN秒後にメニューの下に隠す方法はありません（実装機能）。
4. メニューのHTMLマークアップを理解することは困難です。
5. IEのTear Eye Flexboxサポート

便利なリンク

• PCSS-コンポーネントCSSの構築の概念の説明。
• フレックスボックスのガイド（EN） -フレックスボックスのプロパティについては、ここで詳しく説明しています。
• Flexbox（RUS）のガイド -ここでは、ロシア語のFlexboxのプロパティについて詳しく説明しています。
• ミスター Froggy -Flexboxスキルの習得に役立ちます
• デモ
• Githubプロジェクト