我一直在W3 Schools中进行篡改,到目前为止,我已经达到了想要的效果,但是导航栏现在通过下拉菜单展开。有没有更好的方法可以做到这一点,而我却错过了?提前致歉,感谢您的宝贵时间。
编辑:希望进一步澄清一下:Example
链接到W3schools的内容: https://www.w3schools.com/code/tryit.asp?filename=GD1ZCKC1TKED
代码:
<!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">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mainNav {
background-color: #000;
padding:12px 10px 0px 0px;
float: right;
overflow: hidden;
}
.mainNav a {
color: #FFF;
float: left;
display: block;
padding: 15px;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.mainNav .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;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.mainNav 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: 500px) {
.logo {
max-width: 25%;
height: auto;
padding-top:10px;
margin-bottom:-50px;
display: block;
margin: auto;
}
.mainNav{
background-color: black;
width:100%;
font-size: 18px;
}
.mainNav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.mainNav a.icon {
float: right;
display: block;
}
.mainNav.responsive {
position: relative;
}
.mainNav.responsive .icon {
position: absolute;
right: 0;
top: 15px;
}
.mainNav.responsive a {
float: none;
display: block;
text-align: center;
}
.mainNav.responsive .dropdown {
float: none;
}
.mainNav.responsive .dropdown-content {
position: relative;
}
.mainNav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<div class="mainNav" id="navID">
<a href="#home" class="active">Temp1</a>
<div class="dropdown">
<button class="dropbtn">Temp2 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp3<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp4 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#sources">Temp5</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("navID");
if (x.className === "mainNav") {
x.className += " responsive";
} else {
x.className = "mainNav";
}
}
</script>
</body>
</html>
您的整个导航扩展的原因是该项目的位置。将.dropdown-content
设置为position: relative;
,将其更改为position: absolute;
,即可解决第一个问题。
但是,现在要获得与父级相同的宽度,有几种方法可以做到这一点。最简单的方法就是将width
属性也设置为dropdown-content
,因此它总是相同的。唯一的问题是下拉菜单的内容区域是否较长,以便单词被截断。在这种情况下,您可以改用min-width
。我从97.45px;
标签上使用的填充计算出宽度为<button>
。
所以您需要做的就是将.dropdown-content
的CSS更改为:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 97.45px;
}
或者,就像我说的min-width: 97.45px;
。这将使其宽度与父级相同,同时允许选项以更大的内容扩展。
如果不是您要的内容,请对此回复发表评论,我们很乐意为您提供帮助。有几种不同的方法可以完成此操作。仅设置宽度可能是最简单的。顺便说一句,欢迎来到堆栈溢出