【Java Web基础】（十三）侧边菜单导航（JS+CSS）

最新推荐文章于 2024-04-12 13:43:33 发布

passer__jw767

最新推荐文章于 2024-04-12 13:43:33 发布

阅读量2.1k

点赞数 1

分类专栏： Java Web基础

本文链接：https://blog.csdn.net/passer__jw767/article/details/110148536

版权

Java Web基础专栏收录该内容

25 篇文章 4 订阅

订阅专栏

效果图是这样的：
在这里插入图片描述

JSP：

<!DOCTYPE html>
<html>
<head>
	<title>SideBar Nav</title>
	<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/sidenav.css">
</head>
<body>
	<div id="sideBox">
		<h3 class="sideHead">Problems</h3>
		<div class="sideLi">
			<h5 class="sideLih">A Problems</h5>
			<ul class="sideLiUl">
				<li><a href="">a1 problems</a></li>		
				<li><a href="">a2 problems</a></li>
				<li><a href="">a3 problems</a></li>
				<li><a href="">a4 problems</a></li>
				<li><a href="">a5 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">Other</a></li>
			</ul>
		</div>
		<div class="sideLi">
			<h5 class="sideLih">B Problems</h5>
			<ul class="sideLiUl">
				<li><a href="">a1 problems</a></li>		
				<li><a href="">a2 problems</a></li>
				<li><a href="">a3 problems</a></li>
				<li><a href="">a4 problems</a></li>
				<li><a href="">a5 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problemsdadadaaddad</a></li>
			</ul>
		</div>
		<div class="sideLi">
			<h5 class="sideLih">C Problems</h5>
			<ul class="sideLiUl sidebottom">
				<li><a href="">a1 problems</a></li>		
				<li><a href="">a2 problems</a></li>
				<li><a href="">a3 problems</a></li>
				<li><a href="">a4 problems</a></li>
				<li><a href="">a5 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
			</ul>
		</div>
		<div class="sideLi">
			<h5 class="sideLih">D Problems</h5>
			<ul class="sideLiUl sidebottom">
				<li><a href="">a1 problems</a></li>		
				<li><a href="">a2 problems</a></li>
				<li><a href="">a3 problems</a></li>
				<li><a href="">a4 problems</a></li>
				<li><a href="">a5 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
				<li><a href="">a6 problems</a></li>
 
			</ul>
		</div>
	</div>
 
	<script type="text/javascript" src="./js/sidenav.js"></script>
</body>
</html>

CSS:

/**********public**********/
*{
	margin: 0;
	padding: 0;
}
ul{
	list-style-type: none;
}
body{
	background: #fcfcfc;
}
a{
	text-decoration-line: none;
}
/**********Nav Public**********/
#sideBox,
.sideLih,
.sideHead{
	background: #306BA8;
}
.sideLih,
.sideHead{	
	border-bottom: 1px solid #fff;
	color: #fff;	
}
#sideBox,
.sideLiUl{
	box-shadow: 1px 0 3px #306BA8;
}
/**********Nav Box**********/
#sideBox{
	position: fixed;
	left: 0;
	top:30%;
	width: 150px;
	padding: 0 0 20px 0;
}
 
/**********Nav header**********/
.sideHead{
	height: 55px;
	line-height: 55px;
	color: #fff;
	text-align: center;	
	text-shadow: 1px 0px 0px #ccc;
}
 
/**********Nav body**********/
.sideLi{
	position: relative;
	left: 0;
	top:0;
}
.sideLih{
	padding: 10px 0px 10px 20px;
	font-weight: lighter;
}
.sideLiUl{
	background:#214a76;
	position: absolute;
	left: 150px;
	top:0;
	width: 306px;
	display: none;
	opacity:0;
　　    filter:alpha(opacity=0); /* filter 过滤器   兼容IE678*/
	overflow: hidden;
	border: 1px solid #214a76;
	border-left: none;
	border-radius: 3px 5px 5px 3px;
}
.sidebottom{
	top:-300%;
}
.sideLiUl li{
	color: #fff;
	float: left;
	overflow: hidden;
	height: 40px;
	line-height: 40px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 5px;
	display: inline-block;
	width: 90px;
}
.sideLiUl li a{
	color: #fff;
	font-weight: lighter;
	font-size:12px;
}
.sideLi h5:hover,
.sideLiUl li:hover{
	cursor: pointer;
}
.sideLiUl li:hover{
	text-decoration-line: underline;
}

JavaScript

/*获取样式*/
function getStyle(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, null)[attr];
  }
}
/*运动框架*/
function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop = true;
    for (var attr in json) {
      var cur = 0;
      if (attr === 'opacity') {
        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
      } else {
        cur = parseInt(getStyle(obj, attr));
      }
      if (cur != json[attr]) {
        bStop = false;
      }
      var speed = (json[attr] - cur)/10;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      cur += speed;
      if (attr === 'opacity') {
        obj.style.filter = 'alpha(opacity:' + cur + ')';
        obj.style.opacity = cur/100;
      } else {
        obj.style[attr] = cur + 'px';
      }
 
    }
    if (bStop) {
      clearInterval(obj.timer);
      if (fn) fn();
    }
 
  }, 30);
}
 
window.onload = function(){
	var oSideBox  = document.getElementById('sideBox');
    var aSideLi   = oSideBox.getElementsByClassName('sideLi');
    for(var i=0;i<aSideLi.length;i++){
    	aSideLi[i].onmouseover = function(){
           this.children[0].style.backgroundColor = "#214a76";
           this.children[1].style.display = "block";
           startMove(this.children[1],{opacity:100});
        };
        aSideLi[i].onmouseout = function(){
        	startMove(this.children[1],{opacity:0});
        	this.children[1].style.display = "none";
            this.children[0].style.backgroundColor = "#306BA8";
        };
    }
};

passer__jw767

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【Java Web基础】（十三）侧边菜单导航（JS+CSS）

效果图是这样的：JSP：<!DOCTYPE html><html><head> <title>SideBar Nav</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <link rel="stylesheet" type="text/css" href="./css/sidenav.css
复制链接

扫一扫