五中經常使用簡潔後臺導航菜單（一級導航，二級導航，手風琴式導航，左或右懸浮式導航，樹狀導航）

時間  2019-11-29
標籤 五中 經常 使用 簡潔 後臺 導航 菜單 一級 二級 手風琴 懸浮 樹狀 简体版
原文   原文鏈接

首先附上源碼，能夠下載！javascript

http://yunpan.cn/cd9ivPcL4ayQT （提取碼：d8a5）css

在創建導航菜單的時候，咱們首先佈局一個(" 頭"+【左，右（自適應）】+」尾「）的HTML頁面；html

來看一下HTML頁面的編寫：java

<div id="container">
        <div id="head"></div>
        <div id="mainContent">
            <div id="sidebar"></div>
            <div id="content"></div>
        </div>
        <div id="footer"></div>
    </div>

這個是代碼佈局的樣式具體請看所有HTML：node

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>五種經常使用的導航菜單</title>
<!-- 
    @頭部：一級導航菜單
    @尾部：二級導航菜單
    @左側：樹狀導航菜單
    @右側靠左：懸浮式導航菜單
    @右側靠右：手風琴式導航菜單
    @autor：EthanCoco
    @date：2015-08-18
    @email：lijianlin0204@163.com
 -->

</head>
<body>
    <div id="container"> <!--這是一個整個頁面包含的祖先級div -->
        <div id="header">this is a header use to put level one navigation menu</div><!--這個是頭部的一個div，若是把中間的左右當作一塊的話，就有三層這是第一層-->
        <div id="mainContent"><!--這是第二層，第二層又包含左右兩個子div-->
            <div id="sidebar">this is a side bar use to put multileve tree navigation menu</div><!--這是左側div-->
            <div id="content">this ia a content :the content left suspension(rig  or left ) navigation,right accordion style navigation menu</div><!--這是右側div-->
        </div>
        <div id="footer">this is a footer use to put level two navigation menu</div><!--這是第三層-->
    </div>
</body>
</html>

 下面咱們來看看怎麼把它佈局成(" 頭"+【左，右（自適應）】+」尾「）的形式，問咱們經過css樣式來控制,創建css樣式文件ethanNavMenu.css，把它引入到HTML中jquery

來看一下CSS佈局樣式：web

body{font-family:Verdana;font-size:12px;margin:0;}
/*這個就沒有什麼好解釋的了*/
#container{margin:0 auto;width:100%;}
#header{height:40px;background:#9c6;margin-bottom:5px; text-align:center;}
#mainContent{height:600px;margin-bottom:5px;}
#sidebar{float:left;height:600px;width:300px;background:#c9f;}
#content{margin-left:305px !important; margin-left:302px;height:600px;background:LavenderBlush; }
#footer{height:200px;background:#9c6;}

 

看一下頁面圖片：數組

好了，整個頁面佈局就弄好了，而後咱們來寫導航；微信

 

下面代碼中myalert()是原生自定義彈出框，turnUrl()是自定義跳轉函數，代碼稍後附出cookie

（一）首先，咱們來看」一級導航「的實現：

第一步：咱們在HTML的id="header"的div中添加以下代碼：

下面代碼中myalert()是原生自定義彈出框，代碼稍後附出。

　　　　　<div id="nav">
            <div id="navBar">
                <div class="one"></div>
                <div class="two"></div>
            </div>
            <ul>
                <li><a href="http://www.cnblogs.com/jianyeLee/">個人博客</a></li>
                <li><a href="javascript:myalert('個人微信dyznzyl')">個人微信</a></li>
                <li><a href="javascript:myalert('個人QQ2319048747')">個人QQ</a></li>
                <li><a href="javascript:myalert('個人郵箱lijianlin0204@163')">個人郵箱</a></li>
                <li><a href="javascript:myalert('個人郵箱lijianlin0204@163')">聯繫做者</a></li>
            </ul>
 　　　　</div>

 

第二步：如今來寫css：首先在#header{}中再增長這幾行代碼，主要是設置背景顏色的樣式，不加也無所謂：

    background: -webkit-linear-gradient(top, #9c6 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, #9c6 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, #9c6 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, #9c6 0%, #2c2d33 100%);
    background: linear-gradient(top, #9c6 0%, #2c2d33 100%); 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

 

而後設置添加在HTML中一級導航的css樣式：

#nav{width:960px;height:40px;line-height: 35px;position: relative;text-align:left;margin-left:320px; }
#navBar{position: absolute;top: 37px;}
.one{height: 2px;background: #fff;overflow:hidden}
.two{height: 1px;background: #aaa;overflow:hidden}
#header ul li{float:left;list-style: none}
#header ul li a{padding: 12px 15px;text-align: center;color: #fff;font-size: 14px; font-weight: bold;font-family: '宋體'; text-decoration: none}

 

看一下網頁顯示圖片：

第三步：js編寫

這樣就差很少好了，但是這樣沒有一級菜單的的感受啊！乾巴巴的，不就是UL LI作成的普通連接樣的麼，別急咱們經過js來控制，編寫ethanNavMenu.js文件

同時引入到HTML頁面中去，咱們用jQuery的方式編寫，咱們還有引入jquery.js(能夠到jQuery官網下載)：<script type="text/javascript" src="../js/jquery.js"></script>

和<script type="text/javascript" src="ethanNavMenu.js"></script>

看js代碼：

/*
**@EthanCoco原創導航菜單js
**@autor:EthanCoco
**@date:2015-08-18
**@email:lijianlin0204@163.com
*/
;$(function(){//別忘了最好在前面加個分號
    /**********************開始一級菜單****************************/
    //use strict添加嚴格模式
    'use strict';
    
    var tagNav = document.getElementById('nav');
    var tagBar = document.getElementById('navBar');
    
    //getElementsByTagName 返回的是一個數組, 【0】 表示取返回數組裏面的第一個元素
    var tagLi =tagNav.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var speed= 0;
    var timer, i , n, changeWidth;
    
    //offsetWidth = width + padding + border,
    //tagLi在上面是返回一個數組，tagLi[0]就是去第一個元素，並設置他的寬度
    //tagBar.style.width至關於：（document.getElementById('navBar').style.width；）得到整數值
    tagBar.style.width = tagLi[0].offsetWidth + 'px';
    
    function sports(n, m) {
        timer = setInterval(function () {
            speed = (n - tagBar.offsetLeft) / 10;
            
            
            //Math.ceil()執行向上舍入，即它老是將數值向上舍入爲最接近的整數；
            //Math.floor()執行向下舍入，即它老是將數值向下舍入爲最接近的整數；
            //Math.round()執行標準舍入，即它老是將數值四捨五入爲最接近的整數(這也是咱們在數學課上學到的舍入規則)。
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (tagBar.offsetLeft === n) {
                clearInterval(timer);
            } else {
                //offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
                tagBar.style.left = tagBar.offsetLeft + speed + 'px';
                
            }

            changeWidth = m - tagBar.offsetWidth;
            changeWidth = changeWidth > 0 ? Math.ceil(speed) : Math.floor(speed);
            tagBar.style.width = m + changeWidth  + 'px';
            
        }, 20);
    }

    for (i = 0; i < tagLi.length; i += 1) {
        tagLi[i].onmouseover = function () {
            clearInterval(timer);
            sports(this.offsetLeft, this.offsetWidth);
        };
        tagLi[i].onmouseout = function () {
            clearInterval(timer);
            sports(0, tagLi[0].offsetWidth);
        };
    }    
    /**********************結束一級菜單****************************/
});

 

好了，而後咱們來看看網頁頁面又是怎麼樣的呢？

看到多了個下標跟隨鼠標的移動而移動，哎喲，這樣看起來就像導航菜單了。

好了一級菜單就到此結束了。下面來看看手風琴式菜單  （引用jQueryUI和jQueryUICSS輔助）

（二）、手風琴式菜單  （引用jQueryUI和jQueryUICSS輔助）

第一步：在HTML中的id="content"的div中添加以下代碼：

　　　　　　　　　　<div id="accordion">
                    <h1>jQuery插件</h1>
                        <div class="plugin">
                            <button  onclick="javascript:turnUrl('4731439.html')">圖片漸入漸出</button>
                            <button  onclick="javascript:turnUrl('4727434.html')">jQuery插件(一)</button>
                            <button onclick="javascript:turnUrl('4728564.html')">jQuery插件(二)</button>
                            <button onclick="javascript:turnUrl('4733514.html')">提示彈出框</button>
                        </div>
                    <h1>DIV+CSS</h1>
                        <div class="plugin">
                            <button onclick="javascript:turnUrl('4712396.html')">細節詳解</button>
                            <button onclick="javascript:turnUrl('4709583.html')">經常使用語句</button>
                        </div>
                    <h1>博客郵箱</h1>
                        <div class="plugin">
                            <button onclick="javascript:turnUrl()">博客</button>
                            <button onclick="javascript:myalert('個人郵箱lijianlin0204@163.com,若有什麼問題，發郵件給我！')">郵箱</button>
                        </div>
                </div>

 

第二步：咱們須要引入jQueryUI和jQueryUICSS來輔助，這是裏面自帶的一種，把它放在HTML中：

<link rel="stylesheet" type="text/css" href="../css/jquery-ui.css"> 

<script type="text/javascript" src="../js/jquery.ui.js"></script>

在css中#content下添加以下樣式：

/* <!-- 開始 手風琴式菜單css  引用jQueryUI和jQueryUICSS輔助 --> */
#accordion{width:300px;}
#accordion .plugin{background :LightCyan; color : DarkMagenta; height:140px;}
#accordion .plugin button{width:150px;}
/* <!-- 開始 手風琴式菜單css  引用jQueryUI和jQueryUICSS輔助 --> */

 

第三步：編寫js，在結束一級菜單後面添加便可：

    /**********************開始手風琴式菜單****************************/
    $('#accordion').accordion({//accordion這個函數，就是jQueryUI提供的，跟validate，cookie，datepicker等同樣的，只要引用就能夠，這樣$('#id').accordion();
        collapsible : false,
        icons : {    //改變下來的樣式頭標
            "header" : "ui-icon-plus",
            "activeHeader" : "ui-icon-minus",
        },
        activate : function(event,ui){
            $('#accordion').css('background','yellow');
        },
    }).css('float','right');
    $('#accordion .plugin button').button(); //經過jQueryUICSS設置button按鈕的樣式
    /**********************結束手風琴式菜單****************************/

 

在頁面看看圖的樣式：

 

 

（三）、左或右懸浮式菜單

第一步：在繼手風琴下面加入此代碼，也一樣是在id="content"下的div模塊中，以左側爲例：

<!-- 開始 左側懸浮菜單 -->
        <div id="side_left_menu">
          <ul class="side_list">
            <li>
              <div class="side_text">
                <h2><a href="javascript:turnUrl()" >個人博客</a></h2>
              </div>
            </li>
            <li>
              <div class="side_text">
                <h2><a href="javascript:myalert('有什麼問題，郵箱給我lijianlin0204@163.com')" >個人郵箱</a></h2>
              </div>
            </li>
            <li>
              <div class="side_text">
                <h2><a href="javascript:myalert('個人微信dyznzyl')" >個人微信</a></h2>
              </div>
            </li>
            <li>
              <div class="side_text">
                <h2><a href="javascript:myalert('個人QQ2319048747')" >個人QQ</a></h2>
              </div>
            </li>
            <li>
              <div class="side_text">
                <h2><a href="javascript:myalert('個人微信dyznzyl')" >微信優先</a></h2>
              </div>
            </li>
          </ul>
        </div>
        <!-- 結束 左側懸浮菜單 -->

 

第二步：加入css樣式

/* <!-- 開始 左側懸浮菜單 --> */
 #side_left_menu{width:250px; height:600px;
    position:absolute;
    z-index: 10;
    margin-left:305px;
    top:60px;
 }
 #side_left_menu .side_list{width:100%;height:auto; }
 #side_left_menu .side_list li{
     float:left;
     width:200px; 
     margin:0 auto;
     height:40px;
     margin-bottom:10px;
     box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
     -webkit-transition:0.3s all ease;
     -moz-transition:0.3s all ease;
     -ms-transition:0.3s all ease;
     -o-transition:0.3s all ease;
     transition:0.3s all ease;
     overflow:hidden;
     position:relative;
     border-right:5px solid orange;
     list-style-type : none;
    }
#side_left_menu .side_list li:hover{
    background:Magenta;
    background: -webkit-linear-gradient(top, Magenta 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, Magenta 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, Magenta 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, Magenta 0%, #2c2d33 100%);
    background: linear-gradient(top, Magenta 0%, #2c2d33 100%); 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4);
    border-right:5px solid #fff;
}
#side_left_menu .side_text h2,#side_left_menu .side_text a{
    font-family:"Microsoft YaHei";
    color:GhostWhite;
    text-shadow:1px 2px 4px #999;
    font-size:20px;
    font-weight:normal;
    -webkit-transition:0.3s all ease;
    -moz-transition:0.3s all ease;
    -ms-transition:0.3s all ease;
    -o-transition:0.3s all ease;
    line-height: 45px; 
    padding: 0px;
    margin: 0px; 
    text-align: left; 
    float: left;
    text-decoration:none;
}
 #side_left_menu .side_text h3{
     font-family:Verdana;
     font-size:14px;color:#666;
     font-weight:normal;-webkit-transition:0.3s all ease;
     -moz-transition:0.3s all ease;-ms-transition:0.3s all ease;
     -o-transition:0.3s all ease;
}
#side_left_menu .side_list li:hover h2, #side_left_menu .side_list li:hover  a{
    color:LightPink;
    font-size:28px;
    text-shadow:1px 2px 4px #333;
    text-decoration:underline;
}
#side_left_menu .side_list li:hover .side_text h3{color:#F60;font-size:18px;}
#side_left_menu .side_list li:hover .icon{color:#F90;font-size:50px;}
#side_left_menu .side_list li:hover .side_text{
     -webkit-animation-name:shake;-moz-animation-name:shake;
}
 #side_left_menu .side_text{
     width:180px;height:auto;
     float:right;height:50px;-webkit-animation:.5s .2s ease both;
     -moz-animation:1s .2s ease both;
}
/* <!-- 結束 左側懸浮菜單 --> */

 

此爲純css+div製做

看網頁顯示：

 

（四）、二級菜單   純div+css

在HTML的id=footer中的div中添加以下代碼：

　　　　<ul class="menu">
          <li><a href="javascript:turnUrl()">博客首頁</a></li>
          <li><a href="javascript:myalert('個人微信dyznzyl')">Jquery插件</a>
                <ul>
                  <li><a href="javascript:turnUrl('4731439.html')" class="documents">圖片漸入漸出</a></li>
                  <li><a href="javascript:turnUrl('4727434.html')" class="messages">jQuery插件（一）</a></li>
                  <li><a href="javascript:turnUrl('4728564.html')" class="signout">jQuery插件（二）</a></li>
                  <li><a href="javascript:turnUrl('4733514.html')" class="signout">提示彈出框</a></li>
                </ul>
            </li>
          <li><a href="javascript:myalert('個人郵箱lijianlin0204@163.com')">DIV+CSS</a>
                <ul>
                  <li><a href="javascript:turnUrl('4712396.html')" class="documents">細節詳解</a></li>
                  <li><a href="javascript:turnUrl('4709583.html')" class="messages">經常使用語句</a></li>
                  <li><a href="javascript:myalert('個人郵箱lijianlin0204@163.com')" class="signout">個人郵箱</a></li>
                </ul>
            </li>
            <li><a href="javascript:myalert('個人QQ2319048747')">個人聯繫</a>
                <ul>
                  <li><a href="javascript:myalert('個人郵箱lijianlin0204@163.com')" class="documents">個人郵箱</a></li>
                  <li><a href="javascript:myalert('個人QQ2319048747')" class="messages">個人QQ</a></li>
                  <li><a href="javascript:myalert('個人微信dyznzyl')" class="signout">個人微信</a></li>
                </ul>
            </li>
          <li><a href="javascript:myalert('個人微信dyznzyl')">微信優先</a></li>
        </ul>

 

第二步：編寫css：

#footer .menu{margin-left : 350px;height: 40px;width: 505px;background: #DDA0DD;
    background: -webkit-linear-gradient(top, #DDA0DD 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, #DDA0DD 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, #DDA0DD 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, #DDA0DD 0%, #2c2d33 100%);
    background: linear-gradient(top, #DDA0DD 0%, #2c2d33 100%); 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#footer .menu li{position: relative;list-style: none;float: left;display: block;height: 40px;}
#footer .menu li a{
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(23,33,19,45);
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out;
}
#footer .menu li:first-child a {
    border-left: none; 
}
#footer .menu li:last-child a {
     border-right: none;
}
#footer .menu li:hover > a {
    color: #8fde62;
}
/* Sub Menu */

#footer .menu ul {
    position: absolute;
    top: 40px;
    left: 0;
    opacity: 0;
    background: #F0FFFF;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
#footer .menu li:hover > ul {
     opacity: 1; 
}
#footer .menu ul li {
    height: 10px;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
#footer .menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}
#footer .menu ul li a {
    width: 140px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #353539; 
}
#footer .menu ul li:last-child a {
    border: none;
}
/* Icons */
#footer .menu a.documents {
    background: url(images/docs.png) no-repeat 6px center;
}
#footer .menu a.messages {
    background: url(images/bubble.png) no-repeat 6px center;
}
#footer .menu a.signout {
    background: url(images/arrow.png) no-repeat 6px center;
}

 

看網頁頁面顯示：

（五）、樹狀菜單

第一步、在ＨＴＭＬ中的div id="sidebar"下面添加以下代碼，併爲div id="sidebar"  添加一個class="menuTree"：

<ul>
                <li class="par_tree"><a href="javascript:void(0)">個人聯繫</a>
                    <ul>
                        <li class="par_tree"><a href="#">個人微信</a>
                            <ul><li class="son_tree" ><a href="javascript:myalert('加個微信作個朋友！')">dyznzyl</a></li></ul>
                        </li>
                        <li class="par_tree"><a href="#">個人郵箱</a>
                            <ul><li class="son_tree"><a href="javascript:myalert('有關問題請發我郵箱！')">lijianlin0204@163.com</a></li></ul>
                        </li>
                        <li class="par_tree"><a href="#">個人QQ</a>
                            <ul><li class="son_tree"><a href="javascript:myalert('加QQ不如加微信吧！')">2319048747</a></li></ul>
                        </li>
                    </ul>
                </li>
                <li class="par_tree"><a href="javascript:void(0)">個人博客</a>
                    <ul>
                        <li class="par_tree"><a href="javascript:void(0)">HTML學習</a>
                        <ul>
                            <li class="par_tree"><a class="par_tree" href="javascript:void(0)">jQuery插件</a>
                                <ul>
                                    <li class="son_tree"><a href="javascript:turnUrl('4727434.html')">jQuery插件（一）</a></li>
                                    <li class="son_tree"><a href="javascript:turnUrl('4728564.html')">jQuery插件（二）</a></li>
                                    <li class="son_tree"><a href="javascript:turnUrl('4731439.html')">圖片漸入漸出</a></li>
                                    <li class="son_tree"><a href="javascript:turnUrl('4733514.html')">提示彈出框</a></li>
                                </ul>
                            </li>
                            <li class="par_tree"><a href="javascript:void(0)">DIV+CSS</a>
                                <ul>
                                    <li class="son_tree"><a href="javascript:turnUrl('4712396.html')">細節詳解</a></li>
                                    <li class="son_tree"><a href="javascript:turnUrl('4709583.html')">經常使用語句</a></li>
                                </ul>
                            </li>
                            <li class="son_tree"><a href="javascript:turnUrl()">博客地址</a></li>
                        </ul>
                        </li>
                    </ul>
                </li>
            </ul>

 

第二步、編寫css，在#sidebar下面添加

.menuTree a{outline: none;}
.menuTree{width:300px;border:solid 1px black;}
.menuTree ul{font-size:100%;padding:5px;margin:0px;}
.menuTree ul li {list-style:none;padding-left:20px;line-height: 20px;white-space: nowrap;}
.menuTree ul li.par_tree a{color:#F4008F;text-decoration:none;padding:0px 2px;}
.menuTree ul li.par_tree a:hover{font-weight:blod;font-size:110%;}
.menuTree ul li.son_tree a{color:#FB7F2D;text-decoration:none;padding:0px 2px;}
.menuTree ul li.son_tree a:hover{font-weight:blod;font-size:110%;}
.menuTree ul li.par_tree{background: url(images/collapsed_image.gif) left top no-repeat;}
.menuTree ul li.expanded{background: url(images/expended_image.gif) left top no-repeat;}

 

第三步，咱們單獨用一個tree.js文件來寫他的js，

引入<script type="text/javascript" src="tree.js"></script>到HTML。

if (jQuery) (function($) {

    $.extend($.fn, {
        menuTree: function(o, callback) {
            // Default parameters
            if (!o) var o = {};
            o.data = this.html();
            if (o.menuEvent == undefined) o.menuEvent = 'click';
            if (o.expandSpeed == undefined) o.expandSpeed = 500;
            if (o.collapseSpeed == undefined) o.collapseSpeed = 500;
            if (o.expandEasing == undefined) o.expandEasing = null;
            if (o.collapseEasing == undefined) o.collapseEasing = null;
            if (o.multiOpenedSubMenu == undefined) o.multiOpenedSubMenu = false;
            if (o.parentMenuTriggerCallback == undefined) o.parentMenuTriggerCallback = false;
            if (o.expandedNode == undefined) o.expandedNode = null;

            $(this).each(function() {

                function bindTree(t) {

                    var liClickedSelector = callback != undefined ? 'LI > A' : 'LI.par_tree > A';
                    
                    $(t).find(liClickedSelector).bind(o.menuEvent, function() {
                        currentItem = $(this);
                        if ($(this).parent().hasClass('par_tree')) {
                            if ($(this).parent().hasClass('expanded')) {
                                // Collapse
                                $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                                $(this).parent().removeClass('expanded').addClass('collapsed');

                            } else {
                                // Expand
                                if (!o.multiOpenedSubMenu) {
                                    $(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                                    $(this).parent().parent().find('LI.par_tree').removeClass('expanded').addClass('collapsed');
                                }
                                $($(this).parent().find("UL")[0]).slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
                                $(this).parent().removeClass('collapsed').addClass('expanded');
                                $(this).parent().find('LI.par_tree').removeClass('expanded').addClass('collapsed');

                                if (o.parentMenuTriggerCallback)
                                    callback($(this).attr('rel'));
                            }

                        } else {
                            callback($(this).attr('rel'));
                        }
                        return false;
                    });

                    // Prevent A from triggering the # on non-click events
                    if (o.menuEvent.toLowerCase != 'click') $(t).find(liClickedSelector).bind('click', function() { return false; });
                }

                // initialization
                $($(this)).find(":first").show();
                bindTree($(this));

                // Expend default node
                if (o.expandedNode) {

                    var elementToExpend = $($(this)).find("a[rel=" + o.expandedNode + "]").parent().parent();

                    // Collect all UL items that need to be extended
                    var ulMenuElements = new Array();
                    var i = 0;
                    while (elementToExpend && elementToExpend.find('DIV').length == 0) {

                        if (elementToExpend[0].tagName == "UL") {
                            ulMenuElements[i] = elementToExpend;
                            i++;
                        }
                        elementToExpend = elementToExpend.parent();
                    }
                    ulMenuElements = ulMenuElements.reverse()

                    // Extend all collected item (recursive)
                    var i = 0;
                    var openMenu = function() {

                        i++; // skip first ul(root)
                        if (i >= ulMenuElements.length) return;

                        ulMenuElements[i].removeClass('collapsed').addClass('expanded');
                        ulMenuElements[i].slideDown({ duration: o.expandSpeed, easing: o.expandEasing, complete: openMenu });

                    }
                    openMenu(ulMenuElements);
                }
            });
        }
    });

})(jQuery);

 

第四步、在HTML中調用它：

  <script type="text/javascript">
        $(function() {
            $('#sidebar').menuTree();
            });
    </script>

 

看一下圖片：

 

最後附上整個源碼：

ＨＴＭＬ部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幾種種經常使用的導航菜單</title>
<!-- 
    @頭部：一級導航菜單
    @尾部：二級導航菜單
    @左側：樹狀導航菜單
    @右側靠左：懸浮式導航菜單
    @右側靠右：手風琴式導航菜單
    @autor：EthanCoco
    @date：2015-08-18
    @email：lijianlin0204@163.com
 -->
<link href="navMenu.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.css"> 
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.theme.css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.ui.js"></script>
<script type="text/javascript" src="navMenu.js"></script>
<script type="text/javascript" src="tree.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#sidebar').menuTree();
            });
    </script>
</head>
<body>
<div id="container">
    <!-- 開始 一級菜單-->
    <div id="header">
        <div id="nav">
            <div id="navBar">
                <div class="one"></div>
                <div class="two"></div>
            </div>
            <ul>
                <li><a href="http://www.cnblogs.com/jianyeLee/">個人博客</a></li>
                <li><a href="javascript:myalert('個人微信dyznzyl')">個人微信</a></li>
                <li><a href="javascript:myalert('個人QQ2319048747')">個人QQ</a></li>
                <li><a href="javascript:myalert('個人郵箱lijianlin0204@163')">個人郵箱</a></li>
                <li><a href="javascript:myalert('個人郵箱lijianlin0204@163')">聯繫做者</a></li>
            </ul>
        </div>
    </div>
    <!-- 結束 一級菜單-->
    <div id="mainContent">
        <div id="sidebar" class="menuTree">
            <ul>
                <li class="par_tree"><a href="javascript:void(0)">個人聯繫</a>
                    <ul>
                        <li class="par_tree"><a href="#">個人微信</a>
                            <ul><li class="son_tree" ><a href="javascript:myalert('加個微信作個朋友！')">dyznzyl</a></li></ul>
                        </li>
                        <li class="par_tree"><a href="#">個人郵箱</a>
                            <ul><li class="son_tree"><a href="javascript:myalert('有關問題請發我郵箱！')">lijianlin0204@163.com</a></li></ul>
                        </li>
                        <li class="par_tree"><a href="#">個人QQ</a>
                            <ul><li class="son_tree"><a href="javascript:myalert('加QQ不如加微信吧！')">2319048747</a></li></ul>
                        </li>
                    </ul>
                </li>
                <li class="par_tree"><a href="javascript:void(0)">個人博客</a>
                    <ul>
                        <li class="par_tree"><a href="javascript:void(0)">HTML學習</a>
                        <ul>
                            <li class="par_tree"><a class="par_tree" href="javascript:void(0)">jQuery插件</a>
                                <ul>
                                    <li class="son_tree"><a href="javascript:turnUrl('4727434.html')">jQuery插件（一）</a></li>
                                    <li class="son_tree"><a href="javascript:turnUrl('4728564.html')">jQuery插件（二）</a></li>
                                    <li class="son_tree"><a href="javascript:turnUrl('4731439.html')">圖片漸入漸出</a></li>
                                    <li class="son_tree"><a href="javascript:turnUrl('4733514.html')">提示彈出框</a></li>
                                </ul>
                            </li>
                            <li class="par_tree"><a href="javascript:void(0)">DIV+CSS</a>
                                <ul>
                                    <li class="son_tree"><a href="javascript:turnUrl('4712396.html')">細節詳解</a></li>
                                    <li class="son_tree"><a href="javascript:turnUrl('4709583.html')">經常使用語句</a></li>
                                </ul>
                            </li>
                            <li class="son_tree"><a href="javascript:turnUrl()">博客地址</a></li>
                        </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        
        
        </div>
            
        
        
        <!-- 開始 手風琴式菜單  引用jQueryUI和jQueryUICSS輔助 -->
        <div id="content">
            <div id="accordion">
            <h1>jQuery插件</h1>
                <div class="plugin">
                    <button  onclick="javascript:turnUrl('4731439.html')">圖片漸入漸出</button>
                    <button  onclick="javascript:turnUrl('4727434.html')">jQuery插件(一)</button>
                    <button onclick="javascript:turnUrl('4728564.html')">jQuery插件(二)</button>
                    <button onclick="javascript:turnUrl('4733514.html')">提示彈出框</button>
                </div>
            <h1>DIV+CSS</h1>
                <div class="plugin">
                    <button onclick="javascript:turnUrl('4712396.html')">細節詳解</button>
                    <button onclick="javascript:turnUrl('4709583.html')">經常使用語句</button>
                </div>
            <h1>博客郵箱</h1>
                <div class="plugin">
                    <button onclick="javascript:turnUrl()">博客</button>
                    <button onclick="javascript:myalert('個人郵箱lijianlin0204@163.com,若有什麼問題，發郵件給我！')">郵箱</button>
                </div>
            </div>
        </div>
        <!-- 開始 手風琴式菜單  引用jQueryUI和jQueryUICSS輔助 -->
        
        <!-- 開始 左側懸浮菜單 -->
        <div id="side_left_menu">
          <ul class="side_list">
            <li>
              <div class="side_text">
                <h2><a href="javascript:turnUrl()" >個人博客</a></h2>
              </div>
            </li>
            <li>
              <div class="side_text">
                <h2><a href="javascript:myalert('有什麼問題，郵箱給我lijianlin0204@163.com')" >個人郵箱</a></h2>
              </div>
            </li>
            <li>
              <div class="side_text">
                <h2><a href="javascript:myalert('個人微信dyznzyl')" >個人微信</a></h2>
              </div>
            </li>
            <li>
              <div class="side_text">
                <h2><a href="javascript:myalert('個人QQ2319048747')" >個人QQ</a></h2>
              </div>
            </li>
            <li>
              <div class="side_text">
                <h2><a href="javascript:myalert('個人微信dyznzyl')" >微信優先</a></h2>
              </div>
            </li>
          </ul>
        </div>
        <!-- 結束 左側懸浮菜單 -->
    </div>
    <!-- 開始 二級菜單-->
    <div id="footer">
        <ul class="menu">
          <li><a href="javascript:turnUrl()">博客首頁</a></li>
          <li><a href="javascript:myalert('個人微信dyznzyl')">Jquery插件</a>
                <ul>
                  <li><a href="javascript:turnUrl('4731439.html')" class="documents">圖片漸入漸出</a></li>
                  <li><a href="javascript:turnUrl('4727434.html')" class="messages">jQuery插件（一）</a></li>
                  <li><a href="javascript:turnUrl('4728564.html')" class="signout">jQuery插件（二）</a></li>
                  <li><a href="javascript:turnUrl('4733514.html')" class="signout">提示彈出框</a></li>
                </ul>
            </li>
          <li><a href="javascript:myalert('個人郵箱lijianlin0204@163.com')">DIV+CSS</a>
                <ul>
                  <li><a href="javascript:turnUrl('4712396.html')" class="documents">細節詳解</a></li>
                  <li><a href="javascript:turnUrl('4709583.html')" class="messages">經常使用語句</a></li>
                  <li><a href="javascript:myalert('個人郵箱lijianlin0204@163.com')" class="signout">個人郵箱</a></li>
                </ul>
            </li>
            <li><a href="javascript:myalert('個人QQ2319048747')">個人聯繫</a>
                <ul>
                  <li><a href="javascript:myalert('個人郵箱lijianlin0204@163.com')" class="documents">個人郵箱</a></li>
                  <li><a href="javascript:myalert('個人QQ2319048747')" class="messages">個人QQ</a></li>
                  <li><a href="javascript:myalert('個人微信dyznzyl')" class="signout">個人微信</a></li>
                </ul>
            </li>
          <li><a href="javascript:myalert('個人微信dyznzyl')">微信優先</a></li>
        </ul>
    </div>
    <!-- 結束 二級菜單-->
</div>

</body>
</html>
View Code

 

ＣＳＳ部分

/*     
**@autor：EthanCoco
**@date：2015-08-18
**@email：lijianlin0204@163.com 
*/
body{font-family:Verdana;font-size:12px;margin:0;}

#container{margin:0 auto;width:100%;}



/* 一級菜單導航css， 去掉一級菜單從「#nav--#header ul li a」*/
#header{height:40px;background:#9c6;
    background: -webkit-linear-gradient(top, #9c6 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, #9c6 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, #9c6 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, #9c6 0%, #2c2d33 100%);
    background: linear-gradient(top, #9c6 0%, #2c2d33 100%); 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
margin-bottom:5px; text-align:center;}
#nav{width:960px;height:40px;line-height: 35px;position: relative;text-align:left;margin-left:320px; }
#navBar{position: absolute;top: 37px;}
.one{height: 2px;background: #fff;overflow:hidden}
.two{height: 1px;background: #aaa;overflow:hidden}
#header ul li{float:left;list-style: none}
#header ul li a{padding: 12px 15px;text-align: center;color: #fff;font-size: 14px; font-weight: bold;font-family: '宋體'; text-decoration: none}
/* 一級菜單導航css */


#mainContent{height:600px;margin-bottom:5px;}

/* 樹狀菜單 */
#sidebar{float:left;height:600px;width:300px;background:#c9f;}
.menuTree a{outline: none;}
.menuTree{width:300px;border:solid 1px black;}
.menuTree ul{font-size:100%;padding:5px;margin:0px;}
.menuTree ul li {list-style:none;padding-left:20px;line-height: 20px;white-space: nowrap;}
.menuTree ul li.par_tree a{color:#F4008F;text-decoration:none;padding:0px 2px;}
.menuTree ul li.par_tree a:hover{font-weight:blod;font-size:110%;}
.menuTree ul li.son_tree a{color:#FB7F2D;text-decoration:none;padding:0px 2px;}
.menuTree ul li.son_tree a:hover{font-weight:blod;font-size:110%;}
.menuTree ul li.par_tree{background: url(images/collapsed_image.gif) left top no-repeat;}
.menuTree ul li.expanded{background: url(images/expended_image.gif) left top no-repeat;}
/* 樹狀菜單 */



/* <!-- 開始 手風琴式菜單css  引用jQueryUI和jQueryUICSS輔助 --> */
#content{margin-left:305px !important; margin-left:302px;height:600px;background:LavenderBlush; }
#accordion{width:300px;}
#accordion .plugin{background :LightCyan; color : DarkMagenta; height:140px;}
#accordion .plugin button{width:150px;}
/* <!-- 開始 手風琴式菜單css  引用jQueryUI和jQueryUICSS輔助 --> */
/* <!-- 開始 左側懸浮菜單 --> */
 #side_left_menu{width:250px; height:600px;
    position:absolute;
    z-index: 10;
    margin-left:305px;
    top:60px;
 }
 #side_left_menu .side_list{width:100%;height:auto; }
 #side_left_menu .side_list li{
     float:left;
     width:200px; 
     margin:0 auto;
     height:40px;
     margin-bottom:10px;
     box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
     -webkit-transition:0.3s all ease;
     -moz-transition:0.3s all ease;
     -ms-transition:0.3s all ease;
     -o-transition:0.3s all ease;
     transition:0.3s all ease;
     overflow:hidden;
     position:relative;
     border-right:5px solid orange;
     list-style-type : none;
    }
#side_left_menu .side_list li:hover{
    background:Magenta;
    background: -webkit-linear-gradient(top, Magenta 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, Magenta 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, Magenta 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, Magenta 0%, #2c2d33 100%);
    background: linear-gradient(top, Magenta 0%, #2c2d33 100%); 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4);
    border-right:5px solid #fff;
}
#side_left_menu .side_text h2,#side_left_menu .side_text a{
    font-family:"Microsoft YaHei";
    color:GhostWhite;
    text-shadow:1px 2px 4px #999;
    font-size:20px;
    font-weight:normal;
    -webkit-transition:0.3s all ease;
    -moz-transition:0.3s all ease;
    -ms-transition:0.3s all ease;
    -o-transition:0.3s all ease;
    line-height: 45px; 
    padding: 0px;
    margin: 0px; 
    text-align: left; 
    float: left;
    text-decoration:none;
}
 #side_left_menu .side_text h3{
     font-family:Verdana;
     font-size:14px;color:#666;
     font-weight:normal;-webkit-transition:0.3s all ease;
     -moz-transition:0.3s all ease;-ms-transition:0.3s all ease;
     -o-transition:0.3s all ease;
}
#side_left_menu .side_list li:hover h2, #side_left_menu .side_list li:hover  a{
    color:LightPink;
    font-size:28px;
    text-shadow:1px 2px 4px #333;
    text-decoration:underline;
}
#side_left_menu .side_list li:hover .side_text h3{color:#F60;font-size:18px;}
#side_left_menu .side_list li:hover .icon{color:#F90;font-size:50px;}
#side_left_menu .side_list li:hover .side_text{
     -webkit-animation-name:shake;-moz-animation-name:shake;
}
 #side_left_menu .side_text{
     width:180px;height:auto;
     float:right;height:50px;-webkit-animation:.5s .2s ease both;
     -moz-animation:1s .2s ease both;
}
/* <!-- 結束 左側懸浮菜單 --> */


/* 二級菜單css */
#footer{height:200px;background:#9c6;}
#footer .menu{margin-left : 350px;height: 40px;width: 505px;background: #DDA0DD;
    background: -webkit-linear-gradient(top, #DDA0DD 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, #DDA0DD 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, #DDA0DD 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, #DDA0DD 0%, #2c2d33 100%);
    background: linear-gradient(top, #DDA0DD 0%, #2c2d33 100%); 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#footer .menu li{position: relative;list-style: none;float: left;display: block;height: 40px;}
#footer .menu li a{
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(23,33,19,45);
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out;
}
#footer .menu li:first-child a {
    border-left: none; 
}
#footer .menu li:last-child a {
     border-right: none;
}
#footer .menu li:hover > a {
    color: #8fde62;
}
/* Sub Menu */

#footer .menu ul {
    position: absolute;
    top: 40px;
    left: 0;
    opacity: 0;
    background: #F0FFFF;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
#footer .menu li:hover > ul {
     opacity: 1; 
}
#footer .menu ul li {
    height: 10px;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
#footer .menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}
#footer .menu ul li a {
    width: 140px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #353539; 
}
#footer .menu ul li:last-child a {
    border: none;
}
/* Icons */
#footer .menu a.documents {
    background: url(images/docs.png) no-repeat 6px center;
}
#footer .menu a.messages {
    background: url(images/bubble.png) no-repeat 6px center;
}
#footer .menu a.signout {
    background: url(images/arrow.png) no-repeat 6px center;
}

/* 二級菜單css */
View Code

 

ＪＳ部分

１、非樹狀ｊｓ

/*     
**EthanCoco原創導航菜單
**@autor：EthanCoco
**@date：2015-08-18
**@email：lijianlin0204@163.com 
*/


;$(function(){
    /**********************開始一級菜單****************************/
    //use strict添加嚴格模式
    'use strict';
    
    var tagNav = document.getElementById('nav');
    var tagBar = document.getElementById('navBar');
    
    //getElementsByTagName 返回的是一個數組, 【0】 表示取返回數組裏面的第一個元素
    var tagLi =tagNav.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var speed= 0;
    var timer, i , n, changeWidth;
    
    //offsetWidth = width + padding + border,
    //tagLi在上面是返回一個數組，tagLi[0]就是去第一個元素，並設置他的寬度
    //tagBar.style.width至關於：（document.getElementById('navBar').style.width；）得到整數值
    tagBar.style.width = tagLi[0].offsetWidth + 'px';
    
    function sports(n, m) {
        timer = setInterval(function () {
            speed = (n - tagBar.offsetLeft) / 10;
            
            
            //Math.ceil()執行向上舍入，即它老是將數值向上舍入爲最接近的整數；
            //Math.floor()執行向下舍入，即它老是將數值向下舍入爲最接近的整數；
            //Math.round()執行標準舍入，即它老是將數值四捨五入爲最接近的整數(這也是咱們在數學課上學到的舍入規則)。
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (tagBar.offsetLeft === n) {
                clearInterval(timer);
            } else {
                //offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
                tagBar.style.left = tagBar.offsetLeft + speed + 'px';
                
            }

            changeWidth = m - tagBar.offsetWidth;
            changeWidth = changeWidth > 0 ? Math.ceil(speed) : Math.floor(speed);
            tagBar.style.width = m + changeWidth  + 'px';
            
        }, 20);
    }

    for (i = 0; i < tagLi.length; i += 1) {
        tagLi[i].onmouseover = function () {
            clearInterval(timer);
            sports(this.offsetLeft, this.offsetWidth);
        };
        tagLi[i].onmouseout = function () {
            clearInterval(timer);
            sports(0, tagLi[0].offsetWidth);
        };
    }    
    /**********************結束一級菜單****************************/
    
    
    
    /**********************開始手風琴式菜單****************************/
    $('#accordion').accordion({//accordion這個函數，就是jQueryUI提供的，跟validate，cookie，datepicker等同樣的，只要引用就能夠，這樣$('#id').accordion();
        collapsible : true,
        icons : {    //改變下來的樣式頭標
            "header" : "ui-icon-plus",
            "activeHeader" : "ui-icon-minus",
        },
        activate : function(event,ui){
            $('#accordion').css('background','yellow');
        },
    }).css('float','right');
    $('#accordion .plugin button').button(); //經過jQueryUICSS設置button按鈕的樣式
    /**********************結束手風琴式菜單****************************/
});




//跳轉頁面的函數 
function turnUrl(opt){
    window.location.href='http://www.cnblogs.com/jianyeLee/p/'+opt;
}


//自定義彈出alert提示框
function myalert(str){
    var msgw,msgh,bordercolor;
    msgw=400;//Prompt window width
    msgh=100;//Prompt window height 
    titleheight=25 //Prompt window title height 
    bordercolor="HotPink";//Prompt window border color
    titlecolor="LightYellow";//Prompt window title  color

    var sWidth,sHeight;
    sWidth=screen.width;
    sHeight=screen.height;

    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position="absolute";
    bgObj.style.top="0";
    bgObj.style.background="ightCyan";
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bgObj.style.opacity="0.6";
    bgObj.style.left="0";
    bgObj.style.width=sWidth + "px";
    bgObj.style.height=sHeight + "px";
    bgObj.style.zIndex = "10000";
    document.body.appendChild(bgObj);

    var msgObj=document.createElement("div")
    msgObj.setAttribute("id","msgDiv");
    msgObj.setAttribute("align","center");
    msgObj.style.background="white";
    msgObj.style.border="1px solid " + bordercolor;
    msgObj.style.position = "absolute";
    msgObj.style.left = "50%";
    msgObj.style.top = "50%";
    msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
    msgObj.style.marginLeft = "-225px" ;
    msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
    msgObj.style.width = msgw + "px";
    msgObj.style.height =msgh + "px";
    msgObj.style.textAlign = "center";
    msgObj.style.lineHeight ="25px";
    msgObj.style.zIndex = "10001";

   var title=document.createElement("h4");
   title.setAttribute("id","msgTitle");
   title.setAttribute("align","right");
   title.style.margin="0";
   title.style.padding="3px";
   title.style.background=bordercolor;
   title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
   title.style.opacity="0.75";
   title.style.border="1px solid " + bordercolor;
   title.style.height="18px";
   title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
   title.style.color="white";
   title.style.cursor="pointer";
   title.innerHTML="Close";
   title.onclick=function(){
    document.body.removeChild(bgObj);
    document.getElementById("msgDiv").removeChild(title);
    document.body.removeChild(msgObj);
    }
   document.body.appendChild(msgObj);
   document.getElementById("msgDiv").appendChild(title);
   var txt=document.createElement("p");
   txt.style.margin="1em 0"
   txt.setAttribute("id","msgTxt");
   txt.innerHTML=str;
   document.getElementById("msgDiv").appendChild(txt);
}
View Code

 

２、樹狀ｊｓ

/*     
**EthanCoco原創導航菜單
**@autor：EthanCoco
**@date：2015-08-18
**@email：lijianlin0204@163.com 
*/


if (jQuery) (function($) {

    $.extend($.fn, {
        menuTree: function(o, callback) {
            // Default parameters
            if (!o) var o = {};
            o.data = this.html();
            if (o.menuEvent == undefined) o.menuEvent = 'click';
            if (o.expandSpeed == undefined) o.expandSpeed = 500;
            if (o.collapseSpeed == undefined) o.collapseSpeed = 500;
            if (o.expandEasing == undefined) o.expandEasing = null;
            if (o.collapseEasing == undefined) o.collapseEasing = null;
            if (o.multiOpenedSubMenu == undefined) o.multiOpenedSubMenu = false;
            if (o.parentMenuTriggerCallback == undefined) o.parentMenuTriggerCallback = false;
            if (o.expandedNode == undefined) o.expandedNode = null;

            $(this).each(function() {

                function bindTree(t) {

                    var liClickedSelector = callback != undefined ? 'LI > A' : 'LI.par_tree > A';
                    
                    $(t).find(liClickedSelector).bind(o.menuEvent, function() {
                        currentItem = $(this);
                        if ($(this).parent().hasClass('par_tree')) {
                            if ($(this).parent().hasClass('expanded')) {
                                // Collapse
                                $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                                $(this).parent().removeClass('expanded').addClass('collapsed');

                            } else {
                                // Expand
                                if (!o.multiOpenedSubMenu) {
                                    $(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                                    $(this).parent().parent().find('LI.par_tree').removeClass('expanded').addClass('collapsed');
                                }
                                $($(this).parent().find("UL")[0]).slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
                                $(this).parent().removeClass('collapsed').addClass('expanded');
                                $(this).parent().find('LI.par_tree').removeClass('expanded').addClass('collapsed');

                                if (o.parentMenuTriggerCallback)
                                    callback($(this).attr('rel'));
                            }

                        } else {
                            callback($(this).attr('rel'));
                        }
                        return false;
                    });

                    // Prevent A from triggering the # on non-click events
                    if (o.menuEvent.toLowerCase != 'click') $(t).find(liClickedSelector).bind('click', function() { return false; });
                }

                // initialization
                $($(this)).find(":first").show();
                bindTree($(this));

                // Expend default node
                if (o.expandedNode) {

                    var elementToExpend = $($(this)).find("a[rel=" + o.expandedNode + "]").parent().parent();

                    // Collect all UL items that need to be extended
                    var ulMenuElements = new Array();
                    var i = 0;
                    while (elementToExpend && elementToExpend.find('DIV').length == 0) {

                        if (elementToExpend[0].tagName == "UL") {
                            ulMenuElements[i] = elementToExpend;
                            i++;
                        }
                        elementToExpend = elementToExpend.parent();
                    }
                    ulMenuElements = ulMenuElements.reverse()

                    // Extend all collected item (recursive)
                    var i = 0;
                    var openMenu = function() {

                        i++; // skip first ul(root)
                        if (i >= ulMenuElements.length) return;

                        ulMenuElements[i].removeClass('collapsed').addClass('expanded');
                        ulMenuElements[i].slideDown({ duration: o.expandSpeed, easing: o.expandEasing, complete: openMenu });

                    }
                    openMenu(ulMenuElements);
                }
            });
        }
    });

})(jQuery);
View Code

 

最後附張全景圖

 

@頭部：一級導航菜單
@尾部：二級導航菜單
@左側：樹狀導航菜單
@右側靠左：懸浮式導航菜單
@右側靠右：手風琴式導航菜單
@autor：EthanCoco
@date：2015-08-18
@email：lijianlin0204@163.com

 

 

最後感謝博友觀看，歡迎轉載！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程