[英]How can I make the default Nav Menu into a Responsive toggle navigation menu?
I have working on a site( http://sitepreview.net63.net/ ). 我在一个网站( http://sitepreview.net63.net/ )上工作。 But I want to make it a responsive site. 但我想使其成为响应式网站。 So I want to make the navigation menu( which comes from the Wordpress Menu Bar ) a toggle navigation menu in the small screens. 因此,我想使导航菜单(来自Wordpress菜单栏)在小屏幕上成为切换导航菜单。 I am giving an image link here, where you can check what I want, please go to this link: http://sitepreview.net63.net/wp-content/uploads/2013/10/responsive-nav-menu.jpg . 我在此处提供图像链接,您可以在此处查看我想要的内容,请转到此链接: http : //sitepreview.net63.net/wp-content/uploads/2013/10/sensitive-nav-menu.jpg 。
You will need to use media queries
to disable the nav
and show the mobile nav
. 您将需要使用media queries
来禁用nav
并显示移动nav
。 You then can use some jQuery to know if the screen size is this size to add click function to the nav. 然后,您可以使用一些jQuery来了解屏幕尺寸是否为此尺寸,以将单击功能添加到导航中。
Something like this 像这样
HTML 的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 的CSS
.fullNav {
/*Code goes here */
}
.mobileNav {
/*Code goes here */
display: none;
}
Media Query 媒体查询
@media only screen and (max-width: 680px) {
.fullNav {
display: none;
}
.mobileNav {
display: block;
}
}
jQuery jQuery的
if ($(window).width() < 680) { // if statement is not 100% needed
$('.mobileNav').on('click', function() {
$(this).children().slideToggle();
}
}
Header tag 标头标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.