1. 程式人生 > >Jquery實現三級選單的製作

Jquery實現三級選單的製作

HTML程式碼:

<body>
<div class="navMenu">
    <ul>
        <li><a href="#">首頁</a>
            <ul>
                <li><a href="#">JavaScript+</a>
                    <ul>
                        <li><a href="#">三角函式</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">語文</a>
                    <ul>
                        <li><a href="#">唐詩</a></li>
                        <li><a href="#">宋詞</a></li>
                    </ul>
                </li>
                <li><a href="#">英語</a></li>
            </ul>
        </li>
        <li><a href="#">課程大廳</a></li>
        <li><a href="#">學習中心+</a>
            <ul>
                <li><a href="#">JavaScript+</a>
                    <ul>
                        <li><a href="#">三角函式</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">語文</a>
                    <ul>
                        <li><a href="#">三角函式</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
                </li>
                <li><a href="#">英語</a></li>
            </ul>
        </li>
        <li><a href="#">幫助</a></li>
    </ul>
</div>
</body>

js程式碼:
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("li").has("ul").mouseenter(function(){
            $(this).children("ul").css("display","block");
            $(this).css("backgroundColor","#0066FF");
        }).mouseleave(function () {
            $(this).children("ul").css("display","none");
            $(this).css("backgroundColor","#eee");
        })
    })
</script>

css程式碼:
  *{
            padding:0;
            margin:0;
        }
        /*一級選單*/
        .navMenu {
            width:570px;
            margin:0 auto;
        }
        .navMenu ul li{
            float: left;
            position: relative;
        }
        li{
            list-style: none;
            background-color: #eee;
            width: 140px;
            height: 40px;
            text-align: center;
            margin-right: 2px;
            margin-bottom: 2px;
        }
        ul li a{
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            color: #000;
            text-decoration: none;
            display: block;
            padding:0 10px;
        }
        /*二級選單*/
        .navMenu ul li ul {
            display: none;
            position:absolute;
            left: 0;
            top:0;
            margin-top:42px;
        }
        .navMenu ul li ul li{
            float:none;
        }
        /*三級選單*/
        .navMenu ul li ul li ul{
            display: none;
            left:140px;
            top:-42px;
        }