模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
圆角竖向的CSS折叠菜单_菜单导航特效
查看演示效果
特效Tag:
折叠菜单
添加
这个代码不错,用CSS实现圆角效果,竖向排列,可折叠、可展开,自动响应鼠标运作,内容定制方便,希看你喜欢。
<style type="text/css"> <!-- #menu { font-size:12px; height:380px; margin:0; padding:0; width:180px; overflow:hidden; background:#f0f0f0; list-style:none; border-left:1px solid #DDD; border-right:1px solid #DDD; } #menu li a { display:block; text-decoration:none; color:#00b; margin:0; width:100%; } #menu li a span { display:none; color:#000; height:120px } #menu li a.one span { display:block; margin:0 10px; } #menu li a:hover { background:#f1f1f1; } #menu li a:hover span { display:block; margin:0 10px; cursor:pointer; } #menu .h2 { margin:0 5px; padding:0; color:#808; font-variant:small-caps; border:0; } #menu .h3 { margin:0 5px; padding:0; color:#00b; } .curved { width:180px; margin:0 auto; } .curved .b1, .curved .b2, .curved .b3, .curved .b4 { font-size:1px; display:block; background:#88c; overflow: hidden; } .curved .b1, .curved .b2, .curved .b3 { height:1px; } .curved .b2, .curved .b3, .curved .b4 { background:#f0f0f0; border-left:1px solid #DDD; border-right:1px solid #DDD; } .curved .b1 { margin:0 4px; background:#DDD; } .curved .b2 { margin:0 2px; border-width:0 2px; } .curved .b3 { margin:0 1px; } .curved .b4 { height:2px; margin:0px; } --> </style> <div class="curved"> <b class="b1 c1"> </b> <b class="b2 c2"> </b> <b class="b3 c3"> </b> <b class="b4 c4" ></b> <ul id="menu"> <li> <a href="#nogo"> <b class="h2">ASP CODE</b><br /> <span>本类ASP源代码分享交流区,大量精品的ASP源代码供初学者学习研究,希看你喜欢!</span> </a> </li> <li> <a href="#nogo"> <b class="b1"></b> <b class="b2"></b> <b class="h2">PHP CODE</b><br /> <span>本类PHP代码分享发布区,欢迎爱好者和我们一起交流进步进步,欢迎来来到mb5u.com</span> </a> </li> <li> <a href="#nogo"> <b class="b1"></b> <b class="b2"></b> <b class="h2">JSP CODE</b><br /> <span>本类JSP代码学习区,不错吧,JSP学习区,热烈欢迎您的加盟。</span> </a> </li> </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>
所属频道:
菜单导航特效
/
更新时间:2010-05-22
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
三级CSS下拉导航菜单
目录式导航菜单-鼠标放上的下拉菜单
纯CSS Tabs选项卡示例
CSS仿迅雷的网站导航
移动菜单
比较流行的JS+CSS选项卡TAB
强烈推荐的一款CSS导航菜单
经典的蓝色CSS下拉菜单
JS折叠菜单
鼠标滑过变色的菜单栏
猜你也喜欢看这些
天极网的JS卡通图片切换
滑动条显示 Script
鼠标放到图片上会滑出提示文字
纯CSS实现Lightbox点击小图无刷新显示大图
相片选择器脚本 任意选择图片
经典的图片切换
很有意思的图片分裂复制效果
图片型不规则菜单的CSs实现方法
图象滚动公告版
Js新闻幻灯图片轮番播放代码
相关链接:
复制本页链接
|
搜索圆角竖向的CSS折叠菜单
特效说明:
菜单导航模板
-
圆角竖向的CSS折叠菜单
。