htmlcssoverlayhamburger-menugoogle-amp

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

I want to create a Hamburger overlay menu on full screen for my site. The point is I am creating this site in Google Amp so unable to use javascript. Please suggest a way to create this menu using pure CSS and HTML. I am a newbie so your help will be much appreciated.

Any Link or tutorial would be very helpful...

Code:

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

Solution

  • I thinks that's not possible without jQuery/javascript.

    You should use this clean snippet:

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