Symbolleistenmenü mit elastischem Animationseffekt mit JQuery und CSS3-js-Tutorial-php.cn

Symbolleistenmenü mit elastischem Animationseffekt mit JQuery und CSS3

黄舟

Freigeben： 2017-01-19 14:53:45

Original

1275 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

CSS-Stil

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

#wrapper {
  text-align:center;
  font-family: &#39;Lato&#39;, 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;
}

Nach dem Login kopieren

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" );
});

Nach dem Login kopieren

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