Home > Developer > Web Develop
To create a navigation menu, Let's look at the HTML structure first:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>animation Menu demo</title>
<link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" >
<link href= ' Https://fonts.googleapis.com/css?family=Montserrat ' rel= ' stylesheet ' type= ' text/css ' >
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js" ></script>
<script src= "script.js" ></script>
<link rel= "stylesheet" href= "style.css" >
<body>
<!--Content goes here--
</body>
first, we refer to NORMALIZE.CSS as the default style to ensure that our menus are the same in every browser. We use the font icon fontawesome to display the menu item down Icon. We also need to invoke jquery to implement the menu Switch.
Panel buttons
Each site Panel navigation button is similar. It is often an icon font, such as fontawesome, but in this tutorial I want to add some animations, so we use the horizontal line to Achieve. basically, Our button is a span that contains three div displays as horizontal dashes.
<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;
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 it does not move. It also has a z-index:15 style to ensure that it always stays on top of other overlapping elements. The button is made up of three horizontal lines. Each horizontal line has its own style, and we add the. menu-bar style to it. The rest of the style of the class is moved to a separate style file. When an animation occurs, we add a class. Button-open. We quote jquery, which makes it easier to implement It:
$ (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 how this is going. 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 for the click Button. On each click, the event listener executes method function Toggleclass () to toggle The. 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 fades away. You can click on the button in the demo to see the Effect.
Slide Menu
The HTML structure of the Side-slip 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>
Here is not a detailed explanation of each style of the menu, we look at The. menu-wrap Div. Its style is as Follows:
. menu-wrap {
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%. Notice 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 has a left margin of 0 and adds some box shading 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 Sub-menus. also, after linking, 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 one:: after pseudo-element package implements the Fontawesome ARROW. By default, submenus are hidden and appear only when you click the parent menu:
$ (document). Ready (function () {
var $sidebarArrow = $ ('. sidebar-menu-arrow ');
$SIDEBARARROW. Click (function () {
$ (this). Next (). slidetoggle (300);
});
});
When we click the arrow, a function is called when it targets a span after the next element and makes it Visible. We use the slidetoggle of Jquery. It makes an element slide effect appear or disappear, the function has an animation time parameter.
finally, Our Demo menu item has a hover Effect. It is used by 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 block-level elements that are absolutely positioned at each link, with 0.15em height and width. We don't just apply the background color of the line, we use Linear-gradient () in the background image Feature. Although the purpose of this feature is to make the color gradient, we can do 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%);
}
Half of the lines here are transparent and the other half are YELLOW. By the width of the background size 200%, make the transparent portion occupy the width of all the links.
How to implement a slide-by navigation menu with CSS and jquery
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
