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)!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
