Home > Web Front-end > JS Tutorial > body text

Sidebar retractable effect

php中世界最好的语言
Release: 2018-03-15 15:11:01
Original
3610 people have browsed it

This time I will bring you the scalable sidebar effect. What are the precautions to achieve the scalable sidebar effect? ​​The following is a practical case, let’s take a look.

jquery realizes the telescopic effect of clicking on the sidebar. Click to shrink, the sidebar shrinks to the left, and the display button is displayed; click the display button, the display button shrinks to the left, and the sidebar is displayed.

The specific code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style>
			*{margin: 0;padding: 0;}
			#box{width: 100%;height: 100%;}
			#left{width: 200px;float: left;background-color: royalblue;position: relative;}
			#btn{width: 100%;height: 50px;background-color: darkgoldenrod;line-height: 50px;text-align: center;color: white;cursor: pointer;}
			#btnb{width: 50px;height: 50px;background-color: red;position: absolute;cursor: pointer;left: -50px;line-height: 50px;text-align: center;}
		</style>
	</head>
	<body>
		<p id="box">
			<p id="left">
				<p id="btn">收缩</p>
			</p>
			<p id="btnb">
				显示
			</p>
		</p>
		<script type="text/javascript">
			$(function(){
				$a = $(window).height();
				$("#left").height($a);
				$("#btn").click(function(){
					$("#left").animate({left:'-200px'});
					$("#btnb").delay(500).animate({left:'0'});
				});
				$("#btnb").click(function(){
					$("#btnb").animate({left:'-50px'});
					$("#left").delay(500).animate({left:'0'});
				});
			});
		</script>
	</body>
</html>
Copy after login

Rendering:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How two zTree interact with each other

How jQuery’s Validate plug-in verifies the input value

What to do if there is no reflection after the ajax request for background data is successful

Usage of jQuery EasyUI folding panel

Using tabs of jQuery EasyUI tab panel

The above is the detailed content of Sidebar retractable effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template