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;