SVG Reveal Menu In Pure CSS – Speed Dial

Preview:

Description:

A pure CSS solution that enables a toggle button to reveal a menu bar on the web page.

How to use it:

1. Download and import the core stylesheet.

<link rel="stylesheet" href="style.css" />

2. Define menu icons in the SVG.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="lightning" viewBox="0 0 32 32">
    <path
      d="M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32 8.427c0-3.072-2.5-5.57-5.573-5.57-.15 0-.298.005-.447.017C24.535 1.072 22.356 0 20 0c-2.355 0-4.535 1.072-5.98 2.874-.148-.012-.298-.017-.449-.017-3.07 0-5.57 2.499-5.57 5.57 0 .322.043.633.094.94-.034.044-.074.085-.107.13-.327-.047-.655-.07-.987-.07-3.859 0-7 3.141-7 7s3.141 7 7 7c.856 0 1.693-.156 2.482-.458.069.06.151.102.221.16l1.77-1.18c-.59-.418-1.141-.883-1.602-1.438-.813.572-1.801.915-2.871.915-2.762 0-5-2.237-5-5 0-2.76 2.238-5 5-5 .676 0 1.316.138 1.902.38.035-.068.078-.125.113-.19.352-.642.785-1.229 1.292-1.753 1.443-1.493 3.448-2.438 5.693-2.438 3.107 0 5.771 1.792 7.096 4.38.353-.146.729-.24 1.117-.302l.787-.078c.771 0 1.492.19 2.145.5.707.339 1.314.836 1.79 1.45.656.845 1.065 1.896 1.065 3.05 0 2.763-2.238 5-5 5-1.07 0-2.057-.344-2.871-.915-.875 1.055-2.027 1.848-3.322 2.348l-.374.746 1.141 1.141c1.066-.415 2.064-1.012 2.944-1.777.789.302 1.626.458 2.482.458 3.859 0 7-3.141 7-7 0-1.604-.565-3.068-1.479-4.25.911-.992 1.479-2.301 1.479-3.75zm-2.902 2.352c-1.155-.84-2.563-1.352-4.098-1.352-.332 0-.66.023-.987.07-1.867-2.543-4.814-4.07-8.013-4.07-2.133 0-4.145.691-5.809 1.897.467-1.428 1.796-2.467 3.379-2.467.484 0 .941.098 1.359.271C15.878 3.279 17.781 2 19.999 2s4.122 1.279 5.068 3.128c.421-.173.88-.271 1.359-.271 1.974 0 3.573 1.599 3.573 3.57 0 .906-.348 1.723-.902 2.352z" />
  </symbol>
  <symbol id="wind" viewBox="0 0 32 32">
    <path
      d="M26.938 12c-1.656 0-3 1.344-3 3 0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1h22c1.656 0 3-1.344 3-3s-1.344-3-3-3zm-22 2h12c1.656 0 3-1.344 3-3s-1.344-3-3-3-3 1.344-3 3c0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1zm16 6c-.059 0-.115.013-.174.018-.039-.003-.072-.018-.111-.018H5.225c-.711 0-1.287.448-1.287 1s.576 1 1.287 1h12.897c-.111.315-.184.648-.184 1 0 1.656 1.344 3 3 3s3-1.344 3-3-1.344-3-3-3z" />
  </symbol>
  <symbol id="sun" viewBox="0 0 32 32">
    <path
      d="M16 9c-3.859 0-7 3.141-7 7s3.141 7 7 7 7-3.141 7-7-3.141-7-7-7zm0 12c-2.762 0-5-2.238-5-5s2.238-5 5-5 5 2.238 5 5-2.238 5-5 5zm0-14c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1s-1 .448-1 1v2c0 .552.448 1 1 1zm0 18c-.552 0-1 .448-1 1v2c0 .552.448 1 1 1s1-.448 1-1v-2c0-.552-.448-1-1-1zm7.777-15.365l1.414-1.414c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0zM8.223 22.365l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0l1.414-1.414c.391-.392.391-1.023 0-1.414s-1.023-.392-1.414 0zM7 16c0-.552-.448-1-1-1H4c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1zm21-1h-2c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1s-.448-1-1-1zM8.221 9.635c.391.391 1.024.391 1.414 0s.391-1.023 0-1.414L8.221 6.807c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l1.414 1.414zm15.558 12.728c-.392-.391-1.023-.391-1.414 0s-.392 1.023 0 1.414l1.414 1.414c.391.391 1.023.391 1.414 0s.391-1.023 0-1.414l-1.414-1.414z" />
  </symbol>
  <symbol id="plus" viewBox="0 0 24 24">
    <path
      d="M5 13h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1z" />
  </symbol>
</svg>

3. Create the HTML for the toggle button & reveal menu.

<div class="speed-dial">
  <button class="speed-dial__button--root flex-center">
    <svg class="icon icon__plus">
      <use xlink:href="#plus"></use>
    </svg>
  </button>
  <div class="speed-dial__action" data-direction="top">
    <div class="speed-dial__item flex-center" style="transition-delay: 200ms;">
      <button class="speed-dial__button--small flex-center">
        <svg class="icon icon__sun">
          <use xlink:href="#sun"></use>
        </svg>
        <span>Sun</span>
      </button>
    </div>
    <div class="speed-dial__item flex-center" style="transition-delay: 150ms;">
      <button class="speed-dial__button--small flex-center">
        <svg class="icon icon__wind">
          <use xlink:href="#wind"></use>
        </svg>
        <span>Wind</span>
      </button>
    </div>
    <div class="speed-dial__item flex-center" style="transition-delay: 100ms;">
      <button class="speed-dial__button--small flex-center">
        <svg class="icon icon__lightning">
          <use xlink:href="#lightning"></use>
        </svg>
        <span>Lightning</span>
      </button>
    </div>
  </div>
</div>

4. Change the direction of the reveal menu.

<div class="speed-dial__action" data-direction="top">
  ...
</div>
<div class="speed-dial__action" data-direction="bottom">
  ...
</div>
<div class="speed-dial__action" data-direction="left">
  ...
</div>
<div class="speed-dial__action" data-direction="right">
  ...
</div>