基礎6：新しいメニューコンポーネント

基礎6の合理化されたメニューシステム：複数のレガシーオプションを置き換える単一の適応可能なコンポーネント。

重要な改善：<strong></strong>

<li>Unifiedメニューコンポーネント：Foundation 6インラインリスト、サイドナビゲーション、アイコンバー、およびサブナビゲーションを単一の高度にカスタマイズ可能な「メニュー」コンポーネントに統合します。これにより、開発が簡素化され、フレームワークのサイズが削減されます レスポンシブデザイン：<li>単一のコードベースを使用して、さまざまな画面サイズとデバイスで動的に適応するメニューを作成します。 これにより、デスクトップとモバイルの個別のメニューの必要性がなくなります。 <strong></strong>javascriptプラグイン：ドロップダウン、ドリルダウン、アコーディオンメニューなどのプラグインで機能を強化します。すべてキーボードナビゲーションを介してアクセスできます。 <li> 軽量のフレームワーク：メニュー構造のマージにより、フレームワークサイズ（1000行以上のCSSが削除された）が大幅に削減され、荷重時間が速くなり、メンテナンスが容易になりました。 <li>トップバーの拡張：トップバーコンポーネントは、メニューの左右のセクションをサポートし、小さな画面用のレスポンシブトグルを含むようになりました。 <li> 基礎6にメニューを構築します：

コアメニュー構造は簡単です：

class

を備えた要素、<strong></strong>アイテムとリンクのタグが含まれています。 追加のクラスは、メニューの外観と動作を制御します

<ul></ul>シンプルなメニュー：menuクラスを使用してデフォルトのスタイリングを削除し、完全にカスタムルックを作成します。 <li> <a></a>

Horizo​​ntal/Vertical Menus：デフォルトは水平です。垂直方向のために<li>クラスを追加します。

.simple

ネストされたメニュー（サブメナス）：垂直メニュー内のサブメナスの<li>>クラスを備えたネストされた <p></p>要素を使用します。 より複雑な相互作用には、ドロップダウン、ドリルダウン、またはアコーディオンプラグインを使用してください。 .verticalアイコンメニュー： <li>要素（Foundationのアイコンフォントを使用）を使用してアイコンを組み込んだり、タグ内に画像タグを使用したりします。メニューテキストの上に

クラスの位置アイコン。 <ul></ul> .nested

ドロップダウン、ドリルダウン、およびアコーディオンメニュー：これらのJavaScriptを搭載したプラグインは、動的でインタラクティブなメニューを提供します。 これらの機能を有効にするために、<li>、

、および属性をそれぞれ使用します。 イベント処理により、カスタムアクションが可能になります（例：アコーディオンの閉鎖の場合）。

<li>

レスポンシブナビゲーション：data-responsive-menu属性を使用して、さまざまな画面サイズのさまざまなメニュータイプを定義します（例：small-dropdown、medium-drilldown）。

<li>

左/右のセクションを備えたトップバー：コンテナ内の>>クラスを使用して、両側にセクションを持つメニューを作成します。 レスポンシブトグル（.top-bar-left）は、小さな画面にメニューボタンを表示します。 .top-bar-right .top-bar data-responsive-toggle

例（単純な水平メニュー）：

<strong></strong>結論：

<code class="language-html"><ul class="menu">
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 1</a></li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 2</a></li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 3</a></li>
</ul></code>

Foundation 6の再設計されたメニューシステムは、機能と使いやすさの両方を大幅に改善します。 統一されたアプローチは、開発を簡素化し、コードサイズを削減し、応答性を高め、最新の柔軟なWebサイトを構築するための強力なツールになります。

以上が基礎6：新しいメニューコンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。