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="#">JavaScripta>li>
                    <li><a href="#">JQuerya>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="#">JavaScripta>li>
                    <li><a href="#">JQuerya>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="#">JavaScripta>li>
                    <li><a href="#">JQuerya>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

你可能感兴趣的:(web前端实战系列[3]——下拉菜单)