CodePen Embed - bouncy-dropdown-toggle

  <svg width="187px" height="50px" viewBox="0 0 187 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="t" transform="translate(-70.000000, -111.000000)" fill="#1E90FF" fill-rule="nonzero">
            <path d="M86.576,130.488 C89.24,130.488 92.264,132.936 93.416,135.096 C94.496,137.472 93.344,140.136 91.976,142.944 C91.4,144.024 90.968,145.104 90.68,145.896 C90.176,147.264 89.528,147.408 88.088,146.688 C86.792,145.896 85.568,144.528 85.568,142.584 C85.568,141.648 85.928,140.208 87.224,137.256 C87.944,135.816 88.448,134.52 88.16,134.232 C87.296,133.512 82.616,138.192 79.736,144.024 C78.296,146.976 77.576,149.928 77.576,152.088 C77.576,155.256 78.872,157.2 80.816,157.272 C86.216,157.344 91.184,151.8 94.064,147.48 C94.712,146.4 95.792,146.112 96.224,147.336 C96.584,148.272 96.584,150.144 95.288,152.16 C92.552,156.48 86.72,160.008 81.104,160.08 C74.48,160.152 70.808,155.904 70.808,150.144 C70.808,147.552 71.528,144.672 73.04,141.792 C76.712,134.376 82.4,130.488 86.576,130.488 Z M118.256,120.408 C118.256,121.416 118.184,122.208 117.824,123.432 C115.592,132 107.744,140.496 101.408,144.744 C99.968,148.416 99.032,151.656 99.032,154.176 C99.032,155.904 99.464,157.128 100.4,157.128 C103.712,157.128 107.888,152.304 110.624,147.12 C111.56,145.32 113.144,145.32 113.648,147.192 C113.936,148.272 113.864,149.928 112.928,151.872 C111.848,154.032 106.52,159.936 100.472,159.936 C96.08,159.936 93.344,157.416 93.344,152.448 C93.344,151.224 93.488,149.784 93.848,148.344 C96.656,136.392 104.792,123.072 111.848,115.656 C113.216,114.288 114.512,113.856 115.88,115.152 C117.464,116.52 118.256,118.536 118.256,120.408 Z M114.224,122.208 C113.936,122.064 112.064,124.872 109.616,129.12 C107.744,132.288 104.576,137.688 104.072,138.912 C107.168,135.888 109.616,132.576 111.272,129.768 C113.72,125.664 114.656,122.496 114.224,122.208 Z M121.28,127.248 C121.28,125.232 122.792,123.36 124.448,123.36 C126.464,123.36 128.408,125.952 128.408,128.04 C128.408,129.984 127.328,131.64 125.528,131.64 C123.224,131.64 121.28,129.48 121.28,127.248 Z M126.608,152.52 C124.448,157.056 119.48,160.08 115.232,160.08 C110.84,160.08 108.896,157.56 108.896,153.96 C108.896,152.592 109.184,151.08 109.76,149.208 C111.56,144.168 116.168,135.816 118.832,132.072 C119.912,130.632 120.776,130.488 121.712,131.568 C123.08,133.008 123.656,136.104 121.784,139.704 C120.416,142.8 117.104,148.2 115.88,151.08 C115.232,152.736 114.872,154.248 114.872,155.4 C114.872,156.552 115.16,157.2 115.952,157.2 C118.832,157.2 122.576,152.376 124.808,147.48 C125.384,146.184 126.32,146.328 126.968,147.624 C127.616,148.848 127.544,150.648 126.608,152.52 Z M140,130.488 C142.664,130.488 145.688,132.936 146.84,135.096 C147.92,137.472 146.768,140.136 145.4,142.944 C144.824,144.024 144.392,145.104 144.104,145.896 C143.6,147.264 142.952,147.408 141.512,146.688 C140.216,145.896 138.992,144.528 138.992,142.584 C138.992,141.648 139.352,140.208 140.648,137.256 C141.368,135.816 141.872,134.52 141.584,134.232 C140.72,133.512 136.04,138.192 133.16,144.024 C131.72,146.976 131,149.928 131,152.088 C131,155.256 132.296,157.2 134.24,157.272 C139.64,157.344 144.608,151.8 147.488,147.48 C148.136,146.4 149.216,146.112 149.648,147.336 C150.008,148.272 150.008,150.144 148.712,152.16 C145.976,156.48 140.144,160.008 134.528,160.08 C127.904,160.152 124.232,155.904 124.232,150.144 C124.232,147.552 124.952,144.672 126.464,141.792 C130.136,134.376 135.824,130.488 140,130.488 Z M169.88,115.512 C169.88,118.32 166.64,123.792 162.32,131.64 C163.616,130.704 164.84,130.2 166.064,129.768 C169.304,128.616 171.248,129.768 172.832,133.08 C173.408,134.16 173.696,135.312 173.696,136.536 C173.696,138.264 172.976,140.064 171.176,141.792 C168.872,144.024 165.92,146.04 161.672,147.48 C161.96,152.88 163.688,156.84 165.848,156.84 C168.296,156.84 172.256,151.8 174.272,147.624 C175.136,145.896 176.072,145.752 176.72,147.552 C177.08,148.488 176.936,150.288 175.856,152.16 C174.488,154.68 170.816,159.864 164.696,159.792 C159.368,159.72 155.048,155.544 155.048,145.464 C153.104,148.92 151.16,153.312 148.856,158.712 C148.352,159.72 147.2,160.08 146.336,159 C145.616,158.208 145.184,157.2 145.184,155.688 C145.184,154.536 145.4,152.952 146.12,150.864 C149.36,141.648 159.728,121.344 166.064,112.632 C167.216,111.192 168.368,111.192 169.16,112.704 C169.592,113.568 169.88,114.504 169.88,115.512 Z M168.872,133.296 C168.296,132.432 165.776,133.296 162.464,135.816 C160.016,137.688 158,140.28 155.84,143.88 C157.928,143.16 162.968,140.928 165.344,138.984 C168.224,136.608 169.52,134.232 168.872,133.296 Z M201.992,130.848 C202.64,131.928 203,133.152 203,134.304 C203,134.88 202.928,135.528 202.784,136.248 C205.88,133.224 209.912,130.488 212.216,130.488 C214.52,130.488 216.032,133.08 216.032,136.104 C219.272,133.224 223.088,130.776 225.392,130.848 C227.48,130.92 228.632,132.864 228.632,135.24 C228.632,137.688 227.12,141 224.168,145.536 C222.152,148.632 220.28,151.8 220.28,154.32 C220.28,155.976 221,157.128 222.152,157.128 C224.384,157.128 227.912,152.088 230.576,147.696 C231.224,146.616 231.944,146.544 232.592,147.192 C233.384,147.984 233.456,150.72 232.592,152.376 C230.576,156.552 225.464,160.152 221,160.152 C216.104,160.152 213.44,157.488 213.44,153.6 C213.44,152.304 213.728,150.72 214.52,148.92 C215.672,146.472 218.048,142.584 219.704,139.992 C221.288,137.616 223.016,135.456 222.44,135.456 C221.864,135.456 220.352,136.176 216.104,140.424 C210.488,146.04 207.032,152.88 204.008,159.576 C203.288,160.944 202.28,161.16 201.128,160.008 C200.048,158.928 199.544,157.92 199.544,156.048 C199.544,154.824 200.12,152.52 200.84,150.72 C201.848,148.128 204.224,144.24 206.168,141.216 C208.112,137.976 210.128,135.24 209.48,135.24 C208.904,135.24 206.096,136.824 201.776,141.576 C197.744,145.896 194.432,152.448 191.624,159.072 C191.12,160.224 190.328,160.656 189.104,159.576 C188.096,158.712 187.376,157.416 187.376,155.76 C187.376,154.752 187.592,153.528 188.168,151.872 C189.68,147.552 194.864,137.544 199.256,130.848 C200.192,129.48 201.272,129.552 201.992,130.848 Z M248.576,134.448 C247.496,133.584 242.168,137.976 238.712,144.888 C239.288,145.248 239.792,145.392 240.296,145.392 C242.024,145.392 244.328,143.232 245.768,141.288 C247.856,138.48 249.368,135.096 248.576,134.448 Z M253.976,137.328 C253.976,141.648 249.152,149.208 242.816,149.208 C241.088,149.208 239.36,148.704 237.704,147.624 C237.272,149.064 237.056,150.576 237.056,151.872 C237.056,155.04 238.352,157.272 240.512,157.272 C245.984,157.272 250.808,151.944 253.76,147.48 C254.552,146.328 255.488,146.184 256.064,147.624 C256.28,148.272 256.352,150.36 255.056,152.304 C252.032,156.696 246.272,160.08 240.656,160.152 C233.96,160.224 230.288,155.832 230.288,150.072 C230.288,147.48 231.008,144.672 232.52,141.792 C236.264,134.16 242.096,130.344 246.272,130.344 C247.28,130.344 248.072,130.488 248.792,130.92 C250.808,132.072 252.248,133.224 253.256,134.664 C253.688,135.312 253.976,136.392 253.976,137.328 Z" id="clickme"></path>
        </g>
    </g>
</svg>
  <div id="toggle" class="toggle"/>

$primary-main: dodgerblue;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  font-size: 72px;
  color: $primary-main;
  overflow: hidden;
}

svg {
  overflow: visible;
  cursor: pointer;
}


#list-item {
  display: flex
}

.toggle {
  position: relative;
  height: 60px;
  width: 60px;
  margin-left: 16px;
  cursor: pointer;
}

.toggle:before {
  content: " ";
  position: absolute;
  border-radius: 10px;
  top: 75%;
  left: 0;
  height: 8px;
  width: 53%;
  background: $primary-main;
  transform-origin: right center;
  transform: rotate(45deg);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.5)
}

.toggle:after {
  content: " ";
  position: absolute;
  border-radius: 10px;
  top: 75%;
  right: 0;
  height: 8px;
  width: 54%;
  background: $primary-main;
  transform-origin: left center;
  transform: rotate(-45deg);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.5);
}


.open:before {
  transform: rotate(-45deg);
  top: 40%;
}

.open:after {
  transform: rotate(45deg);
  top: 40%;
}

View Compiled

const toggle = document.getElementById("toggle");

document.body.onclick = () => toggle.classList.toggle("open")

document.body.touchstart = () => toggle.classList.toggle("open")

This Pen is owned by matt on CodePen.

See more by @mattus314 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.