简单易懂ul三级菜单 html+css+jq

来源：互联网发布：手机淘宝设置发货地址编辑：程序博客网时间：2024/06/06 04:27

在网上找了很多, 但是因为我是新手, 很多不太懂, 修改起来比较麻烦, 所以自己写了一个

有什么意见请提出.

test.html:

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="./css/test.css">    <script src="./js/jquery.min.js"></script>    <script src="./js/test.js"></script>    <style type="text/css">    </style></head><body>    <div class="nav">        <ul>            <li>                <img src="img/b1-0.png" class="nav-img-1">                <a class="menu1"><div  class="empty-block"></div>水果<span class="openmoreUp"></span>                    <br/><b class="smallfont">                    (123)</b></a>                <ul class="ul2">                    <li><img src="img/b2-0.png" class="nav-img-2">                        <a class="menu2"><div  class="empty-block"></div>子菜单<span class="hasmore">≡</span><br/><b class="smallfont">(123)</b></a>                        <ul class="ul3">                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                        </ul>                    </li>                    <li><img src="img/b2-0.png" class="nav-img-2">                        <a class="menu2"><div  class="empty-block"></div>子菜单<span class="hasmore">≡</span><br/><b class="smallfont">(123)</b></a>                        <ul class="ul3">                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                        </ul>                    </li>                    <li><img src="img/b2-0.png" class="nav-img-2">                        <a class="menu2"><div  class="empty-block"></div>子菜单<span class="hasmore">≡</span><br/><b class="smallfont">(123)</b></a>                        <ul class="ul3">                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                        </ul>                    </li>                </ul>            </li>            <li><img src="img/b1-0.png" class="nav-img-1">                <a class="menu1"><div  class="empty-block"></div>蔬菜<span class="openmoreUp"></span><br/><b                        class="smallfont">(123)</b></a>                <ul class="ul2">                    <li><img src="img/b2-0.png" class="nav-img-2">                        <a class="menu2"><div  class="empty-block"></div>子菜单<span class="hasmore">≡</span><br/><b class="smallfont">(123)</b></a>                        <ul class="ul3">                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                        </ul>                    </li>                    <li><img src="img/b2-0.png" class="nav-img-2">                        <a class="menu2"><div  class="empty-block"></div>子菜单<span class="hasmore">≡</span><br/><b class="smallfont">(123)</b></a>                        <ul class="ul3">                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                        </ul>                    </li>                    <li><img src="img/b2-0.png" class="nav-img-2">                        <a class="menu2"><div  class="empty-block"></div>子菜单<span class="hasmore">≡</span><br/><b class="smallfont">(123)</b></a>                        <ul class="ul3">                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                            <li><img src="img/b4-1.png" class="nav-img-3">                                <a class="menu3"><div  class="empty-block"></div>三级菜单<br/><b class="smallfont">(123)</b></a></li>                        </ul>                    </li>                </ul>            </li>        </ul>    </div></body></html>

test.css:

    /*    PC端 css ---------------------------------------------------------    */    * {        margin:0;padding:0;        -webkit-tap-highlight-color: rgba(0,0,0,0);    }    body {        font-size: 80%;        font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;    }    a{        text-decoration: none;        -ms-user-select: none;        -moz-user-select: none;        -webkit-user-select: none;        user-select: none;        font-size:1.1rem;    }    ul {        list-style: none;        margin:0;        padding:0;        overflow: auto;        -ms-user-select: none;        -moz-user-select: none;        -webkit-user-select: none;        user-select: none;    }    /*   小图标   ---------------------*/    .nav-img-1 {        display: inline;        border-style: none;        width:50px;height:50px;float:left;margin:5px 5px;    }    .nav-img-2 {        display: inline;        border-style: none;        width:50px;height:50px;float:left;        margin-top:5px;        margin-left:15px;    }    .nav-img-3 {        display: inline;        border-style: none;        width:50px;height:50px;float:left;margin-top:5px;        margin-left:20px;    }    li{        cursor: pointer;        width:100%;        background-color: #ffffff;        height:auto;        -ms-user-select: none;        -moz-user-select: none;        -webkit-user-select: none;        user-select: none;        border-bottom:1px solid #eeeeee;        color: #008533;    }    li>ul>li {        color:#008533;        background-color: #eeeeee;        border-bottom:1px solid #dddddd;    }    li>ul>li>ul>li {        background-color: #dddddd;        border-bottom:1px solid #cccccc;    }    .openmoreUp {        margin-top:12px;        margin-right:25px;        float:right;        width: 0;        height: 0;        border-left: 6px solid transparent;        border-right: 6px solid transparent;        border-top: 12px solid #000000;    }    .openmoreDown {        margin-top:12px;        margin-right:25px;        float:right;        width: 0;        height: 0;        border-left: 6px solid transparent;        border-right: 6px solid transparent;        border-bottom: 12px solid #ffffff;    }    .hasmore {        float:right;        margin-right:36px;        width: 20px;        font-size:20px;        margin-top:8px;    }    .menu1,.menu2,.menu3 {        display: block;        width:100%;        height:60px;        line-height: 20px;    }    .empty-block {        height:11px;    }    .smallfont {        font-size: 12px;        font-weight:300;        color: #5b5b5b;    }    .menu1 {    }    .menu2 {        padding-left:20px;    }    .menu3 {        padding-left:35px;    }    .menu1:hover{        background-color: #008533;        color:#ffffff;    }    .menu2:hover{        background-color: #00b876;        color:#ffffff;    }    .menu3:hover{        background-color: #aaaaaa;        color:#ffffff;    }    .ul2 {        display: none;        overflow: hidden;    }    .ul3 {        display: none;        overflow: hidden;    }    .ul3 li {        border-left:5px solid #dddddd;    }    .ul3 li:hover {        border-left:5px solid #005322;    }    /*    mobile端 css ---------------------------------------------------------    */    @media screen and (max-width: 1100px) {        * {            margin:0;padding:0;            -webkit-tap-highlight-color: rgba(0,0,0,0);        }        body {            font-size: 100%;            width:100%;            height:100%;            font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;        }        a{            text-decoration: none;            -ms-user-select: none;            -moz-user-select: none;            -webkit-user-select: none;            user-select: none;            font-size:4rem;        }        ul {            list-style: none;            margin:0;            padding:0;            overflow: auto;            -ms-user-select: none;            -moz-user-select: none;            -webkit-user-select: none;            user-select: none;        }        /*   小图标   ---------------------*/        .nav-img-1 {            display: inline;            border-style: none;            width:100px;height:100px;float:left;margin-top:10px;        }        .nav-img-2 {            display: inline;            border-style: none;            width:100px;height:100px;float:left;            margin-top:10px;            margin-left:15px;        }        .nav-img-3 {            display: inline;            border-style: none;            width:100px;height:100px;float:left;margin-top:10px;            margin-left:20px;        }        li{            cursor: pointer;            width:100%;            background-color: #ffffff;            height:auto;            -ms-user-select: none;            -moz-user-select: none;            -webkit-user-select: none;            user-select: none;            border-bottom:1px solid #eeeeee;            color: #008533;        }        li>ul>li {            color:#008533;            background-color: #eeeeee;            border-bottom:1px solid #dddddd;        }        li>ul>li>ul>li {            background-color: #dddddd;            border-bottom:1px solid #cccccc;        }        .openmoreUp {            margin-top:8px;            margin-right:25px;            float:right;            width: 0;            height: 0;            border-left: 15px solid transparent;            border-right: 15px solid transparent;            border-top: 30px solid #000000;        }        .openmoreDown {            margin-top:8px;            margin-right:25px;            float:right;            width: 0;            height: 0;            border-left: 15px solid transparent;            border-right: 15px solid transparent;            border-bottom: 30px solid #ffffff;        }        .hasmore {            float:right;            margin-right:36px;            width: 20px;            font-size:20px;            margin-top:8px;        }        .menu1,.menu2,.menu3 {            display: block;            width:100%;            height:120px;            line-height: 25px;        }        .empty-block {            height:37px;        }        .smallfont {            font-size: 1.1rem;            font-weight:300;            color: #5b5b5b;        }        .menu1 {        }        .menu2 {            padding-left:20px;        }        .menu3 {            padding-left:35px;        }        .menu1:hover{            background-color: #008533;            color:#ffffff;        }        .menu2:hover{            background-color: #00b876;            color:#ffffff;        }        .menu3:hover{            background-color: #aaaaaa;            color:#ffffff;        }        .ul2 {            display: none;            overflow: hidden;        }        .ul3 {            display: none;            overflow: hidden;        }        .ul3 li {            border-left:5px solid #dddddd;        }        .ul3 li:hover {            border-left:5px solid #005322;        }    }

test.js:

/** * Created by Administrator on 2016/9/6 0006. */$(function(){    $(".menu1").click(function(){        //切换上下箭头        if($(this).children("span").hasClass("openmoreUp")){            $(this).children(".openmoreUp").addClass("openmoreDown");            $(this).children(".openmoreUp").removeClass("openmoreUp");        }else if($(this).children("span").hasClass("openmoreDown")){            $(this).children(".openmoreDown").addClass("openmoreUp");            $(this).children(".openmoreDown").removeClass("openmoreDown");        }        if($(this).parent().siblings().children(".menu1").children("span").hasClass("openmoreDown")){            $(this).parent().siblings().children(".menu1").children("span").removeClass();            $(this).parent().siblings().children(".menu1").children("span").addClass("openmoreUp");        }        $(this).css("background","#008533");        $(this).css("color","#ffffff");        $(this).parent().siblings().children(".menu1").css("background","");        $(this).parent().siblings().children(".menu1").css("color","");        $(this).nextAll().slideToggle(300);        $(this).parent().siblings().children(".ul2").slideUp();        $(this).parent().siblings().children(".ul2").children().children(".ul3").slideUp();        $(this).parent().siblings().children(".ul2").children().children(".menu2").css("background","");    });    $(".menu2").click(function(){        $(this).css("background","#00b876");        $(this).parent().siblings().children(".menu2").css("background","");        $(this).nextAll().slideToggle(300);        $(this).parent().siblings().children(".ul3").slideUp();    });});

1 1