js--Side-Bar navigation click Slide-in slide-out effect

For the positioning of the sidebar navigation click Slide into the slide out of the effect, I think a lot of people understand the principle, and very simple to use js+jquery can be done. And it's a very common simple effect. In this case, small size elder brother just for his later can look over, and also to those who have just started JavaScript new people a little inspiration.

As a beginner JavaScript, it's important to understand how an effect is achieved. That's how the principle is going to be especially important! Small yard yesterday on the road met a fresh graduate, just from Qingdao to Beijing to find a job. is to learn computer, C and C + + start, from this basis, I say you learn what language has an advantage. There is no logical basis for it!?

Nonsense not to say, directly on the code:

HTML code:

<div class= "sidebar" >

<div class= "Side_btn1 side_btn" ><a class= "S_btn1" href= "#" title= "click to Eject" ></a></div>

<div class= "Side_btn2 side_btn" >

<a class= "s_btn2" href= "#" title= "click to hide" ></a>

</div>

<div class= "Side_main" >

<a class= "Side_hd" href= "#" title= "" ></a>

<ul class= "Side_nav" >

<li class= "li1" ><a href= "#" title= "" > Old friend return collar ammunition </a></li>

<li class= "Li1" ><a href= "#" title= "" > Military exploit double easter egg </a></li>

<li class= "Li1" ><a href= "#" title= "" > Tank mode send weapons </a></li>

<li class= "Li1" ><a href= "#" title= "" > Set up fragments against the Rite </a></li>

<li class= "Li1" ><a href= "#" title= "" > new eight star pre-sale </a></li>

<li class= "Li1" ><a href= "#" title= "" > Permanent weapon Recharge </a></li>

<li class= "Li1" ><a href= "#" title= "" > Weibo forward Draw Jackpot </a></li>

<li class= "Li1" ><a href= "#" title= "" > Idol starring for you </a></li>

<li class= "Li1" ><a href= "#" title= "" > Friends win Good Gift </a></li>

</ul><!--side_nav-->

</div><!--. side_main-->

</div><!--. sidebar-->

CSS code:

/*s sidebar*/

. sidebar{width:200px;padding:100px 0 0 0;height:100%;p osition:fixed;left:-200px;top:0;background: #0e0e0e; _ position:absolute;_height:1275px;z-index:999;}

. Sidebar. side_btn{position:absolute;width:62px;height:153px;right:-57px;top:320px;}

. Sidebar. side_btn a{display:block;width:62px;height:153px;}

. Sidebar. Side_btn2{display:none;}

. Sidebar. side_btn1. S_btn1{background:url (.. /images/sidebar-btn.png) 0 0;}

. Sidebar. side_btn2. S_btn2{background:url (.. /images/sidebar-btn.png) -62px 0;}

. side_main{width:179px;margin:0 Auto;}

. Side_main. Side_hd{display:block;width:179px;height:61px;background:url (.. /images/sidebar-hd.jpg);}

. Side_main. side_nav{width:100%;margin-top:50px;}

. side_main. Side_nav Li A{display:block;width:179px;height:51px;background:url (.. /images/sidebar-bg.png) 0 0;text-align:center;line-height:51px;font-size:15px;color: #e6c1a7;}

. side_main. Side_nav Li A:hover{background:url (.. /images/sidebar-bg.png) 0-51px;color: #ffce4a;}

JS Code:

/* Left navigation */

$ ('. Side_btn1 '). Click (function () {

$ ('. Sidebar '). Animate ({left: "0px"},1000,function () {

$ ('. Side_btn1 '). Hide ();

$ ('. Side_btn2 '). Show ();

});

});

$ ('. Side_btn2 '). Click (function () {

$ ('. Sidebar '). Animate ({left: " -200px"},1000,function () {

$ ('. Side_btn2 '). Hide ();

$ ('. Side_btn1 '). Show ();

});

});

With the diagram:

Load-btn.png

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/5D/B4/wKiom1UjR-iDPJT9AAAwzkHeupo167.jpg "style=" float: none; "title=" Sidebar-bg.png "alt=" Wkiom1ujr-idpjt9aaawzkheupo167.jpg "/>

Sidebar-btn.png

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/5D/B4/wKiom1UjR-jA3kcuAAAoEwllaNg661.jpg "style=" float: none; "title=" Sidebar-btn.png "alt=" Wkiom1ujr-ja3kcuaaaoewllang661.jpg "/>

Sidebar-hd.jpg

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/5D/B0/wKioL1UjSS6Bzqu3AAA6aErfGXc351.jpg "style=" float: none; "title=" sidebar-hd.jpg "alt=" Wkiol1ujss6bzqu3aaa6aerfgxc351.jpg "/>

This is the picture that is used, and the button background image.

If you do not want to use the above image, you can change the image according to the size of your code.

Again, in this effect, the animated animate method in JS jquery is involved. Do not know the yards farmers hope to learn by themselves!

The principle is to control the left value of the module.

Hope to be helpful to everyone. Wow, quack.

This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1629523

js--Side-Bar navigation click Slide-in slide-out effect