jquery带下拉菜单和焦点图代码分享

前端技术 2023/09/08 JavaScript

jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码。感兴趣的朋友快来学习学习吧
运行效果图：                           ----------------------查看效果 下载源码-----------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery带下拉菜单和焦点图如下

<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>jquery带下拉菜单和焦点图</title>
<!-- base.css | 元素还原基础样式 -->
<link rel=\"stylesheet\" type=\"text/css\" href=\"templets/default/styles/base.css\" />
<!-- main.css | 页面主体样式 -->
<link rel=\"stylesheet\" type=\"text/css\" href=\"templets/default/styles/main.css\" />
<!-- js -->
<script type=\"text/javascript\" src=\"templets/default/scripts/jquery-1.8.0.min.js\" /></script>
<script type=\"text/javascript\" src=\"templets/default/scripts/jquery.SuperSlide.2.1.1.js\" /></script>
<script type=\"text/javascript\" src=\"templets/default/scripts/public.js\"></script>
</head>
<body>
 <!-- header -->
 <div class=\"header_full w_100\">
  <div class=\"header\">
   <!-- top_left | logo -->
   <div class=\"logo f_l\"> </div> 
   <!-- top_right -->
   <div class=\"top_right f_r\">
    <!-- top_link -->
    <div class=\"top_link\">
     <i>服务热线 12345678</i>
      
     <span>
      <a href=\"http://www.phpstudy.net\" title=\"登录\">登录</a>
      /
      <A href=\"http://www.phpstudy.net\" title=\"注册\">注册</A>/
      <A href=\"http://www.phpstudy.net\" title=\"免费试用\" >免费试用</A>

     </span>
    </div>
    <!-- menu -->
    <div class=\"nav_bar\">
     <ul class=\"nav clearfix\">
          
      <!-- 单一菜单 | end -->
      
      <li class=\"m\">
       <h3><a target=\"_blank\" href=\"http://www.phpstudy.net\" title=\"合作专区\">合作专区</a></h3>
       <ul class=\"sub\">
        <LI ><A href=\"http://www.phpstudy.net\">欢迎合作</A> </LI>
        <LI ><A href=\"http://www.phpstudy.net\">合作伙伴</A> </LI>
       </ul>
      </li>
      <li class=\"s\">|</li>
      
      <li class=\"m\">
       <h3><a target=\"_blank\" href=\"http://www.phpstudy.net\" title=\"客户服务\">客户服务</a></h3>
       <ul class=\"sub\">
        <LI ><A href=\"http://www.phpstudy.net\">常见问题</A> </LI>
        <LI ><A href=\"http://www.phpstudy.net\">购买指南</A> </LI>
        <LI ><A href=\"http://www.phpstudy.net\">备案流程</A> </LI>
        <LI ><A href=\"http://www.phpstudy.net\">售后服务</A></LI> 
       </ul>
      </li>
      <li class=\"s\">|</li>
      
      <li class=\"m\">
       <h3><a target=\"_blank\" href=\"http://www.phpstudy.net\" title=\"我的云\">我的云</a></h3>
       <ul class=\"sub\">
       <LI ><A href=\"http://www.phpstudy.net\">服务控制台</A> </LI>
        <LI ><A href=\"http://www.phpstudy.net\">会员中心</A> </LI>
  </ul>
      </li>
      <li class=\"s\">|</li>
      
      <li class=\"m\">
       <h3><a target=\"_blank\" href=\"http://www.phpstudy.net\" title=\"产品服务\">产品服务</a></h3>
       <ul class=\"sub\">
       <LI ><A href=\"http://www.phpstudy.net\">云主机购买</A> </LI>
       <LI ><A href=\"http://www.phpstudy.net\">360XP盾甲</A> </LI>
       <LI ><A href=\"http://www.phpstudy.net\">360天擎</A> </LI>
       <LI ><A href=\"http://www.phpstudy.net\">数据中心</A> </LI>
       </ul>
      </li>
      <li class=\"s\">|</li>
      
      <li class=\"m\">
       <h3><a href=\"http://www.phpstudy.net\" title=\"首页\">首页</a></h3>
      </li>
      <li class=\"block\"></li><!-- 滑动块 -->
      
     </ul>
    </div>
    <!-- menu | end -->
   </div>
  </div>
 </div>
 <!-- header | end -->
 
 <!-- banner -->
 <div class=\"full_banner\">
  <div class=\"bd\">
 <ul>
 <li style=\"background:url(templets/default/images/banner.jpg) #56C1ED center 0px no-repeat;\"><a target=\"_blank\" href=\"http://www.phpstudy.net\"></a></li>
 <li style=\"background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;\"><a target=\"_blank\" href=\"http://www.phpstudy.net\"></a></li>
 <li style=\"background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;\"><a target=\"_blank\" href=\"http://www.phpstudy.net\"></a></li>
 </ul>
 </div>
 <div class=\"hd\"><ul></ul></div>
 </div>
 <!-- banner | end -->
 
<div style=\"text-align:center;margin:50px 0; font:normal 14px/24px \'MicroSoft YaHei\';\">
</div>
</body>
</html>


以上就是为大家分享的jquery带下拉菜单和焦点图代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/23316

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案