Rotating an element with JQuery
I am creating a basic layout to test my knowledge. I am creating a menu and I decided to customize it. I want to rotate 90 degrees an icon composed of three vertical lines every time users click on it (this icon only shows when the page is discarded on @media smartphones (max-size: 968px). This icon shows the menu when it is I have read how to do this by googling too, but I havenโt found the answer yet. Should I use css or animate? Can I reach the target with the rotate method? Can you show me the correct path? I donโt understand how 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>
source to share
This can be accomplished with a CSS3 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>
source to share
CSS Transform can do what you need. Make a class for each transformation "state". Change the classes to change state. If there are two states, there will be a normal state and a rotated state. When the user clicks on 3 lines, the class changes from a normal state to a rotated state. You will need an onclick event to check if the img click has a normal class or a rotated class.
if($('this').attr('class')=='normal'){
///switch to rotated class
}
Executes an else if counter if the image is already rotated.
if($('this').attr('class')=='rotatedl'){
///switch to normal class
}
ps classes will call the generated transform keyframe! You must create a keyframe transformation animation before you can call the class that uses it.
source to share
$(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
source to share
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>
source to share