jquery+CSS3 簡易無限級縱向(上下)菜單插件

jquery簡易無限級縱向(上下)菜單插件

簡介

非常簡易的一個jquery插件，用來實現無限級縱向(上下)菜單，通常放於web應用程序的左側。如圖：

代碼

javascript腳本部分：

if (typeof jQuery !== 'undefined') {
	(function ($) {
		$.fn.menu = function () {
			if (!this.parent("nav").html()) return alert("jquery menu NEEDS a <nav></nav> container!");
			this.find("li").hover(
                function () {
                	$(this).addClass("hover");
                },
                function () {
                	$(this).removeClass("hover");
                }
            );
			this.find("li").each(function () {
				if ($(this).children("ul").html()) {
					$(this).addClass("expandable");
				}
			});
			this.find("li").click(function (e) {
				e.stopPropagation();
				if ($(this).hasClass("expandable")) {
					var level = $(this).parents(".expanded").length+1;
					$(this).removeClass("expandable").addClass("expanded level" + level).children("ul").slideDown();
				}
				else if ($(this).hasClass("expanded")) {
					$(this).removeClass("expanded").addClass("expandable").children("ul").slideUp();
				}
			});
		}
	}(jQuery));
}

dark版CSS代碼如下：

/*nav gloabl setting*/
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

    nav ul a {
        color: #ffffff;
        padding-left: 20px;
        width: 220px;
        cursor: pointer;
    }

    nav ul li {
        width: 100%;
        line-height: 35px;
        background: #3D3D3D;
        border-bottom: solid 1px #5C5C5C;
        position: relative;
    }

        nav ul li ul {
            display: none;
        }

        nav ul li.expanded ul {
            border-top: solid 1px #5C5C5C;
        }

        nav ul li.expanded li:last-child {
            border-bottom: 0;
        }

        nav ul li.expandable > a:after, nav ul li.expanded > a:after {
            right: 10px;
            content: "›";
            margin-left: 0.45em;
            position: absolute;
            font-family: 'Segoe UI_','Open Sans',Verdana,Arial,Helvetica,sans-serif;
            font-size: 11pt;
        }

        nav ul li.expandable > a:after{
            bottom: 0;
            -ms-transform: rotate(90deg); /* IE 9 */
            -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
            transform: rotate(90deg);
        }
        nav ul li.expanded > a:after {
            top: 0;
            -ms-transform: rotate(-90deg); /* IE 9 */
            -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
            transform: rotate(-90deg);
        }
/*nav global setting---end*/

/*nav first level*/
nav > ul > li.hover {
    background: #000000;
}
nav > ul > li.hover>a {
    color: #FFFFFF;
}
nav > ul > li.expanded.level1 {
    background: #000000;
}
nav > ul > li.expanded.level1>a {
    color:#FFFFFF;
}
/*nav first level---end*/

    /*nav second expandable level*/
    nav > ul > li.expanded.level1 > ul > li.expandable {
        background: #EEEEEE;
    }

        nav > ul > li.expanded.level1 > ul > li.expandable > a {
            color: #000000;
        }

        nav > ul > li.expanded.level1 > ul > li.expandable.hover > a {
            color: #FFFFFF;
        }

        nav > ul > li.expanded.level1 > ul > li.expandable.hover {
            background: #AAA;
        }

        nav > ul > li.expanded.level1 > ul > li.expandable.expanded {
            background: #CCCCCC;
        }

            nav > ul > li.expanded.level1 > ul > li.expandable.expanded > a {
                color: #000000;
            }
/*nav second expandable level---end*/

/*nav all last level*/
nav ul li:not(.expandable):not(.expanded) {
    background: #FFFFFF;
}

    nav ul li:not(.expandable):not(.expanded) > a {
        color: #000000;
    }

    nav ul li:not(.expandable):not(.expanded).hover {
        background: #EEE;
    }
/*nav all last level---end*/

/*nav first but also last level*/
nav>ul>li:not(.expandable):not(.expanded) {
    background: #3D3D3D;
}
nav>ul>li:not(.expandable):not(.expanded).hover {
    background: #000000;
}
nav > ul > li:not(.expandable):not(.expanded) a {
    color: #FFFFFF;
}
/*nav first but also last level---end*/

light版css代碼如下：

/*nav gloabl setting*/
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

    nav ul a {
        color: #000000;
        padding-left: 20px;
        width: 220px;
        cursor: pointer;
    }

    nav ul li {
        width: 100%;
        line-height: 35px;
        background: #eeeeee;
        border-bottom: solid 1px #5C5C5C;
        position: relative;
    }

        nav ul li ul {
            display: none;
        }

        nav ul li.expanded ul {
            border-top: solid 1px #5C5C5C;
        }

        nav ul li.expanded li:last-child {
            border-bottom: 0;
        }

        nav ul li.expandable > a:after, nav ul li.expanded > a:after {
            right: 10px;
            content: "›";
            margin-left: 0.45em;
            position: absolute;
            font-family: 'Segoe UI_','Open Sans',Verdana,Arial,Helvetica,sans-serif;
            font-size: 11pt;
        }

        nav ul li.expandable > a:after{
            bottom: 0;
            -ms-transform: rotate(90deg); /* IE 9 */
            -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
            transform: rotate(90deg);
        }
        nav ul li.expanded > a:after {
            top: 0;
            -ms-transform: rotate(-90deg); /* IE 9 */
            -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
            transform: rotate(-90deg);
        }
/*nav global setting---end*/

/*nav first level*/
nav > ul > li.hover {
    background: #000000;
}
nav > ul > li.hover>a {
    color: #FFFFFF;
}
nav > ul > li.expanded.level1 {
    background: #3D3D3D;
}
nav > ul > li.expanded.level1>a {
    color:#FFFFFF;
}
/*nav first level---end*/

    /*nav second expandable level*/
    nav > ul > li.expanded.level1 > ul > li.expandable {
        background: #3D3D3D;
    }

        nav > ul > li.expanded.level1 > ul > li.expandable > a {
            color: #FFFFFF;
        }

        nav > ul > li.expanded.level1 > ul > li.expandable.hover > a {
            color: #FFFFFF;
        }

        nav > ul > li.expanded.level1 > ul > li.expandable.hover {
            background: #000000;
        }

        nav > ul > li.expanded.level1 > ul > li.expandable.expanded {
            background: #CCCCCC;
        }

            nav > ul > li.expanded.level1 > ul > li.expandable.expanded > a {
                color: #000000;
            }
/*nav second expandable level---end*/

/*nav all last level*/
nav ul li:not(.expandable):not(.expanded) {
    background: #FFFFFF;
}

    nav ul li:not(.expandable):not(.expanded) > a {
        color: #000000;
    }

    nav ul li:not(.expandable):not(.expanded).hover {
        background: #EEEEEE;
    }
/*nav all last level---end*/

/*nav first but also last level*/
nav>ul>li:not(.expandable):not(.expanded) {
    background: #EEEEEE;
}
nav>ul>li:not(.expandable):not(.expanded).hover {
    background: #000000;
}
nav>ul>li:not(.expandable):not(.expanded).hover>a {
    color: #FFFFFF;
}
nav > ul > li:not(.expandable):not(.expanded) a {
    color: #000000;
}
/*nav first but also last level---end*/

dark版和light版只是改了下顏色。

用多少級菜單，需要自己動手改一下CSS。比如，添加第四級的菜單顏色。示例是三級菜單的樣式。如果對於顏色要求不高的話，直接用CSS設置一個通用顏色可以省略按級設置顏色的步驟。CSS怎麼寫不多說了，大家都知道的。

使用

使用它需要一個通用的ul li菜單列表：

<nav>
        <ul>
            <li><a>一級兼終級</a></li>
            <li><a>一級</a>
                <ul>
                    <li><a>二級兼終級</a></li>
                    <li><a>二級</a>
                        <ul>
                            <li><a>三級</a>
                                <ul>
                            <li><a>四級兼終級</a></li>
                            <li><a>四級兼終級</a></li>
                        </ul>
                            </li>
                            <li><a>三級兼終級</a></li>
                        </ul>
                    </li>
                    <li><a>二級</a>
                        <ul>
                            <li><a>三級兼終級</a></li>
                            <li><a>三級兼終級</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            </ul>
    </nav>

引用上面的jquery.menu插件和css，當然不要忘了jquery庫.

調用插件：

<script type="text/javascript">
        $(document).ready(function () {
            $("nav>ul").menu();
        });

    </script>

總結

javascript其實只有幾句，CSS顯然更多。不過在這個基礎上想怎麼擴展就怎麼擴展。本來想用GOOGLE一個現成的，無奈沒有找到合適的。