我正在完善一个响应式导航菜单，并希望单击菜单图标以显示下拉菜单而不是悬停效果。我正在使用 Google jquery，所以我不确定脚本 src 中是否已经准备好脚本，我是否必须在 jquery 中手动创建下拉菜单或只是一个简单的 CSS 或 html5 修复。感谢您的任何反馈。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dan Meier Website</title>
<meta name="description" content="Responsive Header Nav">
<meta name="author" content="Treehouse">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="layoutnew.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
CSS
header {
background: #404040;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;
}
#logo{
margin: 20px;
float: left;
width: 200px;
height: 40px;
background: img src="images/menuicon.png" no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
最佳答案
使用 CSS 设置菜单样式和隐藏菜单并执行以下操作:
加载 jQuery(我在你的代码中看不到)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
你可以做这样的事情(在点击时显示和隐藏菜单)
$('#menu-icon').click( function(){
$('nav ul').toggle();
});
关于css - 单击响应式布局的下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23224408/