左侧菜单渐入效果 jquery

最新推荐文章于 2021-12-20 16:46:20 发布

养家糊口的程序媛

最新推荐文章于 2021-12-20 16:46:20 发布

阅读量4.8k

点赞数

分类专栏：小技术文章标签： jquery border xhtml class function div

本文链接：https://blog.csdn.net/sundenskyqq/article/details/8034464

版权

小技术专栏收录该内容

32 篇文章 0 订阅

订阅专栏

环境需要jquery

jsp 代码如下：

<%@ page language="java" pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左侧导航菜单-首页</title>
<!-- 引入jquery相关的js文件 -->
<script type="text/javascript" src="../js/jquery/jquery-1.5.1.min.js"></script>

<script type="text/javascript">

	function closeDiv() { 
		$("#leftWorkSheetDiv").hide();
		$("#leftDetailDiv").show(2500);
		$("#btnDiv").show(2500);
		
	}
	
	function opneDiv() { 
		$("#leftDetailDiv").hide();
		$("#btnDiv").hide();
		$("#leftWorkSheetDiv").show(2500);
		
	}
</script>
<style type="text/css">
.lnavbg3{ width:168px; height:25px; _height:20px; line-height:25px; _padding:5px 0 0 0; background:url(../images/leftnavbg3.png) no-repeat;}
</style>
</head>

<body class="imgbody">

<!-- 用来打开左侧隐藏菜单用到的div，也就是最左面的一块竖条div -->
<div id="btnDiv" style="position:absolute;left:0px;top:0px;width: 2px; min-height:450px;" οnmοuseοver="opneDiv()"></div>	

<!-- 这里需要注意的是两个事件：onmouseleave，onmouseenter，这两个事件用“alt+/”快捷键是打不出来的，所以代码甚至会出现黄色下划线提示
	- Undefined attribute name 
	 (onmouseenter).
	- Undefined attribute name 
	 (onmouseleave).-->
<div id="leftWorkSheetDiv"
	style=" display: none; border: 1px solid blue; width: 300px; height: 500px; background-color:#A7C0DC;"
	οnmοuseleave="closeDiv()" οnmοuseenter="opneDiv()">
	隐藏起来的div
	<ul>
		<li>菜单5</li>
		<li>菜单6</li>
		<li>菜单7</li>
		<li>菜单8</li>
	</ul>
</div>
	
<div id="leftDetailDiv" class="leftbox" style="border: 1px solid #A7C0DC; width: 300px; height: 500px; background-color:#A7C0DC; ">
	现有的div
	<ul>
		<li>菜单1</li>
		<li>菜单2</li>
		<li>菜单3</li>
		<li>菜单4</li>
	</ul>
</div>
</body>
</html>

效果图如下：

养家糊口的程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
7
评论
左侧菜单渐入效果 jquery

环境需要jqueryjsp 代码如下：左侧导航菜单-首页 function closeDiv() { $("#leftWorkSheetDiv").hide(); $("#leftDetailDiv").show(2500); $("#btnDiv").show(2500); } function opneDiv() { $("
复制链接

扫一扫

专栏目录