Sass

Menu circulaire en Sass

Publié en octobre 2015 2 extraits de code par Rémy Montangé

Fiche écrite en 2015, pour les navigateurs et les versions de l’époque. Vérifiez qu’elle correspond encore à votre environnement avant de l’appliquer.

Un bouton rond qui, au survol, déploie ses entrées en cercle autour de lui. Chaque entrée est placée au centre, puis tournée d’un angle différent et repoussée vers l’extérieur : une rotation, une translation, et une contre-rotation pour que l’icône reste droite.

HTML

<div class="menu">
  <nav>
    <ul class="outer">
      <li><span class="bouton"></span>
        <ul class="inner">
          <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
          <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
          <li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
          <li><i class="fa fa-youtube" aria-hidden="true"></i></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

SCSS

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';

/* Other stuff */
body {
  background-color: #416dbd;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.menu,
.menu .inner,
.menu .inner > li {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bouton {
  display: block;
  width: 48px;
  height: 48px;
  position: relative;
  z-index: 20;
  background-color: #ffffff;
  transition: transform .3s ease;
  border-radius: 100%;
}
.bouton:before,
.bouton:after {
  content: '';
  display: block;
  width: 2px;
  height: 30px;
  background-color: #ff5a94;
  position: absolute;
  left: 23px;
  top: 9px;
}
.bouton:after {
  width: 30px;
  height: 2px;
  left: 9px;
  top: 23px;
}

.menu:hover .bouton{
  cursor: pointer;
  transform: rotate(45deg);
}

.menu .inner{
  display: block;
  width: 48px;
  height: 48px;
  background-color: #FFF;
  padding: 6px;
  transition: width .3s ease, height .3s ease;
  border-radius: 100%;
}

.menu:hover .inner{
  width: 200px;
  height: 200px;
}

.menu .inner > li{
  transition: left .3s ease, top .3s ease;
}

.menu:hover .inner > li:nth-child(1){left: 20%;}
.menu:hover .inner > li:nth-child(2){top: 20%;}
.menu:hover .inner > li:nth-child(3){left: 80%;}
.menu:hover .inner > li:nth-child(4){top: 80%;}

.menu .fa,
.menu .inner > li .fa {
  color: #333;
  font-size:30px;
}

Autres fiches Sass