jQuery CSS implements a side-sliding navigation menu code_jquery
side menus are widely used in website design, and this type of menu can be seen on many websites. it can display key information, make it more readable and beautiful, and satisfy user experience value!
today i will show you how to use jquery and css to implement a side-sliding menu.
effect display source code download
in order to build the navigation menu, let us first look at the html structure:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>animation menu demo</title> <link rel="stylesheet" href=" <link href='https://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href=" <script src=" </script> <script src="script.js"> </script> <link rel="stylesheet" href="style.css"> </head><body> <!-- content goes here --> </body> </html>
first, we reference normalize.css as the default style to ensure that our menu is the same in every browser. we use the font icon fontawesome to display the menu item down icon. we also need to reference jquery to implement menu switching.
panel buttons
every site panel navigation button is similar. it's often an icon font like fontawesome, but in this tutorial i want to add some animation, so we do that with horizontal lines. basically, our button is a span containing three divs displayed as horizontal lines.
<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 like this:
.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 and scrolls the page when not moving. it also has a z-index of :15 to ensure it always stays on top of other overlapping elements. the button consists of three horizontal lines. each horizontal line has its own style, and we add the .menu-bar style to it. the remaining styles of the class were moved to separate style files. when the animation happens, we add a class .button-open. we quote jquery, which can be implemented 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 called $togglebutton, which contains our button. we store it as a variable and then we create an event monitor to listen for button clicks. each time it is clicked, the event listener will execute the method function toggleclass() to toggle .button-open.
.button-open we can use it to change the way these elements are displayed. we use the css3 translate() and rotate() functions to rotate the top and bottom horizontal lines 45 degrees, and the middle horizontal line gradually disappears. you can click the button in the demo to see the effect.
side menu
the html structure of the side 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>
in i won’t explain each style of menu in detail 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 always scrolls in the same place. the height is set to 100%. note that the left margin is set to a negative number, causing the menu to disappear from view. in order to give it an appearance 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');
});
});we add a variable $menuwrap which contains all the items of the menu and use the same event to create the button. this .menu-show has a left margin of 0 and adds some box shadow effects.
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #b9adad;
}submenus and links
you may notice that a list item has class .menu-item-has-children. contains submenus. at the same time, after the link, there is a class .sidebar-menu-arrow.
<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 that implements fontawesome arrows. by default, the submenu is hidden and only appears when clicking on the parent menu:
$(document).ready(function() {
var $sidebararrow = $('.sidebar-menu-arrow');
$sidebararrow.click(function() {
$(this).next().slidetoggle(300);
});
});when we click on the arrow, a function is called with the span after the next element of its target and make it visible. we use jquery's slidetoggle. it makes the sliding effect of an element appear or disappear. 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 ::after pseudo-element contains absolutely positioned block-level elements under each link, with a height and width of 0.15em. we don't just apply the background color to the line, we use the linear-gradient() function on the background image. although the purpose of this function is to make a color gradient, we can make a gradient color change by specifying a percentage.
.menu-sidebar li > a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}half the lines here are transparent and the other half are yellow. pass the background size to 200% of the width so that the transparent part takes up the width of all links.
the transparent part can use other colors. this will create the illusion of a line filled with another color, but in reality it is just a line of two colors.
the above is the content of jquery css to implement a side-sliding navigation menu code_jquery. for more related content, please pay attention to the php chinese website (www.php.cn)!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to view the date of bootstrap
Apr 07, 2025 pm 03:03 PM
Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to verify bootstrap date
Apr 07, 2025 pm 03:06 PM
To verify dates in Bootstrap, follow these steps: Introduce the required scripts and styles; initialize the date selector component; set the data-bv-date attribute to enable verification; configure verification rules (such as date formats, error messages, etc.); integrate the Bootstrap verification framework and automatically verify date input when form is submitted.
