html - 如何创建像 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>