JQuery简单二级下拉菜单

William2007-07-04 19:12设计8,413次浏览5条评论

扫一扫手机看

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

默认的风格用了点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
}

赏

【上一篇】C语言版双截棍
【下一篇】来自Cloudflare的免费CDN加速服务

JQuery简单二级下拉菜单：目前有 5 条评论

板凳
ejsoon：

反應有點慢？

2022-12-31 22:45 回复
- William博主：
  
  @ejsoon是博客还是这个下拉菜单，目前看着速度都还行。
  
  2023-01-01 13:54 回复
  - ejsoon：
    
    @William菜單慢，可能是我的手機慢。話說打字動效是如何實現的？
    
    2023-01-01 16:10 回复
    - William博主：
      
      @ejsoon主要使用了activate-power-mode.js这个js，你可以百度搜索：WordPress activate-power-mode 就能搜到不少教程，不复杂，引用那个js，核心代码如下，将其放到评论输入框代码的后面就行。
      
      <script src="js/activate-power-mode.js"></script> <script> POWERMODE.colorful = true; POWERMODE.shake = false; document.body.addEventListener('input', POWERMODE); </script>
      
      2023-01-01 22:02 回复
沙发
网络之神：

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

2007-07-06 23:08 回复