如何将默认导航菜单设置为Resonsive切换导航菜单？

我在网站上工作（http://sitepreview.net63.net/）。但我想让它成为一个快速响应的网站。所以我想让导航菜单（来自Wordpress菜单栏）在小屏幕中切换导航菜单。我在这里给出一个图像链接，在那里你可以检查我想要的，请到这个链接：http://sitepreview.net63.net/wp-content/uploads/2013/10/responsive-nav-menu.jpg。所以请帮我解决这个问题。谢谢。如何将默认导航菜单设置为Resonsive切换导航菜单？

来源

2013-10-28 Joy_S

你想使用的引导？ –

我用代码从该网站：http://www.rvamedia.com/wordpress/collapsible-responsive-menu-for-genesis但它不会为我工作。 @丹科。 –

我不喜欢使用Bootstrap，因为这个网站已经制作了一个Responsive THeme。 @ Bharath –

您将需要使用media queries禁用nav和显示移动nav。然后，您可以使用一些jQuery来知道屏幕尺寸是否是这个尺寸，以将点击功能添加到导航栏。

像这样的事情

HTML

<nav class="fullNav"> 
    <ul> 
     <li>home</li> 
     <li>About</li> 
     <li>Blah Blah</li> 
    </ul> 
</nav> 
<nav class="mobileNav"> 
    <ul> 
     <li>home</li> 
     <li>About</li> 
     <li>Blah Blah</li> 
    </ul> 
</nav>

CSS

.fullNav { 
    /*Code goes here */ 
} 
.mobileNav { 
    /*Code goes here */ 
    display: none; 
}

媒体查询

@media only screen and (max-width: 680px) { 
    .fullNav { 
     display: none; 
    } 
    .mobileNav { 
     display: block; 
    } 
}

的jQuery

if ($(window).width() < 680) { // if statement is not 100% needed 
    $('.mobileNav').on('click', function() { 
    $(this).children().slideToggle(); 
    } 
}

页眉标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">

来源

2013-10-28 16:14:20

其实我想使用来自Wordpress仪表板的默认导航菜单：外观 - >菜单。那么它会在那里工作吗？ –

是的，如果您使用媒体查询，它将起作用，当屏幕尺寸小于特定尺寸时，它们将用于更改您选择的任何样式。如果您不隐藏/显示每个导航，则需要更改所有样式以符合移动设备的外观。这是100％可能只是需要更多的工作/测试！ –

我已经使用这个，也定制了一些，但它不工作。您可以在网站上查看。 –

如何将默认导航菜单设置为Resonsive切换导航菜单？

回答

相关问题