Spinning an object using JQuery

I am currently working on a project to test my skills. I have set up a menu and now I want to customize it by rotating the icon consisting of three vertical lines by 90 degrees every time a user clicks on it. This icon is only visible on smartphones when the page width is less than 968px. It serves as a toggle for the menu when clicked. I have tried researching this on Google but haven't found a solution yet. Should I use CSS or animation? Can I achieve the rotation using the rotate method? Can someone guide me in the right direction? I'm struggling to understand how to implement the rotation.

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

javascriptjqueryhtmlcssweb

Answer №1

To achieve this effect, CSS3's transform property can be used.

$(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:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } 
*:first-child+html .clearfix { zoom: 1; }
<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 №2

If you're looking to achieve a transformation effect in CSS, utilizing CSS Transform is the way to go. Create different classes for each 'state' of the transformation that you want. Update the classes based on state changes - for instance, having a normal state and a rotated state when needed. When the user interacts with the element, such as clicking on an icon, switch the class from normal to rotated (or vice versa) using an onclick event.

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

Add an else if statement to handle cases where the image is already in the rotated state.

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

Note that the classes will incorporate the transform keyframes you define. Make sure to create the keyframe animations before applying them to your classes.

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

Answer №3

$(document).ready(function(){
  var angle = 45;
    var $navButton = $('.header__icon-bar');
  $navButton.on('click', function(event){
    event.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 $navButton
});//end of the script

Answer №4

To achieve smoothness, consider adding animation:

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

View the complete 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; } 



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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can content be dynamically loaded through ajax in Simile Timeline instead of being loaded upfront?

I am currently utilizing the JavaScript Simile Timeline which includes timeline items with extensive description fields. Rather than including all this information in the initial JSON payload data, I only want to load it when a user clicks on a timeline it ...

javascriptasp.net-mvcajaxsimile

The occurrence of the "contextmenu" event can cause disruption to the execution of a function triggered by the "onmousemove" event

Currently in the process of developing a Vue application utilizing a Pinia store system. Within my BoxView.vue component, I have created a grid layout with draggable elements that have flip functionality implemented within the BoxItem.vue component. Spec ...

javascriptvue.jsdom-eventsmouseeventpinia

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

I am dealing with 2 arrays: const history = [ { type: 'change', old: 1, new: 2 }, { type: 'change', old: 3, new: 4 }, ]; const contents = [ { id: 1, info: 'infor1' }, { id: 2, info: 'infor2' }, { id: ...

javascripttypescriptecmascript-2016

Only authenticated users are permitted to write to Firebase databases

Currently, I am in the process of setting up a new Vue JS project for a blog with Firebase integration. The main objective is to allow any logged-in user to create blog posts that are saved in the Firebase real-time database at https://xxx.firebaseio.com/b ...

javascriptfirebasevue.jsfirebase-realtime-database

Guide on breaking down a series of values within a jQuery datatable

I am facing an issue with a datatable where one column contains a list of values, such as Activity Phase Dates in a comma-separated format. Using render: function (data) { return moment(data).format("MM/DD/YYYY"); directly is not feasible because a list of ...

c#jqueryasp.net-mvcsplitdatatable

Issue with SoundCloud Javascript SDK 3.0 failing to execute put methods

Currently, I am developing a service that utilizes the SoundCloud Javascript SDK 3.0, and I seem to be encountering issues with the PUT methods. Every call I make results in an HTTP error code of 401 Unauthorized. Below is my JavaScript code, which close ...

javascriptsdksoundcloudput

The error message "THREE is not defined" occurred while running mocha tests for a

I am attempting to execute a basic Mocha unit test for code that utilizes the Vector3 class from THREE.js: import {Vector3} from 'three'; const a = new Vector3(0, 0, 0); When running this test using Mocha (specifically mocha-webpack, with webpa ...

javascriptthree.jsmocha.js

What is a more efficient method for switching between edit mode and view mode in ng-grid?

Up until now, I've only managed to switch the edit mode in ng-grid by using separate templates and showing the correct template based on user input. For example: Plunker (resize a column and then switch to another mode) This poses a problem because ...

javascriptjqueryangularjsng-grid

I'm having trouble with populating data in Mongoose. Can anyone provide guidance on

I am currently working on a simple CRUD example for a larger open-source project. I'm trying to populate user data, but despite consulting documentation and forums, I haven't been able to resolve the issue that's causing trouble. The error ...

javascriptnode.jsmongodbmongoose

What is the best way to cancel a request within an HTTP-interceptor?

Within an application, I have established the following URL structure for the API: // public public/url-xyz // private dashboard/url-xyz To avoid unnecessary requests, what is the most effective method for canceling a request? My current approach involv ...

javascriptangularjs

"Enhance the Navbar with a pop of color by changing

https://i.sstatic.net/dHKsV.pngMy Navbar is already defined and working perfectly, but I want to add a full-page background to the Navbar links. Currently, on mobile devices, the link backgrounds do not cover the entire page horizontally and instead look l ...

htmlcssbootstrap-4

Tips for efficiently obtaining JSON Ajax data, saving it to local storage, and presenting it in a jQuery Mobile list view

Upon calling ajax to my server, I receive 1000 units of data which I then store in my local storage before displaying it on a jQuery mobile list-view. However, this process takes around 50-60 seconds to complete. Is there a way to optimize this and make it ...

jqueryhtmlcssjquery-mobilejquery-waypoints

Tips for effectively loading data of a specific user or event into a bootstrap modal in Laravel using AJAX

I'm having some trouble loading Event data into my bootstrap modal in Laravel. This is all new to me as I'm just getting started with AJAX. Can someone please take a look at what I've done so far? Modal Template <div class="modal fa ...

javascriptphpajaxlaravel

"Step-by-step guide on using JavaScript to print a PDF file stored locally

As an illustration, I have a local PDF file with 6 pages. When using the window.print() function, only one page is displayed in print preview regardless of what is shown in the browser. Instead of just one page, all pages should be visible in print previ ...

javascripthtmlangularjs

Using JavaScript's indexOf method with multiple search values

I have a data set that includes various duplicate values ["test234", "test9495", "test234", "test93992", "test234"] I am looking to find the positions of every instance of test234 in the dataset Although ...

javascriptarraysindexof

Filter an array containing objects within objects and use the reduce method to calculate the total value

Here is an array of objects that I'm working with: const data = [ { "order_id":38795, "order_type":"Music", "date":"2021-08-14", "name":"Concert ...

javascriptarraysobjectnested-loopsarray-filter

Detect if the user is using Internet Explorer and redirect them to a different

My web application is having trouble rendering in Internet Explorer. In the meantime, I would like to detect if the user is using IE and redirect them to a different page specifically for IE visitors. What is the best way to accomplish this? Should I use ...

phpjavascripthtmlcss

Breaking apart a pipe-separated text and sending it through a JavaScript function

CSS: <div class="pageEdit" value="Update|1234567|CLOTHES=5678~-9876543?|5678"> <a href="https://host:controller">Update</a> </div> Trying to retrieve the data within the div and pass it into a JavaScr ...

javascripthtmljqueryjsp

Array filtering functions similarly to marketplace filtering tools

In order to make the filter function like a marketplace filter, I want to only see items related to the selected brand and status. For example: partners = [ 0:{ year: "2022" badge_status: "badge-success" sale_date: "01/07/2022&quo ...

javascriptarraysangulartypescript

Executing javascript code that has been inserted into inner HTML is not functioning as expected

Trying to retrieve a response from another page, specifically named ajaxresponse.php, through an AJAX request. I also aim to execute some JavaScript actions on that ajaxresponse.php page, but the JavaScript code is not functioning as expected. Although I a ...

javascriptajax