JQuery + CSS implement a slide navigation menu code _ jquery

Slide menus are widely used in website design and can be seen on many websites. This article introduces jQuery + CSS to implement a slide navigation menu code. For more information, see The Slide Menu. it is widely used in website design and can be seen on many websites. It can display key information, make it more readable and aesthetic, and meet the user experience value!

Today, I will show you how to use jquery and css to implement slide menus.

Download the effect display source code

To create a navigation menu, let's first look at the html structure:

 Animation Menu Demo
 《script》
 
 

First, we use normalize.css as the default style to ensure that our menus are the same in each browser. We use fontawesome to display the down icon of the menu item. We also need to reference jQuery to implement menu switching.

Panel button

The navigation buttons for each website panel are similar. It is often an icon font, such as fontawesome, but in this tutorial I want to add some animations, so we use a horizontal line. Basically, our button is a span, which contains three p displayed as a horizontal line.

The style looks as follows:

.toggle-button {position: fixed;width: 44px;height: 40px;padding: 4px;transition: .25s;z-index: 15;}.toggle-button:hover {cursor: pointer;}.toggle-button .menu-bar {position: absolute;border-radius: 2px;width: 80%;transition: .5s;}.toggle-button .menu-bar-top {border: 4px solid #555;border-bottom: none;top: 0;}.toggle-button .menu-bar-middle {height: 4px;background-color: #555;margin-top: 7px;margin-bottom: 7px;top: 4px;}.toggle-button .menu-bar-bottom {border: 4px solid #555;border-top: none;top: 22px;}.button-open .menu-bar-top {transform: rotate(45deg) translate(8px, 8px);transition: .5s;}.button-open .menu-bar-middle {transform: translate(230px);transition: .1s ease-in;opacity: 0;}.button-open .menu-bar-bottom {transform: rotate(-45deg) translate(8px, -7px);transition: .5s;}

The button has a fixed position to scroll the page when it does not move. It also has a z-index: 15 style to ensure that it is always on top of other overlapping elements. The button consists of three horizontal lines. Each horizontal line has its own style. we add a. menu-bar style to it. Other styles of the class are moved to a separate style file. When an animation occurs, we add a class. button-open. We reference jQuery to implement it more conveniently:

$(document).ready(function() {var $toggleButton = $('.toggle-button');$toggleButton.on('click', function() {$(this).toggleClass('button-open');});});

Beginners may not be familiar with jQuery. let me explain what is going on. First, we initialize a variable named $ togglebutton, which contains our buttons. We store it as a variable, and then we create an event monitor listener and click the button. Each time you click, the event listener executes the function toggleclass () method to switch to. button-open.

. Button-open we can use it to change the display mode of these elements. We use the CSS3 translate () and rotate () functions to rotate the horizontal lines at the top and bottom 45 degrees, gradually disappearing from the middle. You can click the button in the Demo to see the effect.

Slide Menu

The html structure of the slide menu is as follows:

 
 

  
  
Home
  
  
About
  
  
Blog
  
  
Click The Arrow 
   
 
    
Alignment
 
    
Markup
 
    
Comments
 
   
  
  
Courses
  
  
Get In Touch
 
 
 

The menu of each style is not explained in detail here. let's take a look at p of. menu-wrap. Its style is as follows:

.menu-wrap {background-color: #6968AB;position: fixed;top: 0;height: 100%;width: 280px;margin-left: -280px;font-size: 1em;font-weight: 700;overflow: auto;transition: .25s;z-index: 10;}

Its position is fixed, so the menu is always scrolling in the same place. Set the height to 100%. Note: the left margin is set to a negative number, so that the menu disappears from the view. To make it have a special effect, we use jquery to call another class to display and close it. The JavaScript code is as follows:

$(document).ready(function() {var $toggleButton = $('.toggle-button'),$menuWrap = $('.menu-wrap');$toggleButton.on('click', function() {$(this).toggleClass('button-open');$menuWrap.toggleClass('menu-show');});});

Add a variable $ menuwrap that contains all menu items and use the same event to create buttons. The left margin of this. menu-show is 0, and some box shadow effects are added.

.menu-show {margin-left: 0;box-shadow: 4px 2px 15px 1px #B9ADAD;}

Sub menu and link

You may notice the class. menu-item-has-children of a list item. Contains sub-menus. At the same time, there is a class. sidebar-menu-arrow after the link.

Click The Arrow
  
  
  
  

Span has a: after pseudo element package to implement the fontawesome arrow. By default, sub-menus are hidden and appear only when the parent menu is clicked:

$(document).ready(function() {var $sidebarArrow = $('.sidebar-menu-arrow');$sidebarArrow.click(function() {$(this).next().slideToggle(300);});});

When we click the arrow, a function is called, and the span following the next element of its target is visible. We use jquery's slidetoggle. It causes or disappears the sliding effect of an element. the function has an animation time parameter.

Finally, our demo menu item has a hover effect. It uses a: after pseudo element. The code is as follows:

.menu-sidebar li > a::after {content: "";display: block;height: 0.15em;position: absolute;top: 100%;width: 102%;left: 50%;transform: translate(-50%);background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);transition: background-position .2s .1s ease-out;background-size: 200% auto;}.menu-sidebar li > a:hover::after {background-position: -100% 0;}

This: The after pseudo element contains the block-level elements that are absolutely located in each link, along with the height and width of 0.15em. We don't just apply the line of background color, we use the linear-gradient () feature in the background image. Although the purpose of this function is to make the color gradient, we can make a gradient color change by specifying the percentage.

.menu-sidebar li > a::after {background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);}

The other half is transparent, and the other half is yellow. The width of all links occupied by the transparent part is 200% in the background.

The transparent part can be in other colors. This will create the illusion of another color fill for one line, but it is actually only a two-color line.

The above is the jQuery + CSS implementation of a slide navigation menu code _ jquery content, for more information, please follow the PHP Chinese network (www.php1.cn )!