LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Full Screen Menu Overlay Close on Click

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt at turpis eget vehicula. Donec interdum lorem sed magna commodo, at accumsan neque blandit. Vivamus lobortis arcu vel finibus dignissim. Integer sagittis lectus mauris. Nam mollis, tellus vitae porta pulvinar, justo ligula elementum lorem, eu lobortis mi libero sit amet ligula. Maecenas vitae gravida nisi. Proin sit amet lacus aliquet, commodo quam dapibus, varius eros. Nunc ac mauris tortor.

About

Qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis itempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim vienia no
strud exercitation ullamco laboris.nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate goi velit esse cillum dolore eu fugiat nulla pariatur.

Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dolor non mauris dapibus, at malesuada enim posuere. Quisque at lorem neque. Nam ullamcorper ipsum enim, nec euismod libero accumsan ac. Cras volutpat dignissim ante in consectetur. Aliquam auctor porta arcu sit amet placerat. Suspendisse non consectetur sapien, vitae suscipit ante. Fusce aliquam in massa ut semper. Pellentesque sollicitudin augue in est congue tempor. Maecenas sit amet odio ligula. Donec hendrerit odio ligula, non faucibus enim sollicitudin vitae. Nam non velit condimentum, volutpat augue non, congue justo. Praesent ante ligula, faucibus a laoreet eget, euismod at dui.

Morbi commodo arcu quis eros mollis aliquam. Nunc quis sapien tortor. Nunc ultrices dignissim diam non pulvinar. Quisque in pulvinar nunc. Suspendisse tempus et quam at ultricies. Ut dignissim et leo non sagittis. Pellentesque tempor nec purus at mattis. Fusce vitae accumsan nibh, vel imperdiet felis. Morbi blandit pharetra eros, sed faucibus velit vehicula sed.

CSS
h1 {
  color: #ffffff;
  font-size: 3.2em;
  line-height: 150%;
  margin: 8% 0 2% 0;
  text-transform: uppercase;
}

h3 {
  color: #ff65c7;
  font-size: 2.5em;
  line-height: 90%;
  text-align: center;
  text-transform: uppercase;
}

/* header */
header {
  align-items: center;
  border-bottom: 1px solid #c6bfd8;
  display: flex;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 15%;
  width: 70%;
  position: absolute;
  top: 0;
  z-index: 2;
}

/* sections */
p {
  font-size: 1em;
  font-weight: 200;
  margin: 2% 0;
}

section {
  display: inline-block;
  padding: 5% 15%;
  width: 70%;
}

section:nth-of-type(odd) {
  background-color: #ff65c7;
}
section:nth-of-type(odd) h3 {
  color: #ffffff;
}

.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 46px;
  height: 46px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 21px;
  left: 12px;
  right: 12px;
  height: 4px;
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -8px;
}

.c-hamburger span::after {
  bottom: -8px;
}

.c-hamburger--htx {
  background-color: #a64253;
}

.c-hamburger--htx span {
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #861657;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}

.menu-collapsed ul {
  transition: all 0s;
  display: none;
}

.menu-expanded {
  transition: all .25s;
  text-align: center;
  line-height: 50px;
  height: 100%;
  width: 100%;
  border-radius: 0px;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.85);
  position: fixed;
  padding-top: 70px;
}
.menu-expanded button {
  position: fixed;
  transition: all 0s;
  top: 11px;
  right: 15%;
}
.menu-expanded ul {
  display: block;
  transition: all 0s;
  position: relative;
  left: 0;
  z-index: 2;
}
.menu-expanded a {
  transition: all .15s;
  text-decoration: none;
  font-size: 2em;
  padding: 5px;
  color: #fff;
  display: block;
}
.menu-expanded a:hover {
  transition: all .15s;
  letter-spacing: 2px;
  color: #861657;
}
JS
/* Menu Animation via callmenick */
(function() {

  "use strict";

  var toggles = document.querySelectorAll(".c-hamburger");

  for (var i = toggles.length - 1; i >= 0; i--) {
    var toggle = toggles[i];
    toggleHandler(toggle);
  };

  function toggleHandler(toggle) {
    toggle.addEventListener( "click", function(e) {
      e.preventDefault();
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
    });
  }

})();

/* Menu Overlay open and close */
(function() {
  var menu = document.querySelector(".menu-collapsed")

    document.querySelector(".switch").addEventListener( "click", function(e) {
      e.preventDefault();
      menu.classList.toggle('menu-expanded');
      });
  
  /* Closes the Menu Overlay when link is clicked
  Aid with this code from Adrianengine - Adrian Quevedo
  https://codepen.io/anon/pen/GmxQpa */
  [].forEach.call(document.querySelectorAll('.menuLinks'), function(el) {
	el.addEventListener('click', function (e) {
		menu.classList.remove('menu-expanded');
		menu.classList.add('menu-collapsed');
		});
	});

})();

Description

Full screen overlay menu. When the hamburger menu is clicked a transparent menu appears to the full device size. Hamburger menu animation created using callmenick's "animating css only hamburger menu icons" example. Menu close on link click code made with help from Adrianengine.
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv