左面菜单渐入效果 jquery
左侧菜单渐入效果 jquery
环境需要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;" onmouseover="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;"
onmouseleave="closeDiv()" onmouseenter="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>
效果图如下：