JS+CSS实现经典的左侧竖向滑动菜单效果_javascript技巧_脚本之家

本文实例陈诉了JS+CSS达成杰出的侧面竖向滑动菜单成效。分享给大家供咱们参照他事他说加以调查。具体如下:

那是一款经过更换的左侧竖向滑动菜单,基于JavaScript+CSS,未有过多的梳洗,首要想达成菜单的卡通片效果,想用的对象,自个儿美化吧。

经过改造的左侧竖向滑动菜单body{ margin:10px; padding:10px;}a:link { text-decoration: none;color: blue} a:active { text-decoration:blink} a:hover { text-decoration:underline;color: red} a:visited { text-decoration: none;color: green} body,td,div,span,li{ font-size:12px;}.title01,.title02{ color:#00b; font-weight:bold;}#DoorP{ width:200px; height:300px; padding:0px; background:#FFFCF2;}.title01{ width:100%; height:25px; background:#FFFCF2; cursor:pointer;}.title02{ width:100%; height:25px; background:#FFFCF2; cursor:pointer;}.content{ background:#FFFCF2; border-bottom:2px solid #fff; overflow:hidden; color:#666; padding-left:4px; padding-right:4px; line-height:18px;}.curved { width:202px; } .curved .b1, .curved .b2, .curved .b3, .curved .b4 { font-size:1px; display:block; background:#FFFCF2; overflow: hidden; } .curved .b1, .curved .b2, .curved .b3 { height:1px; } .curved .b2, .curved .b3, .curved .b4 { background:#FFFCF2; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; } .curved .b1 { margin:0 4px; background:#C7BC98; } .curved .b2 { margin:0 2px; border-width:0 2px; } .curved .b3 { margin:0 1px; } .curved .b4 { height:2px; margin:0; } .curved .c1 { margin:0 5px; background:#C7BC98; } .curved .c2 { margin:0 3px; border-width:0 2px; } .curved .c3 { margin:0 2px; } .curved .c4 { height:2px; margin: 0 1px; } .curved .boxcontent { display:block; background:transparent; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; font-size:0.9em; text-align:justify; }           第一层信息 

JS+CSS实现经典的左侧竖向滑动菜单效果_javascript技巧_脚本之家。二层
二层
二层

第二层信息

二层
二层
二层

第三层信息

二层
二层
二层

愿意本文所述对大家的JavaScript程序设计有着帮忙。

发表评论

电子邮件地址不会被公开。 必填项已用*标注