我正在尝试在不使用引导程序的情况下制作响应式菜单,但我无法使其成为
<ul class="nav">
<li class="active"><a href="index.html">Border</a></li>
<li><a href="gradient.html">Gradient</a></li>
<li><a href="transform.html">Transform</a></li>
<li><a href="animation.html">Animations</a></li>
<li><a href="transition.html">Transition</a></li>
<li><a href="text-shadow.html">Text Shadow</a></li>
<li><a href="box-shadow.html">Box Shadow</a></li>
<li><a href="font-face.html">Font-Face</a></li>
<li><a href="rgba.html">RGBA</a></li>
</ul>
所以这是菜单,在特定的视口宽度上,它会变成一个下拉菜单。你能救我吗?
答案 0 :(得分:0)
我已尽力使用尽可能少的javascript并适合您的标记。希望它能帮到你!
document.querySelector(".nav").addEventListener("click", function(evt) {
console.log("nav");
if (!this.classList.contains("open")) {
this.classList.add("open");
this.classList.remove("closed");
} else {
this.classList.remove("open");
this.classList.add("closed");
}
evt.stopPropagation();
});
document.querySelector("body").addEventListener("click", function() {
var nav = document.querySelector(".nav");
if (!nav.classList.contains("open")) {
nav.classList.add("open");
nav.classList.remove("closed");
} else {
nav.classList.remove("open");
nav.classList.add("closed");
}
});
var li_elements = document.querySelectorAll(".nav li");
console.log(li_elements);
[].forEach.call(li_elements, function(li_element) {
li_element.addEventListener("click", function() {
console.log("remove actove");
document.querySelector(".nav li.active").classList.remove("active");
this.classList.add("active");
});
});
document.querySelector(".nav li.active").addEventListener("click", function(evt) {
evt.preventDefault();
});
&#13;
.nav {
border: solid 1px #aaa;
background-image: linear-gradient(to bottom, #ddd, #eee);
height: 1.5em;
font-size: 1em;
padding: 0.10em 0.5em;
cursor: pointer;
width: 200px;
}
.nav.closed li.active:before {
content: "";
float: right;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #999;
margin-top: 10px
}
.nav li {
display: none;
}
.nav.open {
height: auto;
background: white;
}
.nav li {
border-bottom: solid 1px #ddd;
padding: 0;
margin: 0
}
.nav li a {
text-decoration: none;
color: #666;
display: block;
margin: 0;
padding: 0.25em;
}
.nav.open li {
display: block;
}
.nav.open li:hover {
background: #eee;
}
.nav.closed li.active {
display: block;
color: white;
border:none;
}
&#13;
<ul class="nav closed">
<li class="active"><a href="index.html">Border</a>
</li>
<li><a href="gradient.html">Gradient</a>
</li>
<li><a href="transform.html">Transform</a>
</li>
<li><a href="animation.html">Animations</a>
</li>
<li><a href="transition.html">Transition</a>
</li>
<li><a href="text-shadow.html">Text Shadow</a>
</li>
<li><a href="box-shadow.html">Box Shadow</a>
</li>
<li><a href="font-face.html">Font-Face</a>
</li>
<li><a href="rgba.html">RGBA</a>
</li>
</ul>
&#13;