jquery rotate navigation button

With the popularity of mobile devices and responsive web design, more websites are beginning to use rotating navigation buttons to enhance user experience. Compared with traditional navigation menus, this kind of navigation button is simpler, easier to operate, and can better adapt to different device sizes.

In this article, we will explore how to use jQuery to create a rotating navigation button, and introduce some commonly used rotation animation effects and other related techniques.

Step 1: HTML and CSS layout

First, we need to create the basic structure of a rotating navigation button in the HTML document:

<div class="rotate-btn">
  <span class="line line1"></span>
  <span class="line line2"></span>
  <span class="line line3"></span>
</div>

Here we create a div element , containing three span elements, used to represent the three straight lines of the navigation button. We use CSS styles to style these elements:

.rotate-btn {
  display: block;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
}

.line {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: transform .3s ease-in-out;
}

.line1 {
  top: 0;
}

.line2 {
  top: 50%;
  transform: translateY(-50%);
}

.line3 {
  bottom: 0;
}

In the above CSS styles, we set the width and height of the spin navigation button to 40px and specify its position as relative positioning. At the same time, we set the position and style of the three line segments using absolute positioning. What needs to be noted here is that we use the transform attribute and transition attribute to achieve the rotation animation effect.

Step 2: Add jQuery code

Next, we need to use jQuery to add interactive effects. We first add the jQuery library to the HTML file, and then write the following code:

$(document).ready(function() {
  $('.rotate-btn').click(function() {
    $(this).toggleClass('active');
  });
});

In the above code, we use jQuery's ready method to ensure that the script code is executed after the document is loaded. Then in the click method, we add a click event for the rotation navigation button, and when the button is clicked, we use the toggleClass method to toggle the active class of the button.

Step 3: Add animation effects

In order to make the rotating navigation button more vivid, we can use some styling and animation techniques to enhance its visual effect. The following are several common rotation animation effects:

1. Simple flip effect

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(-45deg);
}

.rotate-btn.active .line2 {
  opacity: 0;
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(45deg);
}

In this effect, we use the rotate attribute and translateY attribute to achieve the flip of a straight line and pan up and down. At the same time, set the middle straight line to transparent to achieve a hidden effect.

2. Waveform Effect

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(45deg);
}

.rotate-btn.active .line2 {
  transform: rotate(-45deg);
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(135deg);
}

In this effect, we set the first and last straight lines to rotate by plus or minus 45 degrees respectively, while the middle The straight line will rotate around the center.

3. Bounce effect

.rotate-btn.active .line1 {
  transform: translateY(10px);
}

.rotate-btn.active .line2 {
  transform: scale(0.8);
}

.rotate-btn.active .line3 {
  transform: translateY(-10px);
}

In this effect, we make the straight line translate up and down along the vertical direction, while shrinking the middle straight line.

Here we only introduce three effects. In fact, there are many kinds of animation effects for rotating navigation buttons, and developers can adjust and modify them according to their own needs.

Summary

In this article, we introduced the basic process of creating a rotating navigation button and explained how to use jQuery and CSS to achieve interactive effects and animation effects. I believe that by studying this article, you have mastered the basic skills of creating a rotating navigation button, and you can use this function in your own website to improve user experience and website aesthetics.

The above is the detailed content of jquery rotate navigation button. For more information, please follow other related articles on the PHP Chinese website!