我一直在尝试构建响应式导航栏。我正在使用 <nav>
包含 <img>
的元素和一个 <ul>
元素。我已经设置了媒体查询,以便在调整屏幕大小时,一些 <li>
元素隐藏在 display: none
中属性(property)。当我单击菜单图标时出现问题。它应该显示隐藏的菜单项,但它没有。
有人可以看看 fiddle告诉我我做错了什么?
提前致谢。
更新:
抱歉,我还在学习技巧。如果我做错了什么而不是立即否决我,你能给我指示吗?谢谢。
这是我的代码:
function myFunction() {
var x = document.getElementById("myNav");
if (x.className === "nav") {
x.className += " responsive";
} else {
x.className = "nav";
}
}
body {
background-image: url("home/pexels-photo-4.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.header {
background-color: rgba(0,0,0,0.6);
}
.logo {
width: 150px;
height: 110px;
margin-left: 50px;
}
.nav {
float: right;
padding-top: 50px;
margin-right: 50px;
}
.nav li {
float: left;
padding: 0 10px;
}
.nav li a {
color: #fff;
text-decoration: none;
font-family: "Raleway";
font-size: 16px;
font-weight: 600;
}
ul.nav li a:hover,
ul.nav li a:focus {
background-color: transparent;
color:#fff;
}
ul.nav a:hover:before,
ul.nav li a:focus:before {
width:100%;
background:#fff;
}
ul.nav a:before {
content:'';
height:2px;
width:0;
position:absolute;
top:auto;
right:auto;
bottom:0;
left:50%;
-webkit-transform:translate3d(-50%,0,0);
transform:translate3d(-50%,0,0);
-webkit-transition:.4s;
transition: .4s;
}
.nav li.icon {
display: none;
}
@media screen and (max-width:765px) {
.nav li:not(:first-child) {
display: none;
}
.nav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:765px) {
ul.nav .responsive {
position: relative;
}
ul.nav .responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.nav .responsive li {
float: none;
display: inline;
}
ul.nav .responsive li a {
display: block;
text-align: left;
}
}
@media screen and (max-width: 500px) {
.nav {
padding-top: 20px;
}
.nav li a {
font-size: 14px;
}
.logo {
margin: 0;
width: 110px;
height: 70px;
}
}
<nav class="header">
<img class="logo" src="images/logos/marcon logo white on trans copy 2.png">
<ul class="nav" id="myNav">
<li><a href="#"><span class="glyphicon glyphicon-home" aria-label="Home"></span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li class="icon">
<a href="#" onclick="myFunction()">☰</a>
</li>
</ul>
</nav>
最佳答案
问题出在 CSS 中。你写了
ul.nav .responsive li
但是由于您的函数将“响应式”类提供给具有“nav”类的 ul
元素,因此您需要去掉空格以声明它是 ul
元素同时包含“nav”和“responsive”类:
ul.nav.responsive li
关于javascript - 响应式导航栏的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40664521/