全屏上的汉堡叠加菜单(不使用JavaScript/jQuery)

Question

我想在全屏上为我的网站创建一个汉堡叠加菜单。关键是我正在Google AMP中创建此站点，因此无法使用JavaScript。请建议一种使用纯CSS和HTML创建此菜单的方法。我是新手，所以您的帮助将不胜感激。

任何链接或教程都会非常有帮助...

代码：

#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

我认为没有jquery/javascript。

您应该使用此干净片段：

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

Answer 2

您可以尝试...

/* 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-to-to-create-a-a-responsive-menu-without-jquery/