当前位置: 首页 > 设计 > 正文
avatar

随着内容分类的丰富,有时候需要一个简单的二级菜单来完成各项功能,下面这个二级菜单效果比较简单,稍稍加了点渐隐。菜单最多支持两级,配合CSS,所以CSS也是很重要的。

随着内容分类的丰富,现在二级菜单得到越来越多的应用,有时候需要一个简单的二级菜单来完成各项功能,下面这个二级菜单效果比较简单,稍稍加了点渐隐。

默认的风格用了点Apple的影子,重要是给大家一点启示,可是修改CSS去制作各种不用样式的二级菜单,菜单最多支持两级,配合CSS,所以CSS也是很重要的。

演示地址:
下面看主要的CSS代码:
.vvsmoothmenu {
	margin: 0px auto; font: 12px verdana; width: 730px
}
.vvsmoothmenu ul {
	padding-right: 0px; padding-left: 0px;background: #4e4e4e;background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,0.4)),to(rgba(59,59,59,1)));background: -moz-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));background: -ms-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));background: -o-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));  z-index: 100; float: left; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none
}
.vvsmoothmenu ul li {
	display: block; float: left; width: 108px; line-height: 36px; position: relative; text-align: center
}
 html .vvsmoothmenu ul li {
	float: left; width: 108px; line-height: 36px; position: relative; text-align: center; border-right:1px #777 solid;
}
.vvsmoothmenu ul li a {
	display: block; font-weight: bold; width: 108px; text-decoration: none
}
.vvsmoothmenu ul li a:link {
	color: #fff
}
.vvsmoothmenu ul li a:visited {
	color: #fff
}
.vvsmoothmenu ul li a:hover {
	color: #ccc
}
.vvsmoothmenu ul li ul {
	left: 0px; visibility: hidden; position: absolute
}
.vvsmoothmenu ul li ul li {
	background:#4e4e4e; float: left; width: 108px; line-height: 30px; border-bottom: #777 1px solid;border-right:1px #555 solid;
}
.vvsmoothmenu ul li ul li a {
	display: block; width: 108px; text-decoration: none
}
.vvsmoothmenu ul li ul li a:hover {
	background: #555
}
.vvsmoothmenu ul li ul li ul {
	top: 0px
}
.downarrowclass {
	display: none; position: absolute
}
.rightarrowclass {
	display: none; position: absolute
}
.ddshadow {
	background: silver; left: 0px; width: 0px; position: absolute; top: 0px; height: 0px
}
.toplevelshadow {
	opacity: 0.8
}
本文固定链接: http://www.weisay.com/blog/jquery-two-drop-down-menu.html | 威言威语

JQuery简单二级下拉菜单:目前有1 条评论

  1. avatar
    沙发
    网络之神 Unknow Browser Unknow Os

    挺实用的,现在的二级菜单越来越多了。

    2007-07-06 23:08 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter