Html 如何制作此菜单+；下拉按钮响应？_Html_Css_Drop Down Menu_Responsive Design

Html 如何制作此菜单+；下拉按钮响应？

html css drop-down-menu responsive-design

Html 如何制作此菜单+；下拉按钮响应？,html,css,drop-down-menu,responsive-design,Html,Css,Drop Down Menu,Responsive Design,我一直在努力使我的导航（包括“works”下拉按钮）响应，通过右上角通常的三条平行线显示它们，然后在手机上单击时显示我在导航栏上写的内容我已经试了大约两个小时，结果都不理想。我很确定这不是最难的事，但我似乎做得不对。我很想了解它是如何工作的。这是桌面大小，无响应导航栏以下是html： <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

我一直在努力使我的导航（包括“works”下拉按钮）响应，通过右上角通常的三条平行线显示它们，然后在手机上单击时显示我在导航栏上写的内容

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

以下是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>

通过执行以下步骤可以获得基本的汉堡菜单：

1）使用burger菜单类作为要在移动屏幕宽度上隐藏的导航的上一个同级元素创建一个。
a）你不想让它显示在你的桌面媒体上，所以在css中，把它设为

display:none



2） 为所需设备创建媒体查询。移动设备的速度为480px。



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



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



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

.burger-menu:hover + .menu {

}

这意味着，当您将鼠标悬停在汉堡菜单上时，将影响.menu的css。您可以在上面的CSS选择器中放置.menu的样式将如何受到影响
下面是这个过程如何与代码一起工作的一个基本示例
在菜单

通常，您可以通过使用JQuery的toggleClass
，在单击burger菜单时添加和删除导航菜单中的显示，来实现这一点
p.s使用spans创建汉堡菜单的好处在于，当您希望它具有良好的动画效果，从汉堡菜单更改为十字或箭头等。
可以通过执行以下步骤来实现基本汉堡菜单：



1） 使用burger菜单类作为要在移动屏幕宽度上隐藏的导航的上一个同级元素创建一个。

a） 你不想让它显示在你的桌面媒体上，所以在css中，把它设为display:none



2） 为所需设备创建媒体查询。移动设备的速度为480px。



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



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



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

.burger-menu:hover + .menu {

}

这意味着，当您将鼠标悬停在汉堡菜单上时，将影响.menu的css。您可以在上面的CSS选择器中放置.menu的样式将如何受到影响
下面是这个过程如何与代码一起工作的一个基本示例
在菜单

通常，您可以通过使用JQuery的toggleClass
，在单击burger菜单时添加和删除导航菜单中的显示，来实现这一点
p.s使用spans创建汉堡菜单的好处在于，当您希望它具有良好的动画效果，从汉堡菜单更改为十字或箭头等。
这里有一个具有响应菜单列表的解决方案。现在，您应该将此菜单列表添加到项目中

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
body{margin:0；字体系列：Arial}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
李先生{
显示：内联块；
浮动：左；
线高：28px；
边缘顶部：10px；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.主动{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字号：17px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉列表内容a，李{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.topnav a:悬停，.dropdown:悬停.dropbtn{
背景色：#555；
颜色：白色；
}
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
.下拉：悬停.下拉内容{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），.dropdown.dropbtn{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.responsive.dropdown{float:none；}
.topnav.responsive.下拉列表内容{位置：相对；}
托普纳夫博士
<div class="burger-menu"></div>
    <div class="menu">

.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;
  }
}