Question

我正在创建一个基本布局来测试我的知识。我一直在创建菜单，我决定自定义它。每次用户点击它时，我想旋转90度由3条垂直线组成的图标（只有当页面在智能手机上显示时，此图标才可见 - @media（最大尺寸：968px）。此图标显示菜单当它点击的时候。我也通过谷歌搜索了解如何做到这一点，但我还没有找到答案。我是否必须使用css或动画？我能用旋转方法到达目标吗？你能告诉我正确的方法吗？？我不明白如何使用它们来旋转图标。

$(function(){
  var degree = 45;
    var $buttonNav = $('.header__icon-bar');
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');
  });//end of $buttonNav
});//end of the start

/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}

body{  background: #eee; }


/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }






/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

@media(max-width: 960px) {
  /*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0;  mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}





}

























*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
   <div class="header__background">

   <a class="header__icon-bar" href="">
      <span></span>
      <span></span>
      <span></span>
  </a>
</div>


    <ul class="header__nav">
      <li class="header__nav__item">  <a href="#"> Home    </a> </li>
      <li class="header__nav__item">  <a href="#"> Contact </a>    </li>
      <li class="header__nav__item">  <a href="#"> Apply   </a>    </li>
      <li class="header__nav__item">  <a href="#"> About   </a>    </li>
    </ul>


 </header>

Answer 1

这可以通过CSS3的转换来实现。

＆＃13;

$(function(){
  var degree = 45;
    var $buttonNav = $('.header__icon-bar');
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');
    $('.header__icon-bar').toggleClass('rotate90')
  });//end of $buttonNav
});//end of the start

＆＃13;

.rotate90 {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}


/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}

body{  background: #eee; }


/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }






/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

@media(max-width: 960px) {
  /*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0;  mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}





}

























*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
   <div class="header__background">

   <a class="header__icon-bar" href="">
      <span></span>
      <span></span>
      <span></span>
  </a>
</div>


    <ul class="header__nav">
      <li class="header__nav__item">  <a href="#"> Home    </a> </li>
      <li class="header__nav__item">  <a href="#"> Contact </a>    </li>
      <li class="header__nav__item">  <a href="#"> Apply   </a>    </li>
      <li class="header__nav__item">  <a href="#"> About   </a>    </li>
    </ul>


 </header>

＆＃13;

Answer 2

CSS Transform可以满足您的需求。为变换的每个“状态”创建一个类。更改每个州更改的类。如果有两种状态，则会出现正常状态和旋转状态。当用户单击3行时，类将从正常状态更改为旋转状态。您将需要一个onclick事件来检查您单击的img是否具有普通类或旋转类。

if($('this').attr('class')=='normal'){
         ///switch to rotated class
}

如果图像已经旋转，请使用if else else if语句。

if($('this').attr('class')=='rotatedl'){
     ///switch to normal class
}

ps这些类将调用您创建的变换关键帧！需要先创建关键帧变换动画，然后才能调用使用它的类。

https://www.w3schools.com/cssref/css3_pr_transform.asp

Answer 3

$(function(){
  var degree = 45;
    var $buttonNav = $('.header__icon-bar');
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');
    if( $('.header__nav').hasClass('is-open')){
     $('.header__icon-bar').css('transform','rotate(90deg)')
    }else{
     $('.header__icon-bar').css('transform','rotate(0deg)')
    }

  });//end of $buttonNav
});//end of the start

Answer 4

你可以添加动画以使其流畅：

.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes rotate-right {
  from {   
    opacity: 0;
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {   
    opacity: 1;
    -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  }
}

查看完整 demo

＆＃13;

$(function(){
  var degree = 45;
    var $buttonNav = $('.header__icon-bar');
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');

   if($('.header__icon-bar').hasClass('rotate-right')){
     $('.header__icon-bar').removeClass('rotate-right');
     $('.header__icon-bar').toggleClass('rotate-left');
   }else{
      $('.header__icon-bar').removeClass('rotate-left');
      $('.header__icon-bar').toggleClass('rotate-right');
    }
  });//end of $buttonNav
});//end of the start

＆＃13;

/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}

body{  background: #eee; }


/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }






/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

@media(max-width: 960px) {
  /*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0;  mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}





}

























*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

 .animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

   @-webkit-keyframes rotate-right {
  from {   
opacity: 0;
-ms-transform: rotate(0deg); 
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
  }

  to {   
opacity: 1;
-ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  }
}

@keyframes rotate-right {
   from {   
opacity: 0;
-ms-transform: rotate(0deg); 
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }

  to {   
opacity: 1;
-ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  }
}

.rotate-right {
  -webkit-animation-name: rotate-right;
  animation-name: rotate-right;
}


 @-webkit-keyframes rotate-left {
  from {   
opacity: 0;
-ms-transform: rotate(90deg); 
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
  }

  to {   
opacity: 1;
-ms-transform: rotate(0deg); 
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
}

@keyframes rotate-left {
   from {   
opacity: 0;
-ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  }

  to {   
opacity: 1;
-ms-transform: rotate(0deg); 
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
  }
}

.rotate-left {
  -webkit-animation-name: rotate-left;
  animation-name: rotate-left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
   <div class="header__background">

   <a class="header__icon-bar animated" href="">
      <span></span>
      <span></span>
      <span></span>
  </a>
</div>


    <ul class="header__nav">
      <li class="header__nav__item">  <a href="#"> Home    </a> </li>
      <li class="header__nav__item">  <a href="#"> Contact </a>    </li>
      <li class="header__nav__item">  <a href="#"> Apply   </a>    </li>
      <li class="header__nav__item">  <a href="#"> About   </a>    </li>
    </ul>


 </header>

＆＃13;

使用JQuery旋转元素

4 个答案: