Question

我正在开发具有响应式布局的wordpress主题设计。使用css3媒体quires安排响应式布局。目前，此主题导航依赖于大型屏幕尺寸的水平超级鱼导航。我想使用superfish或accordian将导航更改为垂直。如何更改移动屏幕导航？

Answer 1

这实际上取决于菜单输出代码的结构如何使其响应。但是，这里有一些可能有所帮助的想法。有时您可以在移动设备上隐藏菜单，并显示另一个版本。这很棘手，因为在DOM中隐藏项目仍会将HTML输出到移动浏览器上，从而增加了加载时间，但有时这是最佳修复，具体取决于可用性。

这是一个快速摘录，可在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);
    });
});

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

如何在响应式布局中为移动屏幕添加其他导航

1 个答案: