<学习笔记> jQuery 实现左菜单

最新推荐文章于 2023-02-23 21:39:11 发布

Mars_Jiang

最新推荐文章于 2023-02-23 21:39:11 发布

阅读量582

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/Mars_Jiang/article/details/50384800

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery实现左菜单：

思路：

1、左菜单开始left坐标为负，即不在主页面内。

2、当点击按钮时，修改左菜单与主页面的坐标，使左菜单将主页面"向右顶"，再次点击按钮还原起始坐标实现收起菜单。

3、css添加"transition:0.5s"实现动画效果，完成左菜单实现。

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- viewport移动端限制缩放大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<title>左菜单</title>
<style>
	*{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden; /* 隐藏超出屏幕部分 */
	}
	.menu{
	height:100%;
	width:75%; 
	background:#f1103a;
	position:absolute; /* 绝对定位 */
	transition:0.25s; /* 动画效果 */
	}
	.menu_hide{
	left:-75%; 
	}
	.menu_show{
	left:0;
	}
	.content{
	height:100%;
	width:100%;
	background:#000000;
	position:absolute; /* 绝对定位 */
	transition:0.25s; /* 动画效果 */
	}
	.content_hide{
	left:75%;
	}
	.content_show{
	left:0;
	}
</style>
<script>
	var oc = 1;
	function clickLeft(){
		if(oc==1){
			$('#aside').removeClass('menu_hide').addClass('menu_show');
			$('#wrap').removeClass('content_show').addClass('content_hide');
			oc=0;
		}else if(oc==0){
			$('#aside').removeClass('menu_show').addClass('menu_hide');
			$('#wrap').removeClass('content_hide').addClass('content_show');
			oc=1;
		}
	}
</script>
</head>
<body>
<div id="aside" class="menu menu_hide">
<!--<h2 style="text-align:center;padding:10%;font-size:50px">Side Menu</h2>-->
</div>
<div id='wrap' class="content content_show">
     <input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
     <input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
     <input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
     <input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
     <input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
     <input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
  </div>
</body>
</html>

Mars_Jiang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
<学习笔记> jQuery 实现左菜单

jQuery实现左菜单：思路：1、左菜单开始left坐标为负，即不在主页面内。2、当点击按钮时，修改左菜单与主页面的坐标，使左菜单将主页面"向右顶"，再次点击按钮还原起始坐标实现收起菜单。3、css添加"transition:0.2s ease-out"实现动画效果，完成左菜单实现。实现代码：左菜单 *{ margin:0; padding:0;
复制链接

扫一扫