我怎樣才能利用Zurb基金會網格來製作菜單欄？

使用網格佈局，我們可以輕鬆地編寫HTML（小中大）以在不同設備上以不同方式顯示信息表。我怎樣才能利用Zurb基金會網格來製作菜單欄？

但是，對於菜單欄，有時需要完全不同的佈局。所以HTML必須寫兩次，一次用於網頁，一次用於移動。我們將根據設備顯示/隱藏。

我的問題是：這個顯示/隱藏是否被認爲是對響應式設計的破解？有沒有更好的方法來做到這一點？

來源

2014-12-02 allenylzhou

Zurb有內置的響應式菜單，但如果您想要兩個截然不同的菜單，有時最好重複一些代碼並在適當時隱藏/顯示它們。

這不是最乾淨的解決方案，但無處不在。您只需決定權衡何時適合您。

來源

2014-12-02 22:13:46

如果你可以找到一種方法來創建HTML，它很容易重新使用CSS來移動菜單，這是最簡潔的方式。通常，所有移動菜單都需要某種切換/按鈕才能部署，因此您至少要將JavaScript或jQuery添加到組合中。

隱藏和顯示內容（也是通過媒體查詢）並不是真正的黑客攻擊，但是在原型設計時工作速度要快得多。

例如，我經常在原型設計時使用Foundation Top-bar，然後使用基本Foundation組件創建一個自定義菜單，然後使用responsive-nav創建移動菜單，因爲它沒有jQuery依賴關係，而且重量更輕。相比之下，很多網站使用頂杆和offcanvas元素，與僅使用網格，按鈕，下拉等相比，這兩者在CSS和JS中都非常沉重。

Ryan說有一個交易。您必須確定乾淨的語義標記對您和您的項目有多重要，並決定是否值得花費額外的時間和精力，爲最終用戶提供基本相同的體驗。

來源

2014-12-09 16:17:51 JAMESSTONEco

對於我的AngularJS應用程序，我現在正在嘗試使用Foundation 5的Interchange來根據窗口寬度交換部分。不幸的是它只是部分工作。 Angular做事的方式存在一些問題。不打算進入細節，但因爲沒有工作，我搜索了不同的解決方案，如

授予那些針對您的問題，所有的解決方案，如果您使用角度和這可能是一個很好的舉動來添加Angular你的武庫。考慮基金會Foundation for Apps的新推出，但針對網絡應用程序創建者。它基於Angular和ui-router。

如果您只是在做一個簡單的網站（產品，產品組合，博客），那麼使用Foundation 5's Interchange似乎是最優雅的解決方案，如果您真的想爲移動和桌面菜單欄使用不同的html佈局（導航欄）。

來源

2014-12-09 22:43:06

經常使用的互換僞部分基於媒體查詢是確定與非js的部件，但放置在一個外部文件時並加載這種方式我不知道，js的立足基礎部件功能正常。另外，你要採取額外的性能損失爲加載外部文件，而不是通過CSS /媒體查詢被內聯解釋。 – JAMESSTONEco 2014-12-10 00:05:28

因此，它是更好的性能明智的，只是有一個導航欄編碼到一個網站或應用的'index.html'，而不是被稱爲在爲局部視圖。這是有道理的，除非要顯示的UI具有應用程序狀態的變化和新的導航。嗯，可是現在我開始重新考慮的只是隱藏和顯示（通過CSS）根據國家新/舊的UI元素的想法。嗯。 – 2014-12-10 17:51:10

我怎樣才能利用Zurb基金會網格來製作菜單欄？

回答

相關問題