javascript - 响应式移动汉堡菜单
问题描述
我几乎完成了我的网站,只是我的下拉菜单不起作用。我试过谷歌搜索并向朋友寻求建议,但没有任何帮助。下面我附上了使用或提到下拉菜单的代码:
/*Responsive Navigation*/
$(document).ready(function() {
$('.toggle').click(function() {
$('.toggle').toggleClass('active')
$('nav ul').toggleClass('active-menu')
})
});
@media(max-width:900px) {
.toggle {
display: block;
}
.toggle:before {
content: '\f0c9';
font-family: fontAwesome;
line-height: 0px;
margin-left: -30px;
}
.toggle.active:before {
content: '\f00d' !important;
}
}
/*Navbar full Screen*/
.toggle {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="" class="dropdown">
<div class="toggle"></div>
</a>
<!--Menu items-->
<ul class="menu">
<li class="active"><a href="#main">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact-form">Contact</a></li>
</ul>
解决方案
为此,您将需要一些巨大的代码。看一下这个!正是你需要的。
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin-right: 2;
margin-left: 2;
}
.topnav {
overflow: hidden;
background-color: black;
padding-left: -2;
padding-right: -2;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #eee;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px)
{
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<p>Resize the browser window to see how it works. If your screen is more than 600px wide, the menu will be in one line. If not, it will be a hamburger menu.</p>
</body>
</html>
推荐阅读
- algorithm - 检查一个简单的无向图是否是三连接的
- c++ - 使用 boost 序列化多态类
- python - VSC 将为 Azure Functions 重新创建整个 Python 环境
- java - 如何在 Vaadin Flow 中使用自定义组合框过滤和 DataProvider?
- python - 关于 randint 和 if 的问题
- c++ - 什么是使用 opencv::Mat 优化 c++ 矩阵计算
- sass - 用户代理样式表位于何处,如何禁用它?
- ios - 使用 NSRunLoop 正确使用辅助 NSThread
- spring-data-jpa - Neo4jTransactionManager 不允许支持自定义隔离级别
- php - 控制器在 Symfony 中未显示 WSDL /w SoapServer