Rotating an element with JQuery

Question

I'm creating a basic layout to test my knowledges. I have been creating a menu and I decided to customize it. I want to rotate of 90 degrees the icon made up of 3 vertical lines every time users click on it ( This icon is visible only when the page is despayed on smartphones- @media(max-size: 968px). This icon show the menu when it's clicked. I read how to do it by googling too, but I haven't found an answer yet. Do I have to use css or animate? can I reach to the target with rotate method ? Can you show me the correct way? I don't understand how to use them to rotate the icon.

$(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>

this may have an answer here

Matthew Ciaramitaro
– Matthew Ciaramitaro

2017-04-11 15:07:10 +00:00
Commented Apr 11, 2017 at 15:07 — Matthew Ciaramitaro
– Matthew Ciaramitaro, Commented Apr 11, 2017 at 15:07

Neil · Accepted Answer · 2017-04-11 15:08:48Z

This can be accomplished through CSS3's transform.

$(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

.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 */

<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>

Tim Hunt · Accepted Answer · 2017-04-11 15:11:57Z

CSS Transform could do what you need. Make a class for each 'state' of the transformation. Change the classes per state change. If there are two states there will be a normal state and a rotated state. When user clicks the 3 lines the class is changed from normal state to rotated state. You will need an onclick event to check whether the img you clicked has either the normal class or the rotated class.

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

Do counter else if statement for if the image is already rotated.

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

ps the classes will be calling the transform keyframe you create! Need to create the keyframe transform animation before you can call the class that uses it.

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

Vladut · Accepted Answer · 2017-04-11 15:10:39Z

1

$(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

answered Apr 11, 2017 at 15:10

Vladut

1218 bronze badges

Comments

Maxim Shoustin · Accepted Answer · 2017-04-11 15:39:05Z

you can add animation to make it smooth:

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

See full demo

$(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

/*----------
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;
}

<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>

Collectives™ on Stack Overflow

Rotating an element with JQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related