我正在尝试根据屏幕尺寸使我的导航栏响应。目前一切正常,除非屏幕太小而显示“汉堡包”条,否则按钮下的所有链接都不会显示。此外,当点击汉堡包时,并非所有链接都垂直显示,并且不再显示服务下的所有链接。
我已经尝试更改dropdown.content的css,但到目前为止没有任何工作。
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #008CBA;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div class="navbar" id="myNavBar">
<a href="#home">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Red or Black Tarmac Drives and Paths</a>
<a href="#">Fencing and Gates</a>
<a href="#">Shingle and Coloured Gravels</a>
<a href="#">Drainage Work</a>
<a href="#">Patios and Crazy Paving</a>
<a href="#">Block Paved Driveways and Paths</a>
<a href="#">Turfing and Artificial Grass</a>
<a href="#">Brick and Purbeck Stone Walls</a>
<a href="#">Decking and Rockeries</a>
</div>
<!-- /dropdown-content -->
</div>
<!-- /dropdown -->
<a href="#home">Gallary</a>
<a href="#home">Before and After</a>
<a href="#home">Testimonials</a>
<a href="#home">Contact Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- /navbar -->
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
我把它放在一个jsfiddle中,下面是链接
https://jsfiddle.net/knrvmdu5/
非常感谢对此的任何帮助
答案 0 :(得分:1)
我删除了您的所有float
规则,并将其替换为flexbox。浮动很难管理,我可以告诉你必须将overflow: hidden
添加到.navbar
以确保它显示浮动元素,这是服务菜单被切断的原因之一。我还为链接添加了唯一的类,以便您可以更轻松地定位它们。您.navbar a:not(first-child)
的规则导致您的嵌套服务菜单链接不显示:
/* ========== NAVIGATION BAR ========== */
.navbar {
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: space-between;
}
.navbar a {
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
overflow: hidden;
display: inline;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #008CBA;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 685px) {
.nav-link:not(:first-child) {
display: none;
}
.navbar a.icon {
display: block;
}
}
@media screen and (max-width: 685px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
display: block;
text-align: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
}
<!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">
</head>
<body>
<div class="navbar" id="myNavBar">
<div class="links">
<a href="#home" class="nav-link">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Red or Black Tarmac Drives and Paths</a>
<a href="#">Fencing and Gates</a>
<a href="#">Shingle and Coloured Gravels</a>
<a href="#">Drainage Work</a>
<a href="#">Patios and Crazy Paving</a>
<a href="#">Block Paved Driveways and Paths</a>
<a href="#">Turfing and Artificial Grass</a>
<a href="#">Brick and Purbeck Stone Walls</a>
<a href="#">Decking and Rockeries</a>
</div>
<!-- /dropdown-content -->
</div>
<!-- /dropdown -->
<a href="#home" class="nav-link">Gallery</a>
<a href="#home" class="nav-link">Before and After</a>
<a href="#home" class="nav-link">Testimonials</a>
<a href="#home" class="nav-link">Contact Us</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- /navbar -->
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myNavBar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>