LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




Circular Hamburger menu

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

CSS
body {
  margin: 0;
  -webkit-perspective: 1000;
  background: url(https://f.cl.ly/items/3Q031Q1m1s1d3C0I023k/geometry2.png);
  font-family: Avenir Next, sans-serif;
}

body, html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.menu, .menu-bg, .menu-burger {
  position: fixed;
  width: 50px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  border-radius: 100%;
  right: 25px;
  top: 25px;
}

.menu-bg {
  background: #663399;
  pointer-events: none;
  transition: .3s;
  right: 50px;
  top: 50px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
}
.menu-bg.fs {
  transform: translate3d(50%, -50%, 0);
  width: 300vw;
  height: 300vw;
}

.menu-burger {
  color: white;
  padding-top: 11px;
  -webkit-user-select: none;
  cursor: pointer;
  transition: .4s;
  transform-origin: center;
}
.menu-burger.fs {
  transform: rotate(-180deg) translateY(10px);
}

.menu-items {
  position: absolute;
  font-weight: bold;
  font-size: 40px;
  letter-spacing: 10px;
  color: white;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: .4s;
  margin-top: 100px;
  transform: translateY(-200%);
  pointer-events: none;
}
.menu-items div {
  transition: 1s;
  opacity: 0;
  margin-top: 0px;
}
.menu-items.fs {
  transform: translateY(0);
  pointer-events: auto;
  opacity: 1;
}
.menu-items.fs div {
  opacity: 1;
  margin-top: 75px;
}

.content {
  padding: 100px 50px;
  line-height: 1.62em;
  color: #444;
}
.content h1 {
  font-weight: bold;
  font-size: 2em;
  margin-bottom: 1em;
}
JS
$('.menu-burger, .menu-items').on('click', function() {
  $('.menu-bg, .menu-items, .menu-burger').toggleClass('fs');
  $('.menu-burger').text() == "☰" ? $('.menu-burger').text('✕') : $('.menu-burger').text('☰');
});
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:51

Related Codes

Pen ID
Pen ID
Pen ID