web前端实战系列[3]——下拉菜单

最新推荐文章于 2023-08-07 08:22:01 发布

weixin_30678349

最新推荐文章于 2023-08-07 08:22:01 发布

阅读量215

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/helloIT/articles/5155698.html

版权

1.制作步骤

静态网页
动态效果——下拉菜单的显示和隐藏
    |---css实现
    |---JQuery实现
    |---JavaScript实现
浏览器兼容性问题

2.html+css实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>下拉式菜单的html+css实现</title>
    <style type="text/css">
        *{ margin:0px; padding: 0px}
        #nav{ background-color:#eee; height: 40px; width: 600px; margin: 0 auto;}  /*基本样式*/
        ul{ list-style: none;} /*ul前面的·消失*/
        ul li{ float: left; line-height: 40px; text-align: center;position: relative;} /*水平居中*/
        a{text-decoration: none; color:#000; padding: 0 10px;}
        a:hover{color: #eee; background-color: #aaa}
        ul li ul li{ float:none; background-color: #eee; margin-top: 2px;}
        ul li ul{position: absolute; left:0px; top:40px;display: none}
        ul li ul li a:hover{background-color:blue;}
        ul li:hover ul{display: block;}
    </style>
</head>
<body>
    <h1>叶莜落的个人网站</h1>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">JQuery</a></li>
                </ul>
            </li>
            <li><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">视频学习</a></li>
                    <li><a href="#">案例学习</a></li>
                    <li><a href="#">交流平台</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>

</body>
</html>

html+css实现

3.html+JavaScript实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用JavaScript方法实现下拉菜单</title>

    <style type="text/css">
        *{ margin:0px; padding: 0px}
        #nav{ background-color:#eee; height: 40px; width: 600px; margin: 0 auto;}  /*基本样式*/
        ul{ list-style: none;} /*ul前面的·消失*/
        ul li{ float: left; line-height: 40px; text-align: center;position: relative;} /*水平居中*/
        a{text-decoration: none; color:#000; padding: 0 10px;}
        a:hover{color: #eee; background-color: #aaa}
        ul li ul li{ float:none; background-color: #eee; margin-top: 2px;}
        ul li ul{position: absolute; left:0px; top:40px;display: none}
        ul li ul li a:hover{background-color:blue;}

    </style>

    <script type="text/javascript">
        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";
        }
    </script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">JQuery</a></li>
                </ul>
            </li>
            <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">视频学习</a></li>
                    <li><a href="#">案例学习</a></li>
                    <li><a href="#">交流平台</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</body>
</html>

html+JavaScript实现

4.html+JQuery实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用JQuery方法实现下拉菜单</title>

    <style type="text/css">
        *{ margin:0px; padding: 0px}
        #nav{ background-color:#eee; height: 40px; width: 600px; margin: 0 auto;}  /*基本样式*/
        ul{ list-style: none;} /*ul前面的·消失*/
        ul li{ float: left; line-height: 40px; text-align: center;position: relative;} /*水平居中*/
        a{text-decoration: none; color:#000; padding: 0 10px;}
        a:hover{color: #eee; background-color: #aaa}
        ul li ul li{ float:none; background-color: #eee; margin-top: 2px;}
        ul li ul{position: absolute; left:0px; top:40px;display: none}
        ul li ul li a:hover{background-color:blue;}

    </style>

    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".firstMenu").mouseover(function(){
                $(this).children("ul").show();
            });
            $(".firstMenu").mouseout(function(){
                $(this).children("ul").hide();
            });
        });
    </script>
</head>
<body>
    <div id="nav">
        <ul>
            <li class="firstMenu"><a href="#">首页</a></li>
            <li class="firstMenu"><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">JQuery</a></li>
                </ul>
            </li>
            <li class="firstMenu"><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">视频学习</a></li>
                    <li><a href="#">案例学习</a></li>
                    <li><a href="#">交流平台</a></li>
                </ul>
            </li>
            <li class="firstMenu"><a href="#">经典案例</a></li>
            <li class="firstMenu"><a href="#">关于我们</a></li>
        </ul>
    </div>
</body>
</html>

html+JQuery实现

注意：需要先引入JQuery的js文件。

转载于:https://www.cnblogs.com/helloIT/articles/5155698.html

weixin_30678349

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端实战系列[3]——下拉菜单

1.制作步骤静态网页动态效果——下拉菜单的显示和隐藏 |---css实现 |---JQuery实现 |---JavaScript实现浏览器兼容性问题2.html+css实现<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8">...
复制链接

扫一扫