Home > Developer > JavaScript
JQuery + CSS implements a slide navigation menu code, jquery navigation menu
Slide menus are 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:
<!DOCTYPE html>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 divs displayed as horizontal bars.
<span class="toggle-button"><div class="menu-bar menu-bar-top"></div><div class="menu-bar menu-bar-middle"></div><div class="menu-bar menu-bar-bottom"></div></span>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:
<div class="menu-wrap"><div class="menu-sidebar"><ul class="menu"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Blog</a></li><li class="menu-item-has-children"><a href="#">Click The Arrow</a><span class="sidebar-menu-arrow"></span><ul class="sub-menu"><li><a href="#">Alignment</a></li><li><a href="#">Markup</a></li><li><a href="#">Comments</a></li></ul></li><li><a href="#">Courses</a></li><li><a href="#">Get In Touch</a></li></ul> </div></div>The menu of each style is not detailed here. Let's take a look at the div 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.
<li class="menu-item-has-children"><a href="#">Click The Arrow</a><span class="sidebar-menu-arrow"></span><ul class="sub-menu"><!-- List items --></ul></li>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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
