JavaScript实现下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>郑州轻工业大学欢迎您</title>
<script>
window.onload = function(){
//获取需要悬浮的对象
let show = document.getElementById("show");
//获取被隐藏的菜单
let menu = document.getElementById("menu");
//给show添加鼠标悬浮事件
show.onmouseover = function(){
//改变菜单的内联样式display为block
menu.style.display = "block";
}
//
show.onmouseout = function(){
//获取菜单栏的坐标值
let menux = menu.offsetLeft;
let menuy = menu.offsetTop;
let menuX = menu.offsetLeft+menu.offsetWidth;
let menuY = menu.offsetTop+menu.offsetHeight;
//获取鼠标的坐标值
let event = window.event;
let mouseX = event.clientX;
let mouseY = event.clientY;
if(mouseX<menux || mouseX>menuX || mouseY<menuY || mouseY>menuY){
menu.style.display = "none";
}
}
//分别给menu对象绑定鼠标悬浮和鼠标离开事件
menu.onmouseover = function(){
menu.style.display = "block";
}
menu.onmouseleave = function(){
menu.style.display = "none";
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/* 悬浮对象 */
#show {
margin-top: 10px;
margin-left: 10px;
/* 悬浮的对象的宽度 */
width: 100px;
height: 30px;
border: 1px solid #ccc;
/* 悬浮的对象的背景颜色 */
/* background-color: pink; */
}
/* 悬浮菜单 */
#menu{
display: none;
margin-left: 10px;
/* 悬浮菜单的宽度 */
width: 100px;
border: 1px solid #ccc;
/* background: rgba(0, 0, 0, 0.6); */
}
#menu a{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body bgcolor="#164481">
<table align="right" width="300px" style="color: aliceblue;">
<tr>
<td>教工</td>
<td>学生</td>
<td>考生</td>
<td>校友</td>
<td>English</td>
</tr>
</table>
<br>
<!-- <div bgcolor="#164481"> -->
<img src="ZZULI/logo.png">
<!-- <img src="http://www.zzuli.edu.cn/_upload/tpl/05/8a/1418/template1418/images/logo.png>" -->
<!-- </div> -->
<br><br>
<hr>
<table align="center" width="1000px" style="color: aliceblue;">
<tr>
<td>网站首页</td>
<td>学校概况</td>
<td>
<div id="box">
<div id="show"><a href="#">机构设置</a></div>
<ul id="menu">
<li><a href="#">院系设置</a></li>
<li><a href="#">党政机关</a></li>
<li><a href="#">直属单位</a></li>
</ul>
</div>
</td>
<td>师资队伍</td>
<td>人才培养</td>
<td>学术研究</td>
<td>招生与就业</td>
<td>合作交流</td>
<td>校园文化</td>
</tr>
</table>
<hr>
<div align="center">
<img src="ZZULI/1.jpg"><br><br>
</div>
<!-- <div style="width:100px;text-align:justify;text-justify:inter-ideograph">进入新闻网</div> -->
<div align="right"><font>进入新闻网>></font></div>
</body>
</html>
