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

时间:2014-10-30 06:26:36

标签: html css mobile menu

我有一个100%宽x 45px高的海军导航栏。我在导航中心有一个标志(一个复古徽章),理想情况下,这个标尺向上延伸(想象一下皮带扣)。

然而,我希望这个菜单消失,当它变小时变成其中一个方形图标移动菜单(并且有'徽标;移动到菜单下方)。我现在看了大约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 -->  

1 个答案:

答案 0 :(得分:0)

最简单的解决方案是在select标签中简单地包含导航链接。移动设备的呈现方式不同。

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

然后,您可以使用javascript / jquery导航到data-attribute中存储的位置。

然后,您只需隐藏桌面/完整导航,并为移动设备添加样式以获得漂亮的图标。

这是一个演示 - http://codepen.io/anon/pen/ldxpo - 它提供了一个非常基本的设计。我已将选择菜单设置为半透明,以便您可以看到正在发生的事情。你可以根据需要设置/更新它,但应该是一个基本的起点。

希望这有帮助。