jquery 및 CSS3를 사용하여 탄력적인 애니메이션 효과를 제공하는 도구 모음 메뉴

간단한 튜토리얼

jquery와 CSS3를 이용하여 만든 탄력적인 애니메이션 효과를 담은 툴바 메뉴 효과입니다. 도구 모음 메뉴는 기본적으로 원형 버튼만 표시합니다. 버튼을 클릭하면 하위 메뉴 항목이 탄력적인 애니메이션으로 확장되며 효과가 매우 멋집니다.

사용법

jquery와 글꼴 아이콘 파일인font-awesome.css를 페이지에 도입하세요.

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

HTML 구조

툴바 메뉴의 HTML 구조는 다음과 같습니다.

<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 스타일

툴바 메뉴에 다음 CSS 스타일을 추가합니다. :

#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;
}

초기화 플러그인

페이지 DOM 요소가 로드된 후 다음 jquery 코드를 사용하여 툴바 메뉴를 열고 닫습니다.

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

위는 탄력적인 애니메이션 효과를 적용한 jquery와 CSS3 툴바 메뉴의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!