用HTML5写ZZULI官网（二）

喜欢与撩

已于 2022-02-06 23:02:09 修改

阅读量187

点赞数

分类专栏： Javascript HTML5 文章标签： html5 javascript 前端

于 2022-02-06 22:47:29 首次发布

本文链接：https://blog.csdn.net/m0_61938171/article/details/122802748

版权

HTML5 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Javascript

7 篇文章 0 订阅

订阅专栏

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>

喜欢与撩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用HTML5写ZZULI官网（二）

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, init...
复制链接

扫一扫

专栏目录