Symbolleistenmenü mit elastischem Animationseffekt mit JQuery und CSS3

Kurzes Tutorial

Dies ist ein Symbolleisten-Menüeffekt mit elastischem Animationseffekt, der mit jquery und CSS3 erstellt wurde. Das Symbolleistenmenü zeigt standardmäßig nur eine kreisförmige Schaltfläche an. Wenn Sie auf die Schaltfläche klicken, werden die Untermenüelemente mit einer elastischen Animation erweitert, und der Effekt ist sehr cool.

Verwendung

Fügen Sie JQuery und die Schriftartsymboldatei „font-awesome.css“ in die Seite ein.

<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="path/to/jquery.min.js"></script>

HTML-Struktur

Die HTML-Struktur des Symbolleistenmenüs ist wie folgt:

<div id="wrapper">
  <div id="toolbar">
        <div class="button"></div>
        <ul class="icons">
              <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>
        </ul>
      </div>
</div>

CSS-Stil

Fügen Sie Folgendes hinzu Symbolleistenmenü CSS-Stil:

#wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}
#toolbar {  
  width:100%;
  max-width:670px;
  min-width:550px;
  margin: 70px auto;
}
.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:50%;
  margin-left:-35px;
  z-index:1;
}
.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}
.button:after {
  content:"+";
}
.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:60px;
}
.icons {
  width:0%;
  overflow:hidden;
  height:36px;
  list-style:none;
  padding:16px 10px 10px 50px;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  margin:-68px 0 0 45%;
  border-radius: 2em;
}
 
.icons.open {
  width:80%;
  margin:-68px 0 0 5%;
  overflow:hidden;
}
 
.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}
 
.icons.open li {
  width:16%;
  display: inline-block;
}

Initialisierungs-Plug-in

Nachdem das Seiten-DOM-Element geladen wurde, verwenden Sie den folgenden JQuery-Code, um das Symbolleistenmenü zu öffnen und zu schließen.

$( ".button" ).click(function() {
  $(this).toggleClass( "active" );
  $(".icons").toggleClass( "open" );
});

Das Obige ist der Inhalt des JQuery- und CSS3-Symbolleistenmenüs mit elastischen Animationseffekten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!