|
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>
|