如何在响应式布局中为移动屏幕添加另一个导航答案

【问题标题】：How to add another navigation for mobile screen in responsive layout如何在响应式布局中为移动屏幕添加另一个导航
【发布时间】：2012-12-21 11:53:39
【问题描述】：

我正在使用响应式布局进行 wordpress 主题设计。响应式布局是使用 css3 media quires 安排的。目前这个主题导航依赖于大屏幕尺寸的水平超级鱼导航。我想使用超级鱼或手风琴将导航更改为垂直。如何更改移动屏幕的导航？

【问题讨论】：

标签： wordpress layout navigation responsive-design

【解决方案1】：

这实际上取决于菜单的输出代码如何构建以使其具有响应性。但是，这里有一些可能会有所帮助的想法。有时您可以在移动设备上将菜单全部隐藏起来，然后显示另一个版本。这很棘手，因为在 DOM 中隐藏项目仍会将 HTML 输出到移动浏览器上，这会增加加载时间，但有时根据可用性，这是最好的解决方法。

这是一个快速的 sn-p，它在 iPhone 等移动设备上输出滚动选择

<select class="iphone-menu" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Main Menu</option> 
<option value="/">Home</option> 
<option value="/portfolio">Portfolio</option> 
<option value="/services">Services</option> 
<option value="/knowledge">Knowledge</option> 
<option value="/blog">Blog</option> 
<option value="/about">About</option> 
<option value="/contact">Contact</option> 
</select>

我认为你想要的东西虽然你需要寻找这样的东西： http://wpmegamenu.com/

我通常不推荐插件，但此菜单确实可以很好地折叠，以及您想要的方式。也许这可能是一个很好的参考点。他们使列表项在某个点具有 100% 的宽度，然后以不同的方式设置下拉菜单。

它不会做手风琴，但会做下拉菜单。要制作手风琴，您必须使用 javascript 激活窗口调整大小的脚本，因此它只能在移动设备上用作手风琴，并在台式机和平板电脑上关闭。我绝不是 js 方面的专家，所以也许其他人可以更好地指导你，但基本的调整大小功能是这样的：

    function checkWidth(init)
{
    /*If browser resized, check width again */
    if ($(window).width() < 979 ) {

        // accordion script here

    }
    else {
        if (init == false) {

            // deactivate script here

        }
    }
}

// this function returns the width of the browser window
$(document).ready(function() {
    checkWidth(true);

    $(window).resize(function() {
        checkWidth(false);
    });
});

希望这会为您指明正确的方向。我使用这些不同的方法在响应式网站上实现了不同的菜单，它们对我来说效果很好。

【讨论】：

非常感谢朋友！这是切换导航样式背后的主要思想。 On window re-size style 正在改变，所以我可以在窗口 re-size 上放置任何样式。