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

I am working on wordpress theme design with responsive layout. Responsive layout is arranged using css3 media quires.Currently this theme navigation depends on Horizontal superfish navigation for large screen sizes. I want to change my navigation to vertical using superfish or accordian. How can I change my navigation for mobile screen?

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

1 个解决方案

#1

This really depends on how the output code for your menu is structured to make it responsive. However, here are a couple ideas that may help. Sometimes you can hide the menu all together on mobile and have another version show up. This is tricky because hiding items in the DOM still output the HTML onto the mobile browser which increases the load time, but sometimes it is the best fix depending on usability.

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

Here is a quick snippet that outputs the scroll select on a mobile device like iPhone

这是一个快速片段，可在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>

I think for what you are wanting though you need are looking for something like this: http://wpmegamenu.com/

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

I normally don't recommend plugins but this menu does collapse very well, and how you are wanting. Maybe this could be a good reference point. They make the list items 100% width at a certain point and then style the drop downs differently.

我通常不建议插件，但这个菜单确实崩溃得很好，你想要的方式。也许这可能是一个很好的参考点。它们使列表项在某个点上具有100％的宽度，然后以不同的方式设置下拉样式。

It doesn't do an accordion but it does do the drop downs. To do an accordion you would have to activate a script on window resize with javascript so it only functioned as an accordion on mobile and turned off on desktops and tablets. I am by no means an expert at js so maybe someone else can direct you better but a basic resize function would be something like this:

它不是手风琴，但它确实做了下降。要做手风琴，你必须使用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);
    });
});

Hopefully this points you in the right direction. I have implemented different menus on responsive sites using these different methods and they have worked well for me.

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

#1