三种方式实现下拉菜单效果

最新推荐文章于 2024-05-30 11:27:58 发布

angyangan9569

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量387

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fozero/p/5831895.html

版权

使用3种方式实现下拉菜单效果： html/css 、js方法实现下拉菜单显示隐藏、jquery方法实现下拉菜单显示隐藏

先看效果图

第一种：html/css方式实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>下拉菜单的实现</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #nav{
                background-color:#eee ;width: 600px;height: 48px;margin: 0 auto;
            }
            ul{list-style: none;}
            ul li{
                float: left;line-height: 48px;text-align: center;position: relative;
            }
            a{text-decoration: none;color: #666;display: block;padding: 0 10px;}
            a:hover{color:#fff;background-color: #666666;}
            ul li ul li{float: none;background-color: #eee;margin-top: 2px;}
            /*使用absolute绝对定位   父类需设置position为relative*/
            ul li ul{position: absolute;left: 0;top: 48px;display: none;}
            ul li ul li a:hover{background-color: cornflowerblue;}
            /*鼠标经过时显示二级菜单*/
            ul li:hover ul{display: block;}
        </style>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程大厅</a>
                    <ul>
                        <li><a href="#">javasript</a></li>
                        <li><a href="#">jquery</a></li>
                    </ul>
                </li>
                <li><a href="#">学习中心</a>
                    <ul>
                        <li><a href="#">javasript</a></li>
                        <li><a href="#">jquery</a></li>
                    </ul>
                </li>
                <li><a href="#">经典案例</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
        
    </body>
</html>

第二种：js方法实现下拉菜单显示隐藏

1、首先为菜单添加鼠标悬浮、移除事件

<li οnmοuseοver="showsubmenu(this);" οnmοuseοut="hidesubmenu(this);"><a href="#">课程大厅</a>
                    <ul>
                        <li><a href="#">javasript</a></li>
                        <li><a href="#">jquery</a></li>
                    </ul>
                </li>

2、定义js方法

function showsubmenu(li){
                //根据标签名获取对象集合
                var submenu=li.getElementsByTagName("ul")[0];
                submenu.style.display="block";
            }
            function hidesubmenu(li){
                var submenu=li.getElementsByTagName("ul")[0];
                submenu.style.display="none";
            }

第三种：jquery方法实现下拉菜单显示隐藏

转载于:https://www.cnblogs.com/fozero/p/5831895.html

angyangan9569

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种方式实现下拉菜单效果

使用3种方式实现下拉菜单效果： html/css 、js方法实现下拉菜单显示隐藏、jquery方法实现下拉菜单显示隐藏先看效果图第一种：html/css方式实现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> ...
复制链接

扫一扫