全屏汉堡覆盖菜单（不使用 JavaScript/Jquery）

Question

我想为我的网站创建一个全屏汉堡覆盖菜单。重点是我在 Google Amp 中创建此站点，因此无法使用 javascript。请建议一种使用纯 CSS 和 HTML 创建此菜单的方法。我是新手，非常感谢您的帮助。

任何 Link 或教程都会很有帮助...

代码：

#nav-btn:checked~nav ul {
  transform: translate(-50%, -50%);
}

nav {
  background: rgba(52, 82, 113, 0.98) none repeat scroll 0% 0%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 0.5s ease 0s, visibility 0s ease 0.5s;
  visibility: 0;
  width: 100%;
  z-index: -1;
}

nav ul {
  left: 44%;
  moz-transition: all 1s ease-in-out;
  o-transition: all 1s ease-in-out;
  position: absolute;
  top: 30%;
  transform: translate(-50%, 0%);
  transition: all 1s ease-in-out;
  webkit-transition: all 1s ease-in-out;
}

nav li {
  font-size: 30px;
  list-style: none;
  padding-bottom: 10px;
  text-align: center;
}

nav ul li a:hover {
  color: #fff;
}

nav li a {
  color: #ccc;
  text-decoration: none;
}

.page-content-card.hidden {
  display: none;
}

.overlay {
  position: fixed;
  background: $color-main;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}

<div>
  <input type="checkbox" name="nav-btn" id="nav-btn" />
  <span></span>

  <div class="overlay">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

Answer 1

你可以试试这个...

/* CSS Document */


/*Strip the ul of padding and list styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}


/*Create a horizontal list with spacing*/

li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}


/*Style for menu links*/

li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}


/*Hover state for top level links*/

li:hover a {
  background: #19c589;
}


/*Style for dropdown links*/

li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}


/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}


/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}


/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
  text-align: left;
}


/*Display the dropdown on hover*/

ul li a:hover+.hidden,
.hidden:hover {
  display: block;
}


/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}


/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}


/* Show menu when invisible checkbox is checked */

input[type=checkbox]:checked~#menu {
  display: block;
}


/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 2px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
  /*Pointer on Hover, so that the user knows of an active link*/
  .show-menu:hover {
    cursor: pointer;
  }
  /*Center the text*/
  li ul li a {
    text-align: center;
  }
}

<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li>
    <a href="#">About &darr;</a>
    <ul class="hidden">
      <li><a href="#">Who We Are</a></li>
      <li><a href="#">What We Do</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Portfolio &darr;</a>
    <ul class="hidden">
      <li><a href="#">Photography</a></li>
      <li><a href="#">Web & User Interface Design</a></li>
      <li><a href="#">Illustration</a></li>
    </ul>
  </li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
</ul>

来源 - http://bacsoftwareconsulting.com/blog/index.php/web-development/how-to-create-a-responsive-menu-without-jquery/

Answer 2

我认为没有 jQuery/javascript 这是不可能的。

你应该使用这个干净的片段：

$('#nav-btn').click(function() {
  $('.overlay').toggleClass('open');
)};

全屏汉堡覆盖菜单（不使用 JavaScript/Jquery）

Hamburger Overlay Menu on Full Screen (Without Using JavaScript/Jquery)

html

css

overlay

hamburger-menu

google-amp