Разработка - Выпадающие меню | Все для вебмастера

Пишем код HTML:

HTML:

<div class="button" onclick="document.body.classList.toggle('expanded')"><div class="places">Places</div></div>
<div class="menu">
  <svg class="shadow" width="375" height="322" viewBox="0 0 375 322">
    <defs>
      <filter
              id="blur"
              x="-0.053211679"
              width="1.1064234"
              y="-0.068773585"
              height="1.1375472">
        <feGaussianBlur
                        inkscape:collect="always"
                        stdDeviation="6.075"
                        id="feGaussianBlur1076" />
      </filter>
    </defs>
    <g transform="translate(0,120)">
      <path
            style="opacity:0.14;fill:#0e232e;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#blur)"
            d="M 187.5 59.5 L 176.5 70.5 L 61.107422 70.5 C 55.231364 70.5 50.5 75.229411 50.5 81.105469 L 50.5 260.89258 C 50.5 266.76864 55.231364 271.5 61.107422 271.5 L 187.5 271.5 L 313.89453 271.5 C 319.77059 271.5 324.5 266.76864 324.5 260.89258 L 324.5 81.105469 C 324.5 75.229411 319.77059 70.5 313.89453 70.5 L 198.5 70.5 L 187.5 59.5 z "
            transform="translate(0,-120)"
            id="path967" />
    </g>
  </svg>
  <svg class="container" width="275" height="222" viewBox="0 0 275 222">
    <g transform="translate(0,20)">
      <path class="border1" fill="transparent" stroke-width="1.5" d="m 137.5,201.5003 h -126.393699 c -5.8760576,0 -10.606602,-4.73054 -10.606602,-10.6066 v -179.787399 c 0,-5.8760576 4.7305444,-10.606602 10.606602,-10.606602 h 115.393699 l 11,-10.999699"/>
      <path class="border2" fill="transparent" stroke-width="1.5" d="m 137.5,-10.5 11,10.999699 h 115.3937 c 5.87606,0 10.6066,4.7305444 10.6066,10.606602 v 179.787399 c 0,5.87606 -4.73054,10.6066 -10.6066,10.6066 h -126.3937"/>
    </g>
  </svg>
  <div class="contents">
    <div class="row">Here</div>
    <div class="row">There</div>
    <div class="row">Anywhere</div>
  </div>
</div>

Оформляем все как следует CSS:

CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
body {
  align-items: center;
  background: #f0f0f9;
  display: flex;
  flex-direction: column;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
.button {
  background: #d6d5e2;
  border-radius: 50%;
  cursor: pointer;
  height: 26px;
  width: 26px;
  z-index: 1;
}
.button:after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #474070;
  content:  ' ';
  height: 0;
  left: 8px;
  position: relative;
  top: -8px;
  width: 0;
}
.button:hover {
  background: #c6c5d2;
}
.button:active {
  background: #b6b5c2;
}
.places {
  color:  #898596;
  left: -64px;
  position: relative;
}
.menu {
  // background: #fff;
  // border: 1px solid #c6c6cc;
  border-radius: 8px;
  height: 222px;
  margin-top: 0px;
  position: relative;
  width: 273px;
}
.container {
  position: absolute;
}
.border1 {
  fill: #fff;
  fill-opacity: 0;
  stroke: #44454a;
  stroke-dasharray: 480 480;
  stroke-dashoffset: -480px;
  transition: stroke 400ms cubic-bezier(0.4, 0.0, 0.2, 1),
    stroke-dasharray 400ms cubic-bezier(0.4, 0.0, 0.2, 1),
    stroke-dashoffset 400ms cubic-bezier(0.4, 0.0, 0.2, 1),
    fill-opacity 400ms 40ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.border2 {
  fill: #fff;
  fill-opacity: 0;
  stroke: #44454a;
  stroke-dasharray: 0 480;
  stroke-dashoffset: 0;
  transition: stroke 400ms cubic-bezier(0.4, 0.0, 0.2, 1),
    stroke-dasharray 400ms cubic-bezier(0.4, 0.0, 0.2, 1),
    stroke-dashoffset 400ms cubic-bezier(0.4, 0.0, 0.2, 1),
    fill-opacity 400ms 40ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.shadow {
  left: -50px;
  opacity: 0;
  position: absolute;
  top: -46px;
  transition: opacity 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.contents {
  left: 20px;
  opacity: 0;
  position: relative;
  top: 48px;
  transition: opacity 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
  width: 234px;
}
.row {
  align-items: center;
  border-bottom: 1px solid #cdd0de;
  cursor: pointer;
  display: flex;
  height: 46px;
  padding: 0 5px;
  user-select: none;
  -moz-user-select: none;
}
.row:hover {
  background: #f8f8f8;
}
.row:active {
  background: #f5f5f5;
}
.expanded .border1 {
  fill-opacity: 1;
  stroke: #c6c6cc;
  stroke-dasharray: 480 480;
  stroke-dashoffset: 0;
}
.expanded .border2 {
  fill-opacity: 1;
  stroke: #c6c6cc;
  stroke-dasharray: 480 480;
  stroke-dashoffset: 0;
}
.expanded .shadow {
  opacity: 1;
}
.expanded .button {
  transform: rotate(0);
}
.expanded .contents {
  opacity: 1;
  transition: opacity 400ms 100ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

Смотрим наш результат:

Разработка Выпадающие меню

Ещё ресурсы от baltun