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

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文件。

 

posted @ 2016-01-24 19:28  叶莜落  阅读(952)  评论(0)  编辑  收藏  举报