如何將此響應式導航轉換爲移動菜單？

Question

我有一個100％寬x 75px高的海軍導航欄。我在導航中心有一個徽標（一個復古徽章），理想情況下，這個徽標位於此杆的上方（考慮皮帶扣）。

但是，我想讓這個菜單消失，當它變小（並且具有'徽標;移動到菜單下方）時，它就會變成這些方形圖標移動菜單之一。我已經看了大約4個教程，並沒有一個適合我。

我正在使用「響應式網格系統」來構建我的網站。

設計參考：CLICK ME (:

<div id="navigation"> 
    <nav id="primary_nav"> 
     <ul> 
       <li><a href="">home</a></li>     
       <li><a href="">about</a></li>        
       <li><a href="">services</a></li>   
       <li><a id="logo" href="/"><img src="images/CarpetRepair_Logo.png" alt="Logo"></a></li> 
       <li><a href="">photos</a></li>   
       <li><a href="">contact</a></li> 
       <li><a id="FB" href="/"><img src="images/FB_Logo.jpg" alt="Facebook"></a></li>    
      </ul> 
     </nav> 
</div> <!-- navigation end --> 

Answer 1

最簡單的方法是簡單地包含選擇標記中的導航鏈接。不同移動設備呈現的內容不同。

<select> 
<option data-link="url-of-lin">Link 1</option> 
... repeat ... 
</select> 

然後，您可以使用javascript/jquery導航到存儲在數據屬性中的位置。

然後，您只需隱藏您的桌面/完整導航，並設置移動設備的風格以便擁有一個漂亮的圖標。

這是一個演示 - http://codepen.io/anon/pen/ldxpo - 它提供了一個非常基本的設計。我已經使選擇菜單半透明，所以你可以看到發生了什麼。您可以根據需要設置樣式/更新，但應該是一個基本的起點。

希望這會有所幫助。