模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
选项卡式的菜单_菜单导航特效
查看演示效果
特效Tag:
选项卡
CSS菜单
添加
风格有点像选项卡的CSS菜单,灰色调,简洁明快,希看大家喜欢。
<html> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>选项卡式的菜单</title> <style type="text/css"> <!-- #navlist { border-bottom: 1px solid #ccc; margin: 0; padding-bottom: 19px; padding-left: 10px; } #navlist ul, #navlist li { display: inline; list-style-type: none; margin: 0; padding: 0; } #navlist a:link, #navlist a:visited { background: #E8EBF0; border: 1px solid #ccc; color: #666; float: left; font-size: small; font-weight: normal; line-height: 14px; margin-right: 8px; padding: 2px 10px 2px 10px; text-decoration: none; } #navlist a:link#current, #navlist a:visited#current { background: #fff; border-bottom: 1px solid #fff; color: #000; } #navlist a:hover { color: #f00; } body.section-1 #navlist li#nav-1 a, body.section-2 #navlist li#nav-2 a, body.section-3 #navlist li#nav-3 a, body.section-4 #navlist li#nav-4 a { background: #fff; border-bottom: 1px solid #fff; color: #000; } #navlist #subnav-1, #navlist #subnav-2, #navlist #subnav-3, #navlist #subnav-4 { display: none; width: 90%; } body.section-1 #navlist ul#subnav-1, body.section-2 #navlist ul#subnav-2, body.section-3 #navlist ul#subnav-3, body.section-4 #navlist ul#subnav-4 { display: inline; left: 10px; position: absolute; top: 95px; } body.section-1 #navlist ul#subnav-1 a, body.section-2 #navlist ul#subnav-2 a, body.section-3 #navlist ul#subnav-3 a, body.section-4 #navlist ul#subnav-4 a { background: #fff; border: none; border-left: 1px solid #ccc; color: #999; font-size: smaller; font-weight: bold; line-height: 10px; margin-right: 4px; padding: 2px 10px 2px 10px; text-decoration: none; } #navlist ul a:hover { color: #f00 !important; } #mrcs { background: #fff; border: 1px solid #ccc; border-top: none; clear: both; margin: 0px; padding: 15px; } --> </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">ASP</a></li> <li><a href="#">PHP</a></li> <li><a href="#">AJAX</a></li> <li><a href="#">JSP</a></li> <li><a href="#">FIVE</a></li> </ul> </div> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2012-11-04
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
每一个菜单项都可以关闭的竖排导航栏
自适应宽度的CSS圆角背景的菜单按钮
灰色会换色MAC官方菜单纯CSS实现
黑色竖排的CSS导航菜单
CSS实现带滚动条的二级竖直菜单
酷似FLASH的竖向菜单
标签在右侧的竖向选项卡
边框随拖动而移动的导航菜单
自写的一Javascript右键菜单类
特酷下拉菜单
猜你也喜欢看这些
地图网站的一个图片拖动特效
图片拖拉缩放效果(仿PHOTOSHOP)
JS实现鼠标悬停图片交换
CSS+JavaScript仿FLASH的图片轮换效果
JS图片溶解出现的特效
左右移动的图片
Js+Css图片切换,带缩略图响应鼠标滑过
鼠标经过图片由灰色变彩色
jQuery 鼠标悬停图片色彩渐显效果
同一页面调用并显示多个图片幻灯切换效果
相关链接:
复制本页链接
|
搜索选项卡式的菜单
特效说明:
菜单导航模板
-
选项卡式的菜单
。