次のFoundationCSSフレームワークドキュメントのURLにアクセスします：http： //foundation.zurb.com/docs/navigation.php
ナビゲーションバーという名前のセクションに、水平ナビゲーションバーの例が表示されます。次に、ブラウザのウィンドウを徐々に最小化してみてください。ウィンドウが十分に最小化されると（モバイルデバイスの解像度のように）、水平方向のナビゲーションバーが垂直方向のナビゲーションバーに変わります。メニューで発生したこの動作の技術的な定義を知る必要があります。
レスポンシブウェブデザインをお探しだと思います。これは、ユーザーエージェントのビューポートに基づいて適応する設計です。
たとえば、Twitterのブートストラップフレームワークには、レスポンシブデザインが組み込まれています。
各メニュー項目を使用してその効果を再現しましwidth: auto; float:leftた。サイズ変更イベントでは、すべての項目が上部に配置されているかどうかを確認しています。アイテムが整列していない場合、私はに変更していますwidth:100%
これが私が得たものの例です：www.gabitzish.com（メニューを参照）