真正的移動友好的響應菜單四要素

有數以百計的方法來創建響應式導航，僅受限于你的創造力和CSS實現的界限是什么。良好的響應式導航是有點困難–響應菜單必須成為一個移動的菜單，堅持需求和觸摸驅動裝置的規定。手機設計是快速變化的，所以技術也進化。在這個教程中，你將學習哪些移動友好的響應菜單絕對需要現在和你如何解決一些常見的問題。

基礎知識

當設計一個響應的菜單，你必須首先考慮移動狀態，用戶將如何與它互動。良好的移動導航包含以下原則：

    菜單切換很容易識別
    所有的按鈕和鏈接，大到可以用指尖
    提供反饋當一個項目被竊聽
    子仍然可以訪問
    視覺效果是保持簡單
    代碼使用的是跨瀏覽器兼容

例如，我將步行通過一個簡單的響應菜單設計，以水平菜單并將其轉換成了畫布菜單時，屏幕尺寸是768像素以內，包括平板電腦和智能手機。然后我會告訴你如何處理轉換成一個更復雜的菜單，下拉菜單，偽元素和過渡到一個應用程序風格的移動友好的垂直菜單。

每個菜單主要有四個部分：

    元素用戶點擊進入菜單，親切地稱為切換
    菜單本身
    當轉換應該發生
    如何轉換發生

你還需要一個視口元標簽在你的要保持平直，但希望你已經知道：

<meta name=“視口”content=“寬度=設備寬度，初始規模= 1”>

從畫布菜單

雖然我們已經看到了帆布抽屜的網頁設計已經有一段時間了，谷歌的材料設計模式庫移動設計的介紹目前由網頁設計師尋找堅實的指導采用移動第一網站。關閉畫布欄或菜單是谷歌推薦的方式移動導航，因為它與大多數設備和布局好。你不需要如果你不想遵守了菜單的設計指南，但可以在間距和行為上遵循它的建議。

在我們的例子中，菜單是由一個非常簡單的無序列表。

< UL ID =值>
 
 <李class=“切換”>
 
＜div class=“聚類”> < / DIV > < div class=“bar2”> < / DIV > < div class=“bar3”> < / DIV >
 
 </李>
 
 <李> < a href =”“>家</a> </李>
 
 <李> < a href =”“>組合</a> </李>
 
 <李> < a href =”“>博客</a> </李> <
 
李> < a href =”“>接觸</a> </李> <
 
 / UL >

一把帆布菜單滑動和推動布局的工作，你需要把所有的東西都在DIV。這DIV需要至少一個相對位置（所以我們絕對定位元素知道坐）和理想的過渡使其變流好。

容器。{
 
位置：相對；
 
過渡：所有0.3s

1–菜單切換

這個菜單有更多的文本鏈接比可以舒舒服服地放在智能手機屏幕的水平，所以我們需要把它轉換成一個垂直菜單。讓我們的用戶體驗更好，我們要給用戶一個菜單切換訪問此垂直菜單。而漢堡菜單快速脫離流行的桌面網站設計，它仍然是移動用戶識別最熟悉的界面元素。

我們可以讓自己的元素，在切換菜單之外，但這種實現，將其置于菜單可以讓我們少寫CSS和jQuery來處理它的變化將導致更一致的顯示和行為在所有設備和移動瀏覽器。

我選擇來創建這個圖標的div元素，而不是使用一個圖標字體或Unicode字符，因為它將使我們的動畫和轉換成X菜單打開時。這里是如何創建三條：

# NAV。撥動{
 
顯示：無；
 
位置：絕對的；
 
左：- 55px；
 
頂：0；
 
鼠標指針；
 
背景：RGBA（0, 0, 0、0.6）；
 
填充：15px 15px 10px；
 
 }
 
 
 
 #資產凈值。切換。bar1，
 
 # NAV。切換。2，
 
 # NAV。切換。bar3 {
 
寬度：25px；

我們不想讓漢堡在桌面布局可見，所以我們使用顯示：無；作為一個默認的狀態。該按鈕位于左上方的帆布抽屜。一個常見的錯誤是，在桌面的設計–過于復雜的方式去了解這方面的定位切換。總是對的切換與控制元件。

這個高度和寬度由是切換襯墊，結束了在55px平方。蘋果iPhone人機界面指南推薦的最小目標尺寸的嗎？44px？寬44px？個子高高的，而微軟的Windows Phone的用戶界面設計和交互指南建議至少34px觸摸目標大小。Android使用DP在其設計的標準單元，推薦48dp可在大多數屏幕48px。我們保證我們55px覆蓋。

最后，該過渡在每一條處理的時間轉型我們將添加在竊聽或點擊。

2–菜單

這種特殊的菜單風格非常簡單。重要的一點是用來設置每個列表項下另一個內聯塊屬性，利用漂浮的首選方法。在下一節中，你會看到這些主要的聲明改變菜單的垂直。

# NAV {
 
文本對齊：中心；
 
保證金：0；
 
填充：15px 0；
 
寬度：100%；
 
 }
 
 
 
 # NAV李{

3–媒體查詢和點擊事件

這“媒體查詢采用封閉方式只有當視圖是768px寬或更小，平板電腦和智能手機的典型尺寸。要查看完整的代碼演示上面的CSS標簽。下面突出的重要一部分，從原來的風格樣式的變化：

“媒體（最大寬度：768px）{
 
。撥動{
 
顯示：塊；
 
 }
 
 # NAV {
 
寬度：230px；
 
高度：100%；
 
位置：絕對的；
 
頂：0；
 
右：- 230px；
 
 }
 
 # NAV李{
 
顯示：塊；
 
 }
 
 # NAV李：懸停，# NAV李：焦點{
 
邊框顏色：透明；
 
背景：

首先我們改變顯示：無；我們的漢堡顯示：塊；所以，它是可見的。

接下來，我們改變寬度的資產凈值從100%到230px并給它一個高度100%，以前是在75px休息，基于導航鏈接字體大小和填充高度自適應。

導航定位絕對使用負價值等于它的寬度是用來抵消容器230px向左移動，我們將在下一節。

讓我們的列表項堆疊水平，我們重置內聯塊與塊。

最后，在保持移動用戶的想法，我們需要添加一個焦點國家在各環節利用，作為在不影響觸摸屏。我們還添加了：hover狀態這個規則對于桌面用戶，可能是瀏覽器窗口大小。

我們要切換到打開菜單時，它與觸摸設備點擊。我們也希望菜單滑動和移動內容而非下拉或重疊。這有助于避免問題長菜單或widges掩蓋內容，防止不必要的滾動條和避免問題的菜單的內容如閃光或帆布元素與較高的Z順序夾。

處理單擊動作，我們將使用一個非常簡單的jQuery代碼段：

$（document）。準備（function() {
 
 $（'切換'），點擊（function() {
 
 $（' #資產凈值”）。toggleClass（打開的）；
 
 $（'容器'），toggleClass（'menu-open '）；
 
 }）；
 
；

這將會檢測點擊（或自來水）的切換和添加一個類開放到#資產凈值一類菜單打開在主容器包裝我們的布局。這些課程將使我們能夠申請將它綁在一起。記住添加jQuery庫你的項目工作！
4–行為

現在我們進入如何使菜單表現很好CSS3轉換。我們剛剛添加一個jQuery代碼段，添加一個類菜單打開我們的容器DIV當切換點。我們可以將這類左移與容器樣式規則翻譯（在它以外的絕對定位元素的一切）。我們使用一個負值移動容器的左，因為菜單是正確的。

。container.menu-open {
 
變換：翻譯（- 230px，0）；

改變我們的漢堡到X的開放類是用來設置組合旋轉和翻譯移動bar1和三維直方圖成對角線，并隱藏2使用不透明度。你可以使用顯示：無打開（放）2，但它不會利用過渡效果，只是眨眼消失。

# nav.open。酒吧。bar1 {
 
變換：旋轉（45deg）翻譯（8 7px）；
 
 }
 
 
 
 # nav.open。酒吧。2 {
 
不透明度：0；
 
 }
 
 
 
 # nav.open。酒吧。bar3 {
 
變換：旋轉（45度翻譯（7px，-）

這是轉換成了畫布的橫向菜單菜單使用媒體查詢的基礎知識，以及使用jQuery來檢測點擊事件顯示。

在下面的這個例子中，我將向你展示一個更復雜的菜單和如何具體問題如下拉工作和如何使用jQuery檢測屏幕寬度。
多層次的手機菜單

我不會說這個菜單的設計–細節檢查在演示的代碼標簽，看我如何使用布局和改變下拉作用高度值的一些基本的轉換flexbox。下面，我將重點放在如何將這些類多個頂級鏈接菜單，子菜單的多個層面，而需要以同樣的標題元素標志對齊。我們最需要的橫向菜單的行為和布局，在移動設備上的變化，但視覺風格保持一致。

這個菜單使用一些你已經從過去的例子學到的技術，如將漢堡菜單添加類jQuery控制行為。下面，我將重點放在特定的移動菜單突出的主要區別。

在我們的資產凈值有三個主要元素，標志，漢堡菜單，主菜單，從一個標準的無序列表創建。

<資產凈值ID = 'flexmenu”>
 
＜div class=“標志”>
 
 < a href =”“> <h1>風格</h1> </a>
 
 < / DIV >
 
 <divid=“手機肘”class=“按鈕”> < / DIV >
 
＜UL id =“主菜單”>
 
 <李>…</李> <
 
 UL類”子菜單的“>
 
 <李>…</李> <
 
 / UL >
 
 <李>…</李>
 
…等
 
 < / UL >
 
 < /導航>

這是由我們的內容的容器，我們想向下移動，當移動菜單切換開。像其他的菜單，這就需要我們添加一個相對的位置至少：

#main{
    height: 100vh;
    width: 100vw;
    position: relative;
}

1 – Mobile Toggle

The toggle in this demo is a separate div outside of the main menu structure. We could do it the same way as the previous example, but menus generated by systems like WordPress don’t allow that, so giving it its own element in the markup is easier to deal with.

當造型的切換，繼續推薦觸摸大小記在心里，并給它一個高Z指數確保它永遠不會被掩蓋的內容重疊。保持開關的地方，你也需要絕對的位置。由于我們的菜單會從切換擴展，而不是從畫布，我們可以在這里使用正常值。

 
。按鈕{
 
背景：# 751cec；
 
寬度：60px；
 
高度：48px；
 
位置：絕對的；
 
右：0；
 
頂：0

切換本身是以類似的方式對我們最后的切換偽元素創建的，因此很容易轉換成X以后。
2–菜單

我們不需要做太多風格的菜單的移動狀態，除了引起問題的橫向菜單復位方式。大多數的工作，進場時應對下拉。你總是可以迫使所有的子菜單將擴大為默認，但這可能導致長期的菜單，滾動–力本身的問題。最好是把他們變成手風琴，擴大當抽頭。比較原始和移動規則：

# flexmenu UL UL {
 
位置：絕對的；
 
左：- 9999px；
 
 }
 
 
 
 # flexmenu UL UL UL {
 
 margin-left: 100%；
 
頂：0；
 
 }
 
 
 
 @媒體屏幕（最大寬度：768px）{
 
 
 
 # flexmenu UL UL，
 
 # flexmenu UL UL UL {
 
位置：相對；
 
左：0；
 
寬度：100%

在我們的子菜單風格，下拉了絕對的位置“其母聯系下，和負值用于創建洗牌效應當它盤旋。三級菜單被推到100%的寬度其母用邊緣所以它彈出的權利。我們重新為手機版，子菜單就可以得出它的父。由于沒有徘徊，我們也不需要定位技巧。
3–媒體查詢和點擊事件

你已經看到了媒體查詢用的房子我們的移動菜單的風格和重置，所以我會跳過jQuery吧。

在這里，我們使用jQuery做兩件事：檢測點擊添加CSS類，并檢測屏幕大小來確定類的刪除的情況下，頁面沒有加載之間的變化。

當元素的按鈕班點，一菜單打開添加類。如果再次單擊，類被刪除。

$（這）找到（'按鈕），（聽到咔噠聲，函數（）{
 
 $（這）。toggleClass（'menu-opened '）；
 
 VAR MainMenu =美元（這）。下一個（'ul '）；
 
如果（主菜單。hasclass（‘’））{
 
主菜單。slidetoggle()。removeClass（打開的）；

這也增加了一個開放類是影響子元素，這是僅用于查詢下，雖然你可以使用CSS如果你想。

    在這里，我們找到的所有實例鋰其次是UL，顯示子菜單的存在，并添加一個類有子這個子菜單UL。
    所有項目的有子課堂上獲得一個下拉切換與類子菜單按鈕這是我們的風格，“媒體查詢。
    當子菜單按鈕點擊，得到一類子菜單打開，和公開課是有兄弟姐妹和刪除slidetogglejQuery的動畫添加。

這是什么創造了手風琴的基本解剖，以及我們如何管理這些元素的造型以最有效的方式，不寫每一噸不必要的CSS選擇器或單獨的單擊事件。

flexmenu。找到（李UL）。parent() .addClass（'has-sub '）；
 
 subtoggle =函數（）{
 
 flexmenu。找到（'。有子”）。在（“<跨度class=”子菜單按鈕“> < /跨度>”）；
 
 flexmenu。找到（'。”子菜單按鈕），（聽到咔噠聲，函數（）{
 
 $（這）。toggleClass（'submenu-opened '）；
 
如果（$（this），兄弟姐妹（'ul”）。hasClass（‘’））{
 
 $（這），兄弟姐妹（'ul”removeClass）。（打開的）。slidetoggle()；
 
 } {
美元其他
（這），兄弟姐妹（'ul”）。addClass（打開的）。slidetoggle()；
；

最后，讓我們添加一個調整修復。這只是使事情發生我們需要他們如果瀏覽器被調整的方式，在活動方式和查詢移動視圖依賴沒有正確觸發。

resizefix =函數（）{ var
 
 mediasize = 768；
 
如果（$（窗口）。width() > mediasize）{
 
 flexmenu。發現（'ul”）。show()；
 
 }
 
如果（$（窗口）。width() <= mediasize）{
 
 flexmenu找到（'ul。”）。hide()。removeClass（打開的）；
 
 }
 
 }；
 
 resizefix()；
 
返回$（；

4 - Behavior

菜單上的最后涉及到改造切換，和菜單上滑下來。

首先我們將利用這菜單打開了。類添加到我們的按鈕通過單擊切換jQuery添加一些風格的變化和轉型到旋轉酒吧為X：

。按鈕。菜單打開：
 
過渡后{：所有的s緩解；
 
頂：23px；
 
邊境：0；
 
高度：2px；
 
寬度：19px；
 
背景：# FFF；
 
變換：旋轉（45deg）；
 
 }
 
按鈕。。菜單打開：在{
 
頂：23px；
 
背景：

這個過渡負責制定國家之間的變化顯得光滑。在這里可以了解更多的關于轉換。

是這么回事！菜單是塊元素，所以它自然會推動內容容器下。
結論

只要你用手機導航的基本知識，你的響應菜單-確保鏈接和切換響應水龍頭，足夠大，足夠簡單，轉換工作在大多數移動設備和瀏覽器，你不應該遇到很多問題。

反應是一種特殊的藝術，需要大量的用戶行為的理解和研究，CSS單位和總體設計，但是了解如何您可以將菜單和工具，幫助你最會讓你對你的方式來建立自己的實現，適合您的項目的最佳。下面是一些資源進入這里所使用的技術的更多細節，并在那里你可以找到更棒的例子。