响应式导航栏的问题
我一直在尝试构建响应式导航栏。我正在使用包含<img>
和<ul>
元素的<nav>
元素。我设置了媒体查询,以便在屏幕调整大小时,某些<li>
元素被display: none
属性隐藏。当我点击菜单图标时发生问题。它应该显示隐藏的菜单项,但它没有。 有人请看看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
但因为你的函数给出了“回应”类的ul
元素的“导航”类,你需要摆脱空间的声明,它是ul
元素与两个“导航“和”响应“类:
ul.nav.responsive li
谢谢,这使'li'项目显示。现在我需要弄清楚如何在它们周围制作“nav”包装。 – Crankeedoodledoo
附加信息:在codepen.io上尝试您的代码并摆脱正文,链接和脚本标记。出于某种原因,jsfiddle一直说myFunction()没有被声明。通过将编辑器更改为codepen解决了这个问题。 – TomasB
@Crankeedoodledoo然后请标记这是一个正确的答案。谢谢 – TomasB
对于初学者来说你有你的HTML中的一个额外的结束标记。我会添加一个事件监听器来定位您的徽标点击,然后添加函数toggleBody,它允许您在单击徽标时打开和关闭导航。您的问题含糊不清,但我明白的是,您希望在点击徽标时发生此事件。
document.getElementsByClassName('logo').addEvenetListener('click', toggleBoy)
function toggleBody() {
var showElements = this.querySelectorAll('.nav')[0];
if(showElements.style.display === 'none') {
showElements.style.display = 'block';
}else{
showElements.style.display = 'none';
}
试图评论,但看到我有50分以下我不能@tib – JoshuaSlee
OP已经有他的功能连接到菜单,虽然使用“onclick”HTML属性和功能正常工作。 – Tibrogargan
您需要向我们显示您的代码。 –
我附上了小提琴的链接。 – Crankeedoodledoo
寻求调试帮助的问题(“**为什么不是这个代码工作?**”)必须包含 期望的行为,特定的问题或错误以及必要的最短代码 在问题本身**中重现它** 。没有明确问题 声明**的问题对其他读者无用。请参阅:[如何创建最小,完成和可验证示例](http://*.com/help/mcve)。 – j08691