IT技术互动交流平台

jquery+CSS3简易无限级纵向(上下)菜单插件

发布日期:2014-02-22 22:42:54

简介

非常简易的一个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一个现成的,无奈没有找到合适的。


延伸阅读:

Tag标签: jquery+CSS3   简易   无限  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规