如何将此响应式导航转换为移动菜单？

我有一个100％宽x 75px高的海军导航栏。我在导航中心有一个徽标（一个复古徽章），理想情况下，这个徽标位于此杆的上方（考虑皮带扣）。如何将此响应式导航转换为移动菜单？

但是，我想让这个菜单消失，当它变小（并且具有'徽标;移动到菜单下方）时，它就会变成这些方形图标移动菜单之一。我已经看了大约4个教程，并没有一个适合我。

我正在使用“响应式网格系统”来构建我的网站。

<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 -->

来源

2014-10-30 May

最简单的方法是简单地包含选择标记中的导航链接。不同移动设备呈现的内容不同。

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

然后，您可以使用javascript/jquery导航到存储在数据属性中的位置。

然后，您只需隐藏您的桌面/完整导航，并设置移动设备的风格以便拥有一个漂亮的图标。

这是一个演示 - http://codepen.io/anon/pen/ldxpo - 它提供了一个非常基本的设计。我已经使选择菜单半透明，所以你可以看到发生了什么。您可以根据需要设置样式/更新，但应该是一个基本的起点。

希望这会有所帮助。

来源

2014-10-30 08:00:10 lukeocom

如何将此响应式导航转换为移动菜单？

回答

相关问题