JQUERY+CSS implementation of a sideslip navigation menu code _jquery

The Sideslip menu is widely used in web design, and can be seen on many websites in this kind of menu. It can show the key information, make it more readable and beautiful, to meet the user experience value!

Today's small series shows you how to use jquery and CSS to implement the Sideslip menu.

Effect Display source Download

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

<! DOCTYPE html>
 
 

Beginners may not be familiar with jquery, let me explain what's going on here. First, we initialize a variable called $togglebutton, which contains our buttons. We store it as a variable, and then we create an event monitor to listen to the click button. Once per click, the event listener performs a 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 () function to rotate the top and bottom horizontal lines 45 degrees, with the middle horizontal line gradually disappearing. You can click on the button in the demo to see the effect.

Sideslip Menu

The HTML structure of the Sideslip 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>

Here is not a detailed explanation of each style of the menu, let's look at the. Menu-wrap Div. 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. Height is set to 100%. Note that the left margin is set to a negative number so that the menu disappears from view. In order for it to have a special effect, we use jquery to invoke another class to display and close. 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 uses the same event to create the button. this. Menu-show's left margin is 0 and adds some box shadow effects.

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

Sub Menus and links

You may notice the class. Menu-item-has-children of a list item. 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
" Sidebar-menu-arrow "></span>
<ul class=" sub-menu ">
<!--List items-->
</ul>

Span has one:: After pseudo element package implements Fontawesome arrow. By default, submenus 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 ();

When we click the arrow, a function is called, and the span behind the next element of its target is made visible. We use the Slidetoggle of jquery. It causes the sliding effect of an element to appear or disappear, and the function has an animation time parameter.

Finally, our Demo menu item has a hover effect. It is using 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 block-level elements that are absolutely positioned under each link, with 0.15em height and width. We do not just apply the background color to the line, we use Linear-gradient () in the background image function. Although the purpose of this function is to make the color gradient, we can make a gradient by specifying the percentage of the color change.

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

Half the line here is transparent and the other half is yellow. The width of all the links that the transparent part occupies by using the width of the background size 200%.

And the transparent part can be used in other colors. This creates an illusion that another color fills the line, but in fact it's just a one or two-color line.