水平响应菜单，子菜单垂直 [英] Horizontal Responsive Menu with submenu into vertical
本文介绍了水平响应菜单，子菜单垂直的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用从几年来一个简单的水平css菜单与子菜单。
我尝试修改它以在响应中转换。
I use since severals years a simple horizontal css menu with submenu. I try to modify it to tranform in responsive.
<!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搜索，但没有找到我需要的。
But I've a problem in vertical mode with my submenu. It's not in good place. I search in w3schools.com and Google but don't find what I need.
推荐答案
基本水平菜单。它给了
<!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>
这很好。我让你的代码帮助你： - ）
And it's good. I let you my code to help you :-)
这篇关于水平响应菜单，子菜单垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
