A Bouncy Menu Toggle

In this example below you will see how to do a A Bouncy Menu Toggle with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by billyysea, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright billyysea ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Bouncy Menu Toggle</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(http://weloveiconfonts.com/api/?family=typicons);
body {
  background: radial-gradient(circle at 50% 95%, #aaaacc, #ddddff);
  margin: 0;
}

.iphone {
  position: relative;
  width: 400px;
  height: 796.64px;
  margin: 1em auto;
  background-image: url("https://s.cdpn.io/15065/iphone5_2.png");
  background-size: 100%;
}

.screen {
  position: absolute;
  overflow: hidden;
  top: 14.7%;
  right: 9.7%;
  bottom: 13.8%;
  left: 9.7%;
  background: #2980b9;
}

input {
  position: absolute;
  left: -9999px;
}

.scale {
  position: relative;
  margin: -1.75em auto;
  width: 3.5em;
  height: 3.5em;
  top: 50%;
  font-size: 3em;
}

.thing {
  display: block;
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  cursor: pointer;
  width: 2em;
  height: 2em;
  border: 0.75em solid transparent;
  transition: 75ms;
}

.thing:active {
  transform: scale(0.85);
}

.thing::before,
.thing::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.4em;
  background: #ecf0f1;
}

.thing::before {
  width: 75%;
  height: 12.5%;
  margin-top: 43.75%;
  left: 12.5%;
  transform: scaleX(1.22);
  transition: width 150ms 75ms ease-in-out, left 150ms 75ms ease-in-out, transform 200ms 225ms ease-in;
}

.thing::after {
  width: 12.5%;
  height: 125%;
  top: -12.5%;
  margin-left: 43.75%;
  transform: scaleY(0.78);
  transition: height 175ms ease-in-out, top 175ms ease-in-out, transform 200ms 175ms ease-in;
}

input:checked + .thing::before {
  width: 125%;
  left: -12.5%;
  transform: scaleX(0.78);
  transition: width 175ms 0ms ease-in-out, left 175ms 0ms ease-in-out, transform 200ms 175ms ease-in;
}

input:checked + .thing::after {
  top: 50%;
  height: 0;
  transform: scaleY(1);
  transition: 150ms ease-in;
}

.menu {
  position: absolute;
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  border-radius: 50% 50% 50% 0;
  background: #2c3e50;
  transition: border-radius 125ms ease-in, width 175ms 50ms, height 100ms 125ms, bottom 100ms 125ms;
}

input:checked ~ .menu {
  height: 5em;
  width: 100%;
  bottom: -1em;
  padding-left: 18%;
  border-radius: 0;
  transition: height 300ms ease-in-out, width 100ms 100ms linear, bottom 150ms 290ms ease-in, border-radius 100ms 190ms ease-out;
}

.menu > span {
  font-family: 'Typicons', sans-serif;
  display: block;
  float: left;
  width: 20%;
  font-size: 0em;
  opacity: 0;
  line-height: 4.8rem;
  text-align: center;
  color: #bdc3c7;
  cursor: pointer;
  transition: 50ms;
}

.menu > span:hover {
  color: #fff;
}

input:checked ~ .menu > span {
  font-size: 2em;
  opacity: 1;
}

@media (height: 300px) {
  .iphone {
    top: -520px;
  }

  .screen {
    left: 9.5%;
    bottom: 13.5%;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="iphone">
  <div class="screen">
    
    <div class="scale">
      <input type="checkbox" id="thing1" />
      <label class="thing"  for="thing1"></label>
    </div>
    
    <input type="checkbox" id="thing2" checked="" />
    <label class="thing" for="thing2"></label>
      <div class="menu">
        <span class="typicons-edit"></span>
        <span class="typicons-pin"></span>
        <span class="typicons-info"></span>
        <span class="typicons-delete"></span>
      </div>
    
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/billyysea/a-bouncy-menu-toggle-abjCI */
@import url(http://weloveiconfonts.com/api/?family=typicons);
body {
  background: radial-gradient(circle at 50% 95%, #aaaacc, #ddddff);
  margin: 0;
}

.iphone {
  position: relative;
  width: 400px;
  height: 796.64px;
  margin: 1em auto;
  background-image: url("https://s.cdpn.io/15065/iphone5_2.png");
  background-size: 100%;
}

.screen {
  position: absolute;
  overflow: hidden;
  top: 14.7%;
  right: 9.7%;
  bottom: 13.8%;
  left: 9.7%;
  background: #2980b9;
}

input {
  position: absolute;
  left: -9999px;
}

.scale {
  position: relative;
  margin: -1.75em auto;
  width: 3.5em;
  height: 3.5em;
  top: 50%;
  font-size: 3em;
}

.thing {
  display: block;
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  cursor: pointer;
  width: 2em;
  height: 2em;
  border: 0.75em solid transparent;
  transition: 75ms;
}

.thing:active {
  transform: scale(0.85);
}

.thing::before,
.thing::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.4em;
  background: #ecf0f1;
}

.thing::before {
  width: 75%;
  height: 12.5%;
  margin-top: 43.75%;
  left: 12.5%;
  transform: scaleX(1.22);
  transition: width 150ms 75ms ease-in-out, left 150ms 75ms ease-in-out, transform 200ms 225ms ease-in;
}

.thing::after {
  width: 12.5%;
  height: 125%;
  top: -12.5%;
  margin-left: 43.75%;
  transform: scaleY(0.78);
  transition: height 175ms ease-in-out, top 175ms ease-in-out, transform 200ms 175ms ease-in;
}

input:checked + .thing::before {
  width: 125%;
  left: -12.5%;
  transform: scaleX(0.78);
  transition: width 175ms 0ms ease-in-out, left 175ms 0ms ease-in-out, transform 200ms 175ms ease-in;
}

input:checked + .thing::after {
  top: 50%;
  height: 0;
  transform: scaleY(1);
  transition: 150ms ease-in;
}

.menu {
  position: absolute;
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  border-radius: 50% 50% 50% 0;
  background: #2c3e50;
  transition: border-radius 125ms ease-in, width 175ms 50ms, height 100ms 125ms, bottom 100ms 125ms;
}

input:checked ~ .menu {
  height: 5em;
  width: 100%;
  bottom: -1em;
  padding-left: 18%;
  border-radius: 0;
  transition: height 300ms ease-in-out, width 100ms 100ms linear, bottom 150ms 290ms ease-in, border-radius 100ms 190ms ease-out;
}

.menu > span {
  font-family: 'Typicons', sans-serif;
  display: block;
  float: left;
  width: 20%;
  font-size: 0em;
  opacity: 0;
  line-height: 4.8rem;
  text-align: center;
  color: #bdc3c7;
  cursor: pointer;
  transition: 50ms;
}

.menu > span:hover {
  color: #fff;
}

input:checked ~ .menu > span {
  font-size: 2em;
  opacity: 1;
}

@media (height: 300px) {
  .iphone {
    top: -520px;
  }

  .screen {
    left: 9.5%;
    bottom: 13.5%;
  }
}

Comments