这篇文章主要介绍了jquery+css实现的红色线条横向二级菜单效果,界面美观大方,简洁实用,通过jquery遍历及切换页面元素实现这一功能,需要的朋友可以参考下
本文实例讲述了jquery+css实现的红色线条横向二级菜单效果。分享给大家供大家参考。具体如下：
这是一款带导航的菜单，当前是哪一项菜单，会很个性的显示出来，鼠标放上后会显示菜单缺口，挺有意思的吧，希望大家喜欢。
运行效果截图如下：
在线演示地址如下：
http://demo.html.cn/js/2015/jquery-css-red-color-2row-nav-style-codes/
具体代码如下：
css+js红色线条横向二级菜单 body {font-family:\5B8B\4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;} body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,emBED{padding:0; margin:0;} li{list-style-type:none;} a{text-decoration:none;color:#333;} a:hover{text-decoration:underline;} #nav{ background:url('images/nav_li_bg.gif') repeat-x top; height:37px; position:relative;width:988px; margin:20px auto;} #nav .l{ background:url('images/nav_li_left.gif') no-repeat top; height:37px;width:78px; float:left} #nav .r{width:82px;background:url('images/nav_li_rights.gif') no-repeat right top;height:37px;float:left;} #nav li { float:left;} #nav li .v a{ width:138px;height:37px; line-height:32px; display:block; color:#FFF;float:left;font-weight:bold;text-decoration:none;text-align:center;} #nav li .v a:hover,#nav li .v .sele{width:138px;background:url('images/nav_li_hover.gif') no-repeat top;color:#fff;height:37px;line-height:37px;color:#d11515;} .kind_menu { height:30px;line-height:30px;vertical-align:middle; position:absolute;top:37px;left:0;text-align:left; display:none;color:#333;font-size:12px;} .kind_menu a {color:#333; background:url('images/sub_dot.gif') no-repeat left 14px;float:left; text-align:center;padding:0 10px;font-size:12px;text-decoration:none;} .kind_menu a:hover {color:#000;text-decoration:none;} #Layer1{width:400px;left:60px;} #Layer2{width:400px;left:200px;} #Layer3{width:500px;left:300px;} #Layer4{width:400px;left:400px;} #Layer5{width:400px;left:auto;right:120px;} #Layer6{width:560px;left:auto;right:60px;}
- 网站首页 欢迎访问,我们为您提供最优质的网络营销服务!
- 脚本之家 脚本下载 脚本教程
- 导航条 英文域名 中文域名 通用网址 源码下载 域名交易 域名帮助 智能加速
- 电子商务 网络营销 源码下载 网络营销 网页特效
- 网络营销 网络营销 网络营销 网络营销 网页特效代码
- 关于我们 网络营销 源码下载 网络营销 网页特效
希望本文所述对大家的jquery程序设计有所帮助。
您可能感兴趣的文章:
- JQuery实现绚丽的横向下拉菜单
- jquery实现无限分级横向导航菜单的方法
- jquery+css实现绚丽的横向二级下拉菜单-附源码下载
- jquery实现可横向和竖向展开的动态下滑菜单效果
- jquery实现仿Flash的横向滑动菜单效果代码
- Jquery实现纵向横向菜单
以上就是jquery+css实现的红色线条横向二级菜单效果的详细内容，更多请关注本站其它相关文章！
