如何使此菜单+下拉按钮响应

我一直试图让我的导航(包括"工作"下拉按钮(通过右上角通常的三条平行线显示，然后在手机上点击时显示我在导航栏上写的内容。

我已经试了大约两个小时，但没有取得好的结果。我很确定这不是最难的事情，但我似乎做不好。很想了解它是如何工作的。这是桌面大小的无响应导航栏。

这是html:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURORA CATERA -- 2020 ALL RIGHT RESERVED</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<a href="index.html"><img src="img/AURORA-YLOW-FIN.png" alt="logo"></a></div>

<div class="menu">
<ul>
<li><a href="index.html">ALL</a></li>
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
<a href="#">PHOTOS</a>
<a href="#">VIDEOS</a>
<a href="posters.html">POSTERS</a>
</div>
</div>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="https://www.instagram.com/auroracatera" target="_blank"><i class="fa fa-instagram"></li></i></a>
</ul>
</div>
</body>
</html>

这是CSS：

.wrapper{
width: 100%;
}
body{
margin: 0;
padding: 0;
background-color: black;
}
.header{
padding: 5px 0px;
display: inline-block;
width: 100%;
}

.header img{
max-height: 400px;
max-width: 550px;
margin-left: 60px;
margin-top: 30px;
}

.menu{
float: right;
position: relative;
display: inline-block;
top: -85px;
left: 0px;
margin-right: 70px;
}
.menu ul li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.menu ul li a{
text-decoration: none;
color:#F8E315;
font-family: Rajdhani, "sanf serif";
font-size: 15px;
padding: 5px 10px;
}
.menu ul li a:hover{
color:#C7C7C7;
}
.dropbtn {
background-color: black;
color: #F8E315;
padding: 14px;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
border: none;
}
.dropbtn:hover{
color: #c7c7c7;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}

.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #F8E315;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: black;
color: #c7c7c7;
}
.dropdown:hover .dropdown-content {
display: block;
}

基本的汉堡菜单可以通过执行以下步骤来实现：

1(创建一个汉堡菜单类，作为要隐藏在移动屏幕宽度上的导航的前一个同级元素
a(您不希望它显示在桌面媒体上，所以在css中，将其样式设置为display: none;

2(为所需设备创建媒体查询。假设移动设备为480px

3(在此媒体查询中，将悬停(或单击(时要显示的导航设置为display: none;

4(在此媒体询问中，设置汉堡菜单的样式。在我的例子中，出于时间原因，我已经设计了一些非常基本的东西，但你可以研究使用跨度来制作响应汉堡菜单

5(在此媒体查询中，为汉堡菜单声明一个悬停伪类，该类访问隐藏导航。由于您将汉堡菜单放置为导航的上一个同级元素，因此可以使用+css规则将其作为目标

.burger-menu:hover + .menu {
}

这意味着，当你将鼠标悬停在汉堡菜单上时，你会影响.menu的css。你可以在上面的css选择器中放置.menu样式的影响方式。

下面是一个关于这个过程如何与代码一起工作的基本示例。

在.menu <div>之前将其添加到您的html中

<div class="burger-menu"></div>
<div class="menu">

将其添加到您的css文件中，位于底部

.burger-menu {
display: none;
}
@media (max-width: 480px) {
.menu {
display: none;
}
.burger-menu {
display: block;
background-color: white;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
right: 10px;
}
.burger-menu:hover + .menu {
display: block;
}
}

通常，您可以通过使用toggleClass和JQuery在单击汉堡菜单时向导航菜单添加和删除显示来推进这一点。

p.s使用跨度创建汉堡菜单的好处是，当你希望它有很好的动画时，可以从汉堡菜单更改为十字或箭头等。

这里有一个具有响应菜单列表的解决方案。现在您应该将此菜单列表添加到您的项目中。

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.menu li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;    
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a, li {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!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">
<div class="topnav" id="myTopnav">
	<a href="index.html">ALL</a>
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
<a href="#">PHOTOS</a>
<a href="#">VIDEOS</a>
<a href="posters.html">POSTERS</a>
</div>
</div>
<a href="about.html">ABOUT</a>
<a href="contact.html">CONTACT</a>
<a href="https://www.instagram.com/auroracatera" target="_blank">         <i class="fa fa-instagram"></i>
</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>

</div>

我希望你能用它做点什么，并将它添加到你的项目中。。。

相关内容

最新更新

热门标签：