05-JQuery頁(yè)面導(dǎo)航

一、普通二級(jí)下拉菜單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>普通下拉菜單</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            #menu{ height: 35px; background-image: url(img/menubg.jpg);}
            #menu ul{ list-style-type: none;}
            #menu li{ height: 35px; line-height: 35px;}
            #menu a{ display: block; padding: 0px 30px; 
            text-decoration: none; font-size: 14px; font-weight: bold; color: black;}
            #menu>ul>li{float: left; position: relative;}
            #menu>ul>li>ul{ display: none; position: absolute; left: 0px; background-color:ghostwhite}
            #menu>ul>li>ul>li{ clear: both;}
            #content{ background-color: gainsboro; text-align: center; padding: 200px; 
            font-size:50px; font-weight: bold;}
            .lihover{background-color: gray; }
            .lihover a{color: white;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#menu>ul>li").mouseover(function(){
                    $(this).children("ul").stop().slideDown(300);
                })
                $("#menu>ul>li").mouseleave(function(){
                    $(this).children("ul").stop().slideUp(300);
                })
                $("#menu>ul>li>ul>li").mouseover(function(){
                    $(this).addClass("lihover");
                })
                $("#menu>ul>li>ul>li").mouseleave(function(){
                    $(this).removeClass("lihover");
                })              
            })

        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li>
                    <a href="javascript:void(0);">推薦分類(lèi)</a>
                    <ul>
                        <li><a href="javascript:void(0);">英雄聯(lián)盟</a></li>
                        <li><a href="javascript:void(0);">王者榮耀</a></li>
                        <li><a href="javascript:void(0);">絕地求生</a></li>
                        <li><a href="javascript:void(0);">二次元</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">游戲競(jìng)技</a>
                    <ul>
                        <li><a href="javascript:void(0);">英雄聯(lián)盟</a></li>
                        <li><a href="javascript:void(0);">絕地求生</a></li>
                        <li><a href="javascript:void(0);">刺激戰(zhàn)場(chǎng)</a></li>
                        <li><a href="javascript:void(0);">QQ飛車(chē)</a></li>
                        <li><a href="javascript:void(0);">怪物獵人</a></li>
                        <li><a href="javascript:void(0);">爐石傳說(shuō)</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">娛樂(lè)天地</a>
                    <ul>
                        <li><a href="javascript:void(0);">顏值</a></li>
                        <li><a href="javascript:void(0);">星娛</a></li>
                        <li><a href="javascript:void(0);">二次元</a></li>
                        <li><a href="javascript:void(0);">戶外</a></li>
                        <li><a href="javascript:void(0);">音樂(lè)電臺(tái)</a></li>
                    </ul>               
                </li>
                <li>
                    <a href="javascript:void(0);">科技教育</a>
                    <ul>
                        <li><a href="javascript:void(0);">魚(yú)教</a></li>
                        <li><a href="javascript:void(0);">數(shù)碼科技</a></li>
                        <li><a href="javascript:void(0);">軍事</a></li>
                        <li><a href="javascript:void(0);">財(cái)經(jīng)</a></li>
                    </ul>           
                </li>
                <li>
                    <a href="javascript:void(0);">語(yǔ)音直播</a>
                    <ul>
                        <li><a href="javascript:void(0);">FM233</a></li>
                        <li><a href="javascript:void(0);">音樂(lè)電臺(tái)</a></li>
                        <li><a href="javascript:void(0);">娛樂(lè)互動(dòng)</a></li>
                        <li><a href="javascript:void(0);">情感調(diào)頻</a></li>
                    </ul>               
                </li>
                <li><a href="javascript:void(0);">其他分類(lèi)</a></li>
            </ul>
        </div>
        <div id="content">
            我是網(wǎng)頁(yè)的主要內(nèi)容
        </div>
    </body>
</html>

二、無(wú)限級(jí)下拉菜單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>普通下拉菜單-三級(jí)菜單</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            /*一級(jí)*/
            #menu{ height: 35px; background-image: url(img/menubg.jpg);}
            #menu>ul{ width: 1000px;}
            #menu ul{ list-style-type: none;}
            #menu li{ height: 35px; line-height: 35px; position: relative;}
            #menu a{ display: block; padding: 0px 30px; text-decoration: none; 
            font-size: 14px; font-weight: bold; color: black;}
            #menu>ul>li{float: left; }
            /*二級(jí)*/
            #menu>ul>li>ul{ display: none; position: absolute; left: 0px; background-color:ghostwhite}
            #menu>ul>li>ul>li{ clear: both;}
            #content{ background-color: gainsboro; text-align: center; padding: 200px; 
            font-size:50px; font-weight: bold;}
            /*三級(jí)或更多級(jí)*/
            #menu>ul>li>ul>li ul{ position: absolute; top: 0px; width: 100%;
            background-color:ghostwhite; display: none;}
            #menu>ul>li>ul>li li{clear: both;}
            
            .lihover{background-color: gray; }
            .lihover a{color: white;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                //二級(jí)
                $("#menu>ul>li").mouseover(function(){
                    $(this).children("ul").stop().slideDown(300);
                })
                $("#menu>ul>li").mouseleave(function(){
                    $(this).children("ul").stop().slideUp(300);
                })
                //三級(jí)
                $("#menu>ul>li>ul li").mouseover(function(){
                    //判斷菜單應(yīng)該在左邊還是右邊顯示出來(lái)
//                  if($(this).offset().left + $(this).width() > $(window).width()-50)
//                      $(this).children("ul").css("left","-" + $(this).width() + "px");
//                  else
//                      $(this).children("ul").css("left",$(this).width() + "px");
                    
                    $(this).children("ul").css("left",$(this).width() + "px");
                    $(this).children("ul").stop().slideDown(300);
                })          
                $("#menu>ul>li>ul li").mouseleave(function(){
                    $(this).children("ul").stop().slideUp(300);
                })  
                //li高亮顯示效果
                $("#menu>ul>li>ul li").mouseover(function(){
                    $(this).addClass("lihover");
                })
                $("#menu>ul>li>ul li").mouseleave(function(){
                    $(this).removeClass("lihover");
                })              
            })

        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li>
                    <a href="javascript:void(0);">推薦分類(lèi)</a>
                    <ul>
                        <li><a href="javascript:void(0);">英雄聯(lián)盟</a></li>
                        <li><a href="javascript:void(0);">王者榮耀</a></li>
                        <li><a href="javascript:void(0);">絕地求生</a></li>
                        <li><a href="javascript:void(0);">二次元</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">游戲競(jìng)技</a>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">網(wǎng)游競(jìng)技</a>
                            <ul>
                                <li><a href="javascript:void(0);">英雄聯(lián)盟</a></li>
                                <li><a href="javascript:void(0);">堡壘之夜</a></li>
                                <li><a href="javascript:void(0);">DOTA2</a></li>
                                <li><a href="javascript:void(0);">穿越火線</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0);">單擊熱游</a>
                            <ul>
                                <li><a href="javascript:void(0);">絕地求生</a></li>     
                                <li><a href="javascript:void(0);">戰(zhàn)地風(fēng)云</a></li>
                                <li><a href="javascript:void(0);">NBA2k</a></li>
                                <li><a href="javascript:void(0);">全面戰(zhàn)爭(zhēng)</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0);">手游休閑</a>
                            <ul>
                                <li><a href="javascript:void(0);">刺激戰(zhàn)場(chǎng)</a></li>
                                <li><a href="javascript:void(0);">王者榮耀</a></li>
                                <li><a href="javascript:void(0);">QQ飛車(chē)</a></li>
                                <li><a href="javascript:void(0);">狼人殺</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">娛樂(lè)天地</a>
                    <ul>
                        <li><a href="javascript:void(0);">顏值</a></li>
                        <li><a href="javascript:void(0);">星娛</a></li>
                        <li><a href="javascript:void(0);">二次元</a></li>
                        <li><a href="javascript:void(0);">戶外</a></li>
                        <li><a href="javascript:void(0);">音樂(lè)電臺(tái)</a></li>
                    </ul>               
                </li>
                <li>
                    <a href="javascript:void(0);">科技教育</a>
                    <ul>
                        <li><a href="javascript:void(0);">魚(yú)教</a></li>
                        <li><a href="javascript:void(0);">數(shù)碼科技</a></li>
                        <li><a href="javascript:void(0);">軍事</a></li>
                        <li><a href="javascript:void(0);">財(cái)經(jīng)</a></li>
                    </ul>           
                </li>
                <li>
                    <a href="javascript:void(0);">語(yǔ)音直播</a>
                    <ul>
                        <li><a href="javascript:void(0);">FM233</a></li>
                        <li><a href="javascript:void(0);">音樂(lè)電臺(tái)</a></li>
                        <li><a href="javascript:void(0);">娛樂(lè)互動(dòng)</a></li>
                        <li><a href="javascript:void(0);">情感調(diào)頻</a></li>
                    </ul>               
                </li>
                <li><a href="javascript:void(0);">其他分類(lèi)</a></li>
            </ul>
        </div>
        <div id="content">
            我是網(wǎng)頁(yè)的主要內(nèi)容
        </div>
    </body>
</html>

三、水平伸縮菜單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>水平伸縮菜單</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px; font-size: 12px;}
            #menu ul{ list-style-type: none;}
            #menu{margin-left:8px;width: 150px;}
            #menu li{width: 52px; clear: both; height: 52px; line-height: 52px; 
            margin-top: 20px; float: right; overflow: hidden;}
            #menu li,#menu img{ vertical-align: middle;}
            #menu a{ color: coral; font-weight: bold; text-decoration: none; font-size: 22px;}
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#menu>ul>li").mouseover(function(){
                    $(this).stop().animate({"width":"150px"},200);
                })
                $("#menu>ul>li").mouseleave(function(){
                    $(this).stop().animate({"width":"52px"},200);
                })              
            })

        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li><a href="#"><img src="img/home.png" alt="" width="50" height="50" border="0"/> Home</a></li>
                <li><a href="#"><img src="img/about.png" alt="" width="50" height="50" border="0"/> About</a></li>
                <li><a href="#"><img src="img/contact.png" alt="" width="50" height="50" border="0"/> Contact</a></li>              
            </ul>
        </div>
    </body>
</html>

四、TreeView菜單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>TreeView菜單</title>
        <style type="text/css">
            *{margin: 0px; padding: 0px; font-size: 12px;}
            #menu{margin-left: 26px;}
            #menu ul{ list-style-type: none; clear: both;}
            #menu ul a{ text-decoration: none; color: black;}
            #menu li{line-height: 26px; clear: both; cursor:pointer}
            #menu ul>li ul{display:none; margin: 0px; padding: 0px;}
            .mypage{ background: url(img/page.png) no-repeat left 8px; padding-left: 16px;}
            .myplus{ background: url(img/plus.png) no-repeat left 8px; padding-left: 16px;}
            .myminus{ background: url(img/minus.png) no-repeat left 8px; padding-left: 16px;}           
        </style>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript">
            $(function(){
                var $plusMenu = $("#menu>ul li:has(ul)");
                $plusMenu.removeClass("mypage").removeClass("myminus").addClass("myplus");
                var $pageMenu = $("#menu>ul li:not(:has(ul))");
                $pageMenu.removeClass("myminus").removeClass("myplus").addClass("mypage");
                
                $plusMenu.click(function(){
                    //$(this).attr("target","_blank");
                    //先打開(kāi)鏈接地址
                    //本窗口打開(kāi)
                    //window.location.href = $(this).children("a").attr("href");
                    //新窗口打開(kāi)
                    //window.open($(this).children("a").attr("href"));
                    if($(this).hasClass("myplus"))
                    {
                        $(this).removeClass("mypage").removeClass("myplus").addClass("myminus");
                        $(this).children("ul").slideDown(100);
                    }
                    else
                    {
                        $(this).removeClass("mypage").removeClass("myminus").addClass("myplus");
                        $(this).children("ul").slideUp(100);
                    }
                    return false;
                })
                $pageMenu.click(function(){
                    //$(this).attr("target","_blank");
                    //先打開(kāi)鏈接地址
                    //本窗口打開(kāi)
                    //window.location.href = $(this).children("a").attr("href");
                    //新窗口打開(kāi)
                    //window.open($(this).children("a").attr("href"));
                    return false;
                })              
                

            })

        </script>
    </head>
    <body>
      <div id="menu">
          <ul class="first" id="nav">
             <li><a >首頁(yè)</a></li>
             <li><a >文化</a>
                 <ul>
                    <li><a >企業(yè)文化</a></li>
                    <li><a >企業(yè)精神</a></li>
                    <li><a >經(jīng)營(yíng)理念</a></li>
                 </ul>
             </li>
             <li><a >新聞</a>
                   <ul>
                    <li><a >公司新聞</a></li>
                    <li><a >產(chǎn)品發(fā)布新聞</a></li>
                 </ul>
             </li>
             <li><a >招聘</a>
                <ul>
                    <li><a >企業(yè)招聘</a></li>
                    <li><a href="#">個(gè)人求職</a>
                      <ul>
                           <li><a href="#">java工程師</a></li>
                            <li><a href="#">.net工程師</a></li>
                        </ul>
                    </li>
                   <li><a >聯(lián)系我們</a></li>
                   <li><a >51job</a></li>
                 </ul>
             </li>
          </ul>
      </div>
        
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容