Question

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

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

Answer 1

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

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

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

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

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

希望这有帮助。

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

1 个答案: