如何创建响应式导航栏http://jacksbarlondon.co.uk/.

Question

我不需要像http://jacksbarlondon.co.uk/在这个http://jacksbarlondon.co.uk/当我点击导航栏图标时，一个弹出窗口即将出现。如何制作一个类似于这个坐的弹出窗口？请帮助

Answer 1

这里有一个快速的纯css解决方案。希望能有所帮助。您需要对其进行定制，以更适合您的需求。

.mobile-menu > .trigger:focus + ul {
  visibility: visible;
  opacity: 1;
  background: rgba(47, 55, 59, 0.8);
}
.trigger {
  background: rgba(47, 55, 59, 1);
  border-radius: 50%;
  padding: 10px;
  color: #fff;
  font-size: 10px;
  text-decoration: none;
}
.navigation-mobile {
  visibility: hidden;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  list-style: none;
}
.navigation-mobile a {
  text-transform: uppercase;
  color: #fff;
  font-size: 25px;
  line-height: 2;
  letter-spacing: 5px;
  text-decoration: none;
}

<div class="mobile-menu">
  <a href="#" class="trigger"> &#9776;</a>
  <ul class="navigation-mobile">
    <li>
      <a href="#">Demo 1</a>
    </li>
    <li>
      <a href="#">Demo 2</a>
    </li>
    <li>
      <a href="#">Demo 3</a>
    </li>
  </ul>
</div>