3

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>
Roberto
  • 33
  • 4

4 Answers4

2

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>
Neil
  • 14,063
  • 3
  • 30
  • 51
2

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

Tim Hunt
  • 62
  • 8
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
Vladut
  • 121
  • 8
1

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>
Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225