CSS Rotating Ellipsis Menu Icon With Dots

Ellipsis menus are a great way for your website visitors to access and reveal hidden content.  This article explains how to create an animated css ellipsis menu icon with 3 dots in just a few simple lines of code.

This ellipsis menu rotates through 90 degrees when clicked to indicate an open state, and when clicked again rotate back to its start position (closed state).

Here is an example of the animated ellipsis menu icon in action:

 

Ellipsis Menu Icon HTML

So lets start with the basic HTML for the ellipsis menu icon:

<div class="menu" onclick="this.classList.toggle('menu--open')">
  <div class="menu__dots">
    <div class="menu__dots__dot"></div>
    <div class="menu__dots__dot"></div>
    <div class="menu__dots__dot"></div>
  </div>
</div>

There is a div for each ellipsis dot, and a container that we will rotate through 90 degrees on click.  In this example we are using BEM syntax for the class names. The onclick event toggles a class modifier to apply / remove a css transform.

Ellipsis Menu Icon CSS

The css for the ellipsis menu icon is very simple. Here we have used sass, but you can easily convert this to plain old css if required:

.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  transition: transform 0.2s;
  cursor: pointer;

  &__dots__dot {
    width: 6px;
    height: 6px;
    margin: 6px 0;
    border-radius: 3px;
    background-color: #000;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
  }

  &--open {
    transform: rotate(90deg);
    transform-origin: center;
    transition: transform 0.2s;
  }
}

The css applies the menu--open modifier class on click, which in turn triggers an animation to rotate the ellipsis menu through 90 degrees. 

If you want to see the menu in action, here is an example of the css animated ellipsis menu icon with dots.

Hopefully you have found this article on how to create an animated css ellipsis menu icon useful!