制作下拉菜单

Question

我想在不使用 bootstrap 的情况下制作响应式菜单，但我做不到

<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>

这是菜单，在特定的视口宽度上它应该变成下拉菜单。你能帮帮我吗？

Answer 1

我已尽最大努力尽可能少地使用 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();
});

.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;
}

<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>

制作下拉菜单

Making a Drop-Down menu

html

css

jquery-ui

menu

drop-down-menu