本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果。分享给大家供大家参考。具体如下：
这是一款基于jQuery实现的仿美橙互联两级导航菜单，效果不错吧，更像是一个滑动门，不会让你失望的。
先来看看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/
具体代码如下：
仿美橙互联导航菜单 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } #nav_wrap{margin:20px auto;} #nav li{ text-align:center;font-size:12px;} #nav_wrap { width:960px; overflow:hidden; } #nav{ background:url(images/nav_bg.gif) repeat-x; height:39px; position:relative; width:950px; margin:0 auto; } #nav .l{ background:url(images/navnbg.gif) no-repeat 0px 0px; height:39px; width:2px; float:left} #nav .r{ background:url(images/navnbg.gif) no-repeat -4px 0px; height:39px; width:2px; float:right} #nav .bt_qnav { float:right; } #nav .bt_qnav a{ width:31px; height:29px; line-height:39px;display:block;padding:9px 2px 0 0;} #nav .c{ float:left;margin:0;padding:0} #nav li { float:left; list-style:none; } #nav li .v a{ width:83px;height:39px; line-height:33px; display:block; color:#FFF; background:url(images/navnbg.gif) no-repeat -87px 6px; float:left; font-family:"Microsoft Yahei";} #nav li .v a:hover,#nav li .v .sele{background:url(images/navnbg.gif) no-repeat 0px -47px; color:#116406; line-height:42px; font-size:14px} #nav .kind_menu { height:30px;*height:29px; line-height:30px;vertical-align:middle; position:absolute; top:37px;*top:39px; left:70px; width:880px; text-align:left; display:none; background:url(images/nav_bg1.gif) repeat-x bottom; color:#656565; } #nav .kind_menu a {color:#656565; float:left; text-align:center; width:90px; font-family:Arial, Helvetica, sans-serif;} #nav .kind_menu a:hover { color:#ff4300; background:url(images/navnbg.gif) no-repeat 1px -91px;*background:url(images/navnbg.gif) no-repeat 1px -93px;} #nav .kind_menu span { font-size:10px; color:#cecece; line-height:30px; *line-height:26px; float:left } #tmenu{ background:url(images/nav_bg1.gif) repeat-x bottom; height:28px; border-bottom:1px solid #eee; }
- 首页 欢迎访问美橙互联!
- 特惠套餐 电信套餐 | 双线套餐
- 域名频道 英文域名 | 中文域名 | 通用网址 | 价格列表 | 域名交易 | 相关帮助 | 智能加速
希望本文所述对大家的jQuery程序设计有所帮助。
