多年来，我一直在使用带有子菜单的简单水平 CSS 菜单。 我尝试修改它以响应式转换。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul{padding-left: 0;}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #BDF1A5;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.menu_deroulant {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
background-color: #534D4D;
font-size: 0;
}
.menu_deroulant li {
float:left;
display: inline-block;
position: relative;
font-size: 12px;
}
.menu_deroulant a {
font-family: Candara;
font-size: medium;
font-weight: bold;
display: block;
width: 180px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #534D4D;
}
.menu_deroulant a:visited, .menu_deroulant a:link {
color: #BDF1A5;
text-decoration: none;
}
.menu_deroulant a:hover {
background-color: #897E7E;
}
.menu_deroulant li.icon {
display: none;
}
.menu_deroulant ul {
left: -999em;
position: absolute;
}
.menu_deroulant li:hover > ul {
left: 0;
}
@media screen and (max-width:680px) {
ul.menu_deroulant li:not(:first-child) {
display: none;
}
ul.menu_deroulant li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.menu_deroulant.responsive {
position: relative;
}
ul.menu_deroulant.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.menu_deroulant.responsive li {
float: none;
display: inline;
}
ul.menu_deroulant.responsive li a {
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<ul class="menu_deroulant" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li>
<a href="#">Réalisations</a>
<ul>
<li><a href="/Realisations-Site-Web.aspx" title="Réalisations de Site Web">Réalisations de Site Internet</a></li>
<li><a href="/Realisations-Intranet.aspx" title="Réalisations d'Intranet et de développement">Réalisations d'Intranet</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</li>
</ul>
<script>
function myFunction(y) {
y.classList.toggle("change");
var x = document.getElementById("myTopnav");
if (x.className === "menu_deroulant") {
x.className += " responsive";
} else {
x.className = "menu_deroulant";
}
}
</script>
</body>
</html>
但是我的子菜单在垂直模式下有问题。它不在好地方。 我在 w3schools.com 和 Google 中搜索，但没有找到我需要的内容。
最佳答案
最后，我更改了我的基本水平菜单。它给了那个
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #BDF1A5;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #534D4D;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 180px;
}
li a:hover {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
li.icon {
display: none;
}
/*li:not(:first-child)*/
@media screen and (max-width:680px) {
ul.menu_deroulant li {
display: none;
}
ul.menu_deroulant li.icon {
float: right;
display: inline-block;
background-color: #534D4D;
padding: 5px;
}
ul.menu_deroulant.responsive {
position: relative;
}
ul.menu_deroulant.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.menu_deroulant.responsive li {
float: none;
display: inline;
}
ul.menu_deroulant.responsive li a {
display: block;
text-align: left;
}
.dropdown-content {
position: absolute;
left: 208px;
top: 0;
bottom: 0;
}
}
</style>
</head>
<body>
<ul class="menu_deroulant" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
<a href="#">Réalisations</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li><a href="#contact">Contact</a></li>
<li class="icon">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</li>
</ul>
<script>
function myFunction(y) {
y.classList.toggle("change");
var x = document.getElementById("myTopnav");
if (x.className === "menu_deroulant") {
x.className += " responsive";
} else {
x.className = "menu_deroulant";
}
}
</script>
</body>
</html>
而且还不错。我给你我的代码来帮助你:-)
关于javascript - 带有垂直子菜单的水平响应式菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40074008/