Using JS to write response-side sidebar _javascript tips

In order to practicing, you learn to knock on the site just meet the need to make sidebar, on the internet also checked a variety of plug-ins and the framework can achieve this function, but want to learn to use JS native to learn a try, so on the beginning of the completion of the sidebar implementation, you can let beginners reference, code capacity is limited.

The main design is the animate () function, animate () method to perform a custom animation of the CSS property set. This method changes the element from one state to another through a CSS style. CSS property values are gradually changed, so you can create animation effects. Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red"). More use please go to search yourself, I do not specifically introduced. The other is to use the media query method, by detecting the current device screen size to adjust the size of the side bar design. The method of media query can set different styles for different screen sizes, especially if you need to set the design response page.

Next is the specific implementation, with the code:

<! DOCTYPE html>  

JS implementation:

$ (function () {

 var windowwidth = $ (window). width ();
 var windowheight = $ (window). Height ();
 var sidebarwidth = windowwidth*0.8;
 Set the width to the left of the sidebar and the right height
 $ (". Sidebar-left"). Height (windowheight);
 $ (". Sidebar-right"). Height (windowheight);
 The sidebar slides from left to right
 $ (". Nav-icon"). On ("click", Function () {
 $ ('. SideBar '). Animate ({left: "0"},350);
 });
 Click Exit and the sidebar slides from right to left
 $ ('. Exit '). On ("click", Function () {
 $ ('. SideBar '). Animate ({left: " -100%"},350);
 })

 

CSS Design:

*{margin:0;} a{color: #fff;
Text-decoration:none;
 }. container{width:100%;
 height:100%;
 min-width:280px;
position:relative;
 }. header{background: #0C7AB3;
List-style:none;
 }. nav-icon{width:30px;
 Background: #0C7AB3;
padding:8px;
 }. Nav-icon span{display:block;
 border:1px solid #fff;
 margin:4px;
width:20px;
 }. nav-icon:hover{cursor:pointer; sidebar{width:100%;
 Position:absolute;
 top:0px;
Left:-100%;
 }. sidebar-left{width:75%;
 Background: #fff;
 Float:left;
Background-color: #343A3E;
 }. sidebar-left. divider{width:80%;
 height:6px;
 margin-top:30px;
 padding-left:15px;
Background-color: #3099FF;
 }. sidebar-left. body-content{width:80%;
 margin-top:15px;
 padding:15px 0 15px 15px;
 border-top:2px solid #3099FF;
Color: #EFEFEF;
 }. body-content. item{margin:4px; item ul{List-style:none;
Margin-left: -24px;
 Item UL li{margin:8px; item. circle{width:10px;
 height:10px;
 margin-right:10px; Border-radius:50%;
 Background-color: #3099FF;
Display:inline-block;
 }. sidebar-right{width:25%;
 Display:inline-block;
Background-color:rgba (0, 0, 0, 0.5);

 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.