我正在尝试创建一个响应式导航菜单，该菜单会在窗口大小缩小时缩小。我已经让它在 jquery 和 css 中工作，但它在移动设备上很慢，我读到最好只用 CSS 编写代码，但我一直无法找到解决方案。这是我目前拥有的 jquery、html 和 css。感谢任何帮助
J查询代码:
$(function() {
var menu = $('#top_menu');
menu = $('nav ul');
menuHeight = menu.height();
$(top_menu).click(function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 720 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
HTML代码:
<nav>
<ul>
<li><a href="<?php bloginfo('url'); ?>/forum">Forums</a></li>
<li><a href="<?php bloginfo('url'); ?>/aboutus">About Us</a></li>
<li><a href="<?php bloginfo('url'); ?>/Portfolio">Portfolio</a></li>
</ul>
<a href="#" id="top_menu">Menu</a>
</nav>
CSS 代码:
nav a#top_menu {
display: block;
background: url('../images/main_logo.png') no-repeat;
background-position: 20px 17px;
text-indent: -9999em;
position: relative;
width: 100%;
border-bottom: 1px solid transparent;
}
nav a#top_menu:hover {
border-bottom: 1px solid #305f6d;
}
nav a#top_menu:after {
content:"";
background: url('../images/mini.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 15px;
}
最佳答案
如果您想使用纯 CSS 实现此目的，那么您真的应该看看 Navigataur (https://coderwall.com/p/sujd_w)，它是一种纯 CSS 解决方案，而不是使用 jQuery。
设置如下:
- 在您的
<head>之间引用样式表像这样的标签:
<html> <head><link rel="stylesheet" type="text/css" href="navigataur.css"></head> <body> </body> </html>
- 如果以下任何元素名称已在您的 css 文件中使用，请编辑您的 CSS 元素名称
要开箱即用，您需要对标记进行以下调整(如果您使用不同的东西，可以在样式表中更改类):
- 外衣
<div>类header - ID 为
toggle的输入 [type=checkbox]和 label[for=toggle] 类别为toggle就在您的列表菜单上方。 - 类为
menu的列表菜单(ul 或 ol)
改变你的
- HTML 代码(尽可能简单的示例):
<input type='checkbox' id='toggle'/> <label for='toggle' class='toggle'></label> <ul class="menu"> <li><a href="#">Google</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Youtube</a></li> <li><a href="#">Twitter</a></li> </ul>
就是这样，你就完成了!
这是 Navigataur 的实际演示:http://micjamking.github.com/Navigataur/
关于jquery - 响应式导航菜单 CSS 可能取代 Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16203894/