我有一个关于响应度的问题。我希望这个符号“=”在屏幕较小时(比如 1000 像素)容纳所有菜单。我知道我必须使用响应性，但我不知道如何使用。
这是我的索引:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<title>Tagesmutter Kiel</title>
</head>
<body style="background-color: #41430e">
<!--a href="javascript:void(0);" class="icon" onclick="allLinksInOneDiv()">☰</a-->
<div id="menu">
<div class="icon-bar">
<a class="active" href="index.html"><i class="fa fa-home"></i></a>
</div>
<div class="dropdown_wohnen">
<button class="dropbtnWohnen">Wohnen</button>
<div class="wohnen_content">
<a href="wohnen.html">Eingenwöhnung</a>
<a href="konzeption.html">Konzeption</a>
</div>
</div>
<div class="dropdown_betreung">
<button class="dropbtnBetreung">Betreungskosten</button>
<div class="betreungskosten_content">
<a href="betreuungskosten.html">Betreuungskosten</a>
<a href="freiePlaetze.html">Freie Plätze</a>
<a href="fotos.html">Bilder</a>
</div>
</div>
<div class="dropdown_tag">
<button class="dropbtnTag">Tagesablauf</button>
<div class="tag_content">
<a href="tagesablauf.html">Tagesablauf</a>
<a href="tageskinder.html">Tageskinder</a>
<a href="kommentar.html">Gästebuch</a>
</div>
</div>
<div class="dropdown_kontakt">
<button class="dropbtnKontakt">Kontakt</button>
<div class="kontakt-content">
<a href="kontakt.html">Kontakt</a>
<a href="urlaub.html">Urlaub</a>
<a href="info.html">Über mich</a>
</div>
</div>
</div>
<div class="banner">
<img class="mySlides" src="../img/img1.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img2.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img3.jpg" height ="270" style="width:100%" alt="bannerSlide">
</div>
<div class="info">
<h1>Hallo, liebe Eltern! </h1>
<p style="
padding-left: 10px"> Sie suchen eine Tagesmutter für Ihr Kind? <br>
Ich hoffe, dass ich Ihnen mit diesen Seiten einen kleinen Einblick
in meine Arbeit als Tagesmutter ermöglichen kann. ☺ </p>
<h5>Tagesmutter Irene</h5>
</div>
</body>
</html>
现在是样式表:
#menu
{
background-color: #78409a;
display: flex;
margin-top: -2%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
}
.icon-bar { margin-right: 0.2%;}
.icon-bar a
{
float: right;
color: white;
font-size: 710%;
}
.active {background-color: #4CAF50;}
.dropdown_whohnen
{
position: relative;
display: inline-block;
}
.dropbtnWohnen
{
background-color: #4CAF50 ;
color: white;
padding: 33.25%;
font-size: 100%;
border: none;
cursor: pointer;
}
.wohnen_content
{
display: none;
position: absolute;
background-color: #d5416e;
min-width: 13.2%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.wohnen_content a
{
color: black;
padding: 6% 6%;
text-decoration: none;
display: block;
}
.dropdown_wohnen:hover .wohnen_content {display: block;}
.dropdown_wohnen:hover .dropbtnWohnen {background-color: #3e8e41;}
.wohnen_content a:hover {background-color: #ddd}
.dropdown_betreung
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnBetreung
{
background-color: #4CAF50 ;
color: white;
padding: 24.7%;
font-size: 100%;
border: none;
cursor: pointer;
}
.betreungskosten_content
{
display: none;
position: absolute;
background-color: #DAF7A6 ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.betreungskosten_content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_betreung:hover .betreungskosten_content {display: block;}
.dropdown_betreung:hover .dropbtnBetreung {background-color: #3e8e41;}
.betreungskosten_content a:hover {background-color: #ddd}
.dropdown_tag
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnTag
{
background-color: #4CAF50 ;
color: white;
padding: 29.2%;
font-size: 100%;
border: none;
cursor: pointer;
}
.tag_content
{
display: none;
position: absolute;
background-color: #78409a ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.tag_content a
{
color: black;
padding: 5% 5%;
text-decoration: none;
display: block;
}
.dropdown_tag:hover .tag_content {display: block;}
.dropdown_tag:hover .dropbtnTag {background-color: #3e8e41;}
.tag_content a:hover {background-color: #ddd}
.dropdown_kontakt
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnKontakt
{
background-color: #4CAF50 ;
color: white;
padding: 34.09%;
font-size: 100%;
border: none;
cursor: pointer;
}
.kontakt-content
{
display: none;
position: absolute;
background-color: #12d3df;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.kontakt-content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_kontakt a:hover {background-color: #ddd}
.dropdown_kontakt:hover .kontakt-content {display: block;}
.dropdown_kontakt:hover .dropbtnKontakt {background-color: #3e8e41;}
.banner
{
height: 270px;
margin-left: 15%;
margin-right: 10%;
width: 68%;
background-color: white;
}
.mySlides {display:none;}
.info h1, h5, h3
{
font-family: 'Tangerine';
font-size: 78px;
text-shadow: 10px 10px 10px #aaa
}
.info
{
background-color: #a6debb;
margin-top: -4%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
font-family: 'Helvetica', serif;
font-size: 40px;
text-shadow: 22px 22px 22px #aaa;
}
.info p
{
padding-left: 10px;
font-family: 'Helvetica', serif;
font-size: 25px;
text-shadow: 22px 22px 22px #aaa;
}
table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th
{
border: 1px solid #9a1838 ;
text-align: left;
padding: 8px;
}
tr:nth-child(even)
{
background-color: #dddddd;
}
#map
{
margin-left: 9%;
width: 80%;
height: 400px;
background-color: grey;
}
拜托，你能帮我解决这个问题吗？而且我的显示也因浏览器而异(Firefox 与 chrome)。
最佳答案
根据您的问题，您似乎想要构建一个在单击符号“=”时打开的移动导航菜单。
您需要执行以下操作:
- HTML:在无序列表中添加一个列表，以保存 anchor 链接。这是展开时您将看到的导航文本。附上将在下面的 javascript 中使用的 onclick 功能。
- CSS: 设置导航菜单的样式。
- Javascript: 创建一个对 HTML onclick 使用react的函数。此功能将扩展您的导航菜单。您的函数应该能够切换菜单，这意味着同一个按钮应该能够打开/关闭菜单。
...如果您需要进一步的帮助，请创建一个代码片段。
关于html - div 的响应度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50239011/