经验分享程序开发文档资料数据资源其它资源

jQuery黑色网站导航下拉菜单代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery黑色网站导航下拉菜单代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery黑色网站导航下拉菜单代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery黑色网站导航下拉菜单代码</title>
<link href="css/homefast_nav.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- 代码部分begin -->
  <div class="nav">     
    <ul class="sy1_ul">
      <div class="sy2_inside">
        <li class="home02"><a href="">Home</a></li>
   
           <li class="sy1_li navli6"> <a id="12" class="sy1_tit " href="#" target="_self"><span class="navspan">Shower Enclosures</span></a>
          <ul class="sy2_ul">
            <div class="sy2_inside">
              <li class="sy2_li navli1"> <a id="197" class="sy2_tit " href="#" target="_self"><span class="navspan">Sliding Door Enclosures</span></a> </li>
              <li class="sy2_li navli2"> <a id="198" class="sy2_tit " href="#" target="_self"><span class="navspan">Hinged Door Enclosures</span></a> </li>
              <li class="sy2_li navli3"> <a id="135" class="sy2_tit " href="#" target="_self"><span class="navspan">Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli4"> <a id="136" class="sy2_tit " href="#" target="_self"><span class="navspan">Bi Fold Enclosures</span></a> </li>
              <li class="sy2_li navli5"> <a id="137" class="sy2_tit " href="#" target="_self"><span class="navspan">Pivot Enclosures</span></a> </li>
              <li class="sy2_li navli6"> <a id="199" class="sy2_tit " href="#" target="_self"><span class="navspan">Walk In Enclosures</span></a> </li>
              <li class="sy2_li navli7"> <a id="138" class="sy2_tit " href="#" target="_self"><span class="navspan">Frameless Shower Enclosures</span></a> </li>
              <li class="sy2_li navli8"> <a id="139" class="sy2_tit " href="#" target="_self"><span class="navspan">Offset Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli9"> <a id="140" class="sy2_tit " href="#" target="_self"><span class="navspan">Wet Rooms</span></a> </li>
              <div class="clearit"></div>
            </div>
            <div class="nav2_yywh_img"> <a href="#" > <img src="images/os5100.jpg" /></a>
            </div>
           </ul>
        </li>
        
         <li class="sy1_li navli6"> <a id="12" class="sy1_tit " href="#" target="_self"><span class="navspan">Shower Trays</span></a>
          <ul class="sy2_ul">
            <div class="sy2_inside">
              <li class="sy2_li navli1"> <a id="197" class="sy2_tit " href="#" target="_self"><span class="navspan">Sliding Door Enclosures</span></a> </li>
              <li class="sy2_li navli2"> <a id="198" class="sy2_tit " href="#" target="_self"><span class="navspan">Hinged Door Enclosures</span></a> </li>
              <li class="sy2_li navli3"> <a id="135" class="sy2_tit " href="#" target="_self"><span class="navspan">Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli4"> <a id="136" class="sy2_tit " href="#" target="_self"><span class="navspan">Bi Fold Enclosures</span></a> </li>
              <li class="sy2_li navli5"> <a id="137" class="sy2_tit " href="#" target="_self"><span class="navspan">Pivot Enclosures</span></a> </li>
              <li class="sy2_li navli6"> <a id="199" class="sy2_tit " href="#" target="_self"><span class="navspan">Walk In Enclosures</span></a> </li>
              <li class="sy2_li navli7"> <a id="138" class="sy2_tit " href="#" target="_self"><span class="navspan">Frameless Shower Enclosures</span></a> </li>
              <li class="sy2_li navli8"> <a id="139" class="sy2_tit " href="#" target="_self"><span class="navspan">Offset Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli9"> <a id="140" class="sy2_tit " href="#" target="_self"><span class="navspan">Wet Rooms</span></a> </li>
              <div class="clearit"></div>
            </div>
            <div class="nav2_yywh_img"> <a href="#" > <img src="images/os5100.jpg" /></a>
            </div>
           </ul>
        </li>
        
         <li class="sy1_li navli6"> <a id="12" class="sy1_tit " href="#" target="_self"><span class="navspan">Bath Screens</span></a>
          <ul class="sy2_ul">
            <div class="sy2_inside">
              <li class="sy2_li navli1"> <a id="197" class="sy2_tit " href="#" target="_self"><span class="navspan">Sliding Door Enclosures</span></a> </li>
              <li class="sy2_li navli2"> <a id="198" class="sy2_tit " href="#" target="_self"><span class="navspan">Hinged Door Enclosures</span></a> </li>
              <li class="sy2_li navli3"> <a id="135" class="sy2_tit " href="#" target="_self"><span class="navspan">Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli4"> <a id="136" class="sy2_tit " href="#" target="_self"><span class="navspan">Bi Fold Enclosures</span></a> </li>
              <li class="sy2_li navli5"> <a id="137" class="sy2_tit " href="#" target="_self"><span class="navspan">Pivot Enclosures</span></a> </li>
              <li class="sy2_li navli6"> <a id="199" class="sy2_tit " href="#" target="_self"><span class="navspan">Walk In Enclosures</span></a> </li>
              <li class="sy2_li navli7"> <a id="138" class="sy2_tit " href="#" target="_self"><span class="navspan">Frameless Shower Enclosures</span></a> </li>
              <li class="sy2_li navli8"> <a id="139" class="sy2_tit " href="#" target="_self"><span class="navspan">Offset Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli9"> <a id="140" class="sy2_tit " href="#" target="_self"><span class="navspan">Wet Rooms</span></a> </li>
              <div class="clearit"></div>
            </div>
            <div class="nav2_yywh_img"> <a href="#" > <img src="images/os5100.jpg" /></a>
            </div>
           </ul>
        </li>
        
         <li class="sy1_li navli6"> <a id="12" class="sy1_tit " href="#" target="_self"><span class="navspan">Service Support</span></a>
          <ul class="sy2_ul">
            <div class="sy2_inside">
              <li class="sy2_li navli1"> <a id="197" class="sy2_tit " href="#" target="_self"><span class="navspan">Sliding Door Enclosures</span></a> </li>
              <li class="sy2_li navli2"> <a id="198" class="sy2_tit " href="#" target="_self"><span class="navspan">Hinged Door Enclosures</span></a> </li>
              <li class="sy2_li navli3"> <a id="135" class="sy2_tit " href="#" target="_self"><span class="navspan">Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli4"> <a id="136" class="sy2_tit " href="#" target="_self"><span class="navspan">Bi Fold Enclosures</span></a> </li>
              <li class="sy2_li navli5"> <a id="137" class="sy2_tit " href="#" target="_self"><span class="navspan">Pivot Enclosures</span></a> </li>
              <li class="sy2_li navli6"> <a id="199" class="sy2_tit " href="#" target="_self"><span class="navspan">Walk In Enclosures</span></a> </li>
              <li class="sy2_li navli7"> <a id="138" class="sy2_tit " href="#" target="_self"><span class="navspan">Frameless Shower Enclosures</span></a> </li>
              <li class="sy2_li navli8"> <a id="139" class="sy2_tit " href="#" target="_self"><span class="navspan">Offset Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli9"> <a id="140" class="sy2_tit " href="#" target="_self"><span class="navspan">Wet Rooms</span></a> </li>
              <div class="clearit"></div>
            </div>
            <div class="nav2_yywh_img"> <a href="#" > <img src="images/os5100.jpg" /></a>
            </div>
           </ul>
        </li>
        
         <li class="sy1_li navli6"> <a id="12" class="sy1_tit " href="#" target="_self"><span class="navspan">Contact Us</span></a>
         </li>
        
         <li class="sy1_li navli6"> <a id="12" class="sy1_tit " href="#" target="_self"><span class="navspan">Sale</span></a>
          <ul class="sy2_ul">
            <div class="sy2_inside">
              <li class="sy2_li navli1"> <a id="197" class="sy2_tit " href="#" target="_self"><span class="navspan">Sliding Door Enclosures</span></a> </li>
              <li class="sy2_li navli2"> <a id="198" class="sy2_tit " href="#" target="_self"><span class="navspan">Hinged Door Enclosures</span></a> </li>
              <li class="sy2_li navli3"> <a id="135" class="sy2_tit " href="#" target="_self"><span class="navspan">Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli4"> <a id="136" class="sy2_tit " href="#" target="_self"><span class="navspan">Bi Fold Enclosures</span></a> </li>
              <li class="sy2_li navli5"> <a id="137" class="sy2_tit " href="#" target="_self"><span class="navspan">Pivot Enclosures</span></a> </li>
              <li class="sy2_li navli6"> <a id="199" class="sy2_tit " href="#" target="_self"><span class="navspan">Walk In Enclosures</span></a> </li>
              <li class="sy2_li navli7"> <a id="138" class="sy2_tit " href="#" target="_self"><span class="navspan">Frameless Shower Enclosures</span></a> </li>
              <li class="sy2_li navli8"> <a id="139" class="sy2_tit " href="#" target="_self"><span class="navspan">Offset Quadrant Enclosures</span></a> </li>
              <li class="sy2_li navli9"> <a id="140" class="sy2_tit " href="#" target="_self"><span class="navspan">Wet Rooms</span></a> </li>
              <div class="clearit"></div>
            </div>
            <div class="nav2_yywh_img"> <a href="#" > <img src="images/os5100.jpg" /></a>
            </div>
           </ul>
        </li>

        <div class="clearit"></div>
      </div>
    </ul>
  </div>
<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/homefast_navxl.js"></script> 
</body>
</html>

JS代码(homefast_navxl.js):

$(document).ready(function(){
	//导航$(".sy1_ul .sy1_li").hover(function(){
	var index = $('.sy1_ul .sy1_li').index(this);
	$(this).addClass("sy1_li_bg").find(".sy2_ul").stop(true,true).fadeIn(350);
	//select隐藏（i6下select始终在最上层的问题）$(".searchselect").hide();
}
,function(){
	var index = $('.sy1_ul .sy1_li').index(this);
	$(this).removeClass("sy1_li_bg").find(".sy2_ul").hide();
	//select 恢复显示$(".searchselect").show();
}
) $(".sy2_li").hover(function(){
	var index=$(this).children("ul").length;
	if(index>0){
	$(this).addClass("sy2_li_h")}
$(this).find("ul:first").show()}
,function(){
	$(this).removeClass("sy2_li_h").find("ul:first").hide()}
);
	//导航下拉位置样式控制$(".sy2_ul .sy2_li").addClass("bod_1");
}
);

CSS代码(homefast_nav.css):

@charset "utf-8";*{padding:0px;margin:0px;list-style:none}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,tr,td,th,dl,dd,dt{margin:0;padding:0;border:0;}
h1,h2,h3,h4,h5,h6{font-size:14px;}
.floatL{float:left}
.floatR{float:right}
.blnk1{height:5px;display:block;}
.blnk2{height:10px;display:block;}
.blnk3{height:15px;display:block;}
.blnk4{height:20px;display:block;}
label{float:left;margin-top:2px;_margin-top:4px;}
.inputradio{float:left;*margin:-1px 0;margin:6px 5px 0 0px;height:24px;line-height:24px;cursor:pointer}
body{color:#333;font-size:12px;font-family:"Arial";}
.wrap{width:100%;clear:both;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;color:#145EA9}
a:hover{color:#ec9205;text-decoration:none;}
.clearit,.clearb{clear:both;font-size:0;width:0;height:0;line-height:0;visibility:hidden;overflow:hidden;}
.none{display:none}
/*nav*/
.nav{height:45px;position:absolute;min-width:990px;width:100%;margin:0 auto;background:#37393a;}
*+html .nav{margin-top:3px;margin-bottom:15px;}
.nav .tc{display:none;}
.home01{display:block;background:url(../images/home01.jpg) no-repeat 0 0px;width:18px;height:16px;position:absolute;left:175px;top:7px}
.home01:hover{background:url(../images/home01_h.jpg) no-repeat 0 0px;}
.navli12{display:none!important;}
.sy1_ul li.home02{width:50px;float:left;line-height:30px;}
.sy1_ul li.home02 a{background:#f1014e no-repeat 0 0px;height:45px!important;display:block;text-align:center;color:#fff;display:block;font-size:16px;font-weight:bold;line-height:45px;}
/*home样式*/
.sy1_ul li.home02 a:hover{color:#FFF;text-decoration:none}
/*home字体样式*/
.sy1_ul{font-size:12px;line-height:29px;height:42px;margin:0 -460px;position:absolute;left:48%;}
.sy1_li{width:152px;float:left;display:inline;}
.sy1_ul li a.sy1_tit{color:#FFF}
.sy1_ul li a:hover{color:#145EA9;}
.sy1_ul li.sy1_li{float:left;z-index:10000;line-height:25px;}
.sy1_ul li.sy1_li .sy1_tit{line-height:45px;font-size:16px;display:block;text-align:center}
.sy2_ul{position:absolute;left:0;top:45px;z-index:1112;display:none;border:#999 solid 1px;border-top:none;padding:20px 5px;/*background:#fff url(../images/bg_sy2_ul.jpg) repeat-x;*/
 background:#fff;width:948px;text-align:center}
.sy2_li{float:left;color:#fff;line-height:30px;font-size:14px;text-align:center;margin:25px;_margin-left:2px;position:relative;width:120px;}
.sy2_tit{overflow:hidden}
/*下拉菜单样式*/
.sy2_tit:hover{color:#005ce4!important}
.sy1_ul .sy1_li .sy2_li_h{border-left:solid 1px #014c6c;border-top:solid 1px #014c6c;border-bottom:solid 1px #014c6c!important;display:block;z-index:2000;}
.sy1_ul .sy1_li .sy2_li_h a{color:#333!important}
.sy1_ul .sy1_li .sy2_li_h a:hover{color:#005ce4!important;}
.bod_1{border-bottom:dashed 1px #CCCCCC;border-left:solid 1px #fff;border-top:solid 1px #fff}
.sy1_li_bg{background:#000 no-repeat 0 0px;height:45px!important;display:block;text-align:center;}
.sy1_li_bg a.sy1_tit{color:#fff!important;}
.sy1_li_bg a.sy1_tit:hover{color:#fff!important;text-decoration:none}
.sy1_ul li a.sy2_tit{color:#333;font-size:14px;}
.sy1_ul li a.sy1_tit:hover{color:#fff!important;}
.navli3 li a.sy2_tit{font-weight:100}
.navli5 li a.sy2_tit{font-weight:100}
/*二级导航样式*/
.sy2_ul .sy2_inside{width:200px;float:left;}
.sy2_ul .sy2_inside li{float:left;width:125px}
.sy2_ul .sy2_inside li .sy3_ul{width:95px}
.sy2_ul .sy2_inside li .sy3_ul .sy2_inside{width:95px}
.sy2_ul .sy2_inside li .sy3_ul li{width:89px;}
.nav2_cent_div{width:435px;border-left:1px solid #DDD;border-right:1px solid #DDD;float:left}
.sy1_ul li .sy2_ul .nav2_cent_div li{float:left;padding:0 12px;width:180px;_padding:0 8px;overflow:hidden;position:relative}
.sy1_ul li .sy2_ul .nav2_cent_div li p{line-height:20px;font-size:12px;font-weight:normal}
.sy1_ul li .sy2_ul .nav2_cent_div h4{font-size:14px;line-height:30px;}
.sy1_ul li .sy2_ul .nav2_cent_div li h4 a{color:#145EA9;height:auto;width:auto;border:none}
.sy1_ul li .sy2_ul .nav2_cent_div li h4 a:hover{color:#ec9205}
.sy1_ul li .sy2_ul .nav2_cent_div li img{width:180px}
.sy1_ul li .sy2_ul .nav2_cent_div li a{width:180px;height:103px;display:block;overflow:hidden;border:#d6d6d6 solid 1px}
.sy1_ul li .sy2_ul .nav2_cent_div li a:hover{border-color:#F93}
.sy1_ul li .sy2_ul .nav2_cent_div li p a{display:none}
.sy1_ul li .sy2_ul .nav2_cent_div li h2 a{color:#333;border:none;width:auto;height:auto;display:block;margin-top:5px;line-height:30px;font-size:12px;font-weight:normal}
.sy1_ul li .sy2_ul .nav2_cent_div li h2 a:hover{color:#ec9205}
.nav2_cent_img,.nav2_cent_img0{float:left;padding-left:18px;width:282px;text-align:left}
.nav2_cent_img img,.nav2_cent_img0 img{width:280px;border:#d6d6d6 solid 1px}
.nav2_cent_img img,.nav2_cent_img0 img:hover{border-color:#F93}
.nav2_cent_img h2,.nav2_cent_img0 h2{margin-top:5px;font-size:12px}
.nav2_cent_img h2 a,.nav2_cent_img0 h2 a{color:#333;font-weight:normal}
.nav2_cent_img h2 a:hover,.nav2_cent_img0 h2 a:hover{color:#ec9205}
.navli2 .sy2_ul{float:left}
.sy2_ul li a:hover{color:#005ce4!important;text-decoration:none;}
/*二级下拉*/
.nav2_yywh_img{border-left:1px solid #ddd;width:360px;float:left;}
.nav2_yywh_img a img{width:360px;height:310px;margin-left:30px;}
.navli6 .sy2_ul .sy2_inside{width:530px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
107.40 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
107.40 KB
立即下载
钟娜青
了解
打赏作者 鼓励作者
Html Js 菜单导航特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章