返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
css基础当前位置:首页 > HTML教程 > css基础 > 正文

高端企业网站下拉导航条

发布时间:2015-01-27 09:36:00   来源:   点击:

 

高端企业网站下拉导航条
 
高端企业网站下拉导航条jQuery代码,红色大气,下拉菜单无限增加二级栏目。
 
使用方法
1、在head引入下面的代码:
 

 

  1. <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.js"></script> 
  2. <script type="text/javascript"
  3. $(function(){ 
  4.     $("dl").hide(); 
  5.     $("li.mainmenu").hover(function(){ 
  6.         $(this).find("dl").stop(true,true); 
  7.         $(this).find("dl").slideDown(); 
  8.     },function(){ 
  9.         $(this).find("dl").stop(true,true); 
  10.         $(this).find("dl").slideUp(); 
  11.     }); 
  12. }) 
  13. </script> 
  14. <style type="text/css"
  15. *{margin:0px;padding:0px;list-style-type:none;} 
  16. #left{float:left;} 
  17. #right{float:right;} 
  18. /* nav */ 
  19. .nav{width:1000px;height:46px;background:url(images/nav_bg.jpg) repeat-x;margin:40px auto;} 
  20. .nav li{float:left;width108px;height:46px;line-height:46px;text-align:center;font-size:14px;position:relative;} 
  21. .nav li a{color:#FFF;text-decoration:none;display:block;} 
  22. .nav li a.link{float:left;width108px;} 
  23. .nav ul li a:hover{background:url(images/nav_hover.jpg) no-repeat;display:block;} 
  24. .nav dl{width:108px;border:1px solid #C33;font-size:12px;background:#FCC;position:absolute;top:46px;left:0px;} 
  25. .nav dl dd a{color:#933;} 
  26. .nav dl dd a:hover{color:#000;background:#F36;opacity:0.5;} 
  27. </style> 

2、在您的banner区域引入下面的html代码:

 

  1. <div class="nav"> 
  2.     <div id="left"><img src="images/nav_l.jpg"></div> 
  3.     <ul> 
  4.         <li><a class="link" href="#">网站首页</a></li> 
  5.         <li class="mainmenu"> 
  6.             <a class="link" href="#">电子商务</a> 
  7.             <dl> 
  8.                 <dd><a href="#">零度对策</a></dd> 
  9.                 <dd><a href="#">网站建设</a></dd> 
  10.                 <dd><a href="#">网络营销</a></dd> 
  11.                 <dd><a href="#">电子商务</a></dd> 
  12.                 <dd><a href="#">广告代码</a></dd> 
  13.                 <dd><a href="#">网页菜单</a></dd> 
  14.             </dl> 
  15.         </li> 
  16.         <li class="mainmenu"> 
  17.             <a class="link" href="#">网络营销</a> 
  18.             <dl> 
  19.                 <dd><a href="http://www.5imoban.net">网页模板</a></dd> 
  20.                 <dd><a href="#">网站建设</a></dd> 
  21.                 <dd><a href="#">网络营销</a></dd> 
  22.                 <dd><a href="#">电子商务</a></dd> 
  23.                 <dd><a href="#">广告代码</a></dd> 
  24.                 <dd><a href="#">网页菜单</a></dd> 
  25.             </dl> 
  26.         </li> 
  27.         <li class="mainmenu"> 
  28.             <a class="link" href="#">客户服务</a> 
  29.             <dl> 
  30.                 <dd><a href="#">零度对策</a></dd> 
  31.                 <dd><a href="#">网站建设</a></dd> 
  32.                 <dd><a href="#">网络营销</a></dd> 
  33.                 <dd><a href="#">电子商务</a></dd> 
  34.                 <dd><a href="#">广告代码</a></dd> 
  35.                 <dd><a href="#">网页菜单</a></dd> 
  36.             </dl>     
  37.         </li> 
  38.         <li class="mainmenu"> 
  39.             <a class="link" href="#">工程案例</a> 
  40.             <dl> 
  41.                 <dd><a href="http://www.5imoban.net/texiao">jQuery特效</a></dd> 
  42.                 <dd><a href="#">网站建设</a></dd> 
  43.                 <dd><a href="#">网络营销</a></dd> 
  44.                 <dd><a href="#">电子商务</a></dd> 
  45.                 <dd><a href="#">广告代码</a></dd> 
  46.                 <dd><a href="http://www.5imoban.net">企业模板</a></dd> 
  47.             </dl>   
  48.         </li> 
  49.         <li class="mainmenu"> 
  50.             <a class="link" href="#">行业资讯</a> 
  51.             <dl> 
  52.                 <dd><a href="#">零度对策</a></dd> 
  53.                 <dd><a href="#">网站建设</a></dd> 
  54.                 <dd><a href="#">网络营销</a></dd> 
  55.                 <dd><a href="#">电子商务</a></dd> 
  56.                 <dd><a href="#">广告代码</a></dd> 
  57.                 <dd><a href="http://www.5imoban.net">免费网页模板</a></dd> 
  58.             </dl>   
  59.         </li> 
  60.         <li class="mainmenu"><a href="#">联系我们</a></li> 
  61.     </ul> 
  62.     <div id="right"><img src="images/nav_r.jpg"></div> 
  63. </div> 

注:class为mainmenu紧跟的a链接是主导航,dl dd里面的a为二级导航。

版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814