jquery帶下拉菜單和焦點圖代碼分享

更新時間：2015年08月24日 12:09:58 投稿：lijiao

這篇文章主要介紹了jquery帶下拉菜單和焦點圖代碼，推薦給大家，有需要的小伙伴可以參考下。

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>服務熱線&nbsp;12345678</i>
     &nbsp;
     <span>
      <a href="http://chabaoo.cn" title="登錄">登錄</a>
      /
      <A href="http://chabaoo.cn" title="注冊">注冊</A>/
      <A href="http://chabaoo.cn" title="免費試用" >免費試用</A>

     </span>
    </div>
    <!-- menu -->
    <div class="nav_bar">
     <ul class="nav clearfix">
          
      <!-- 單一菜單 | end -->
      
      <li class="m">
       <h3><a target="_blank" href="http://chabaoo.cn" title="合作專區(qū)">合作專區(qū)</a></h3>
       <ul class="sub">
        <LI ><A href="http://chabaoo.cn">歡迎合作</A> </LI>
        <LI ><A href="http://chabaoo.cn">合作伙伴</A> </LI>
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="http://chabaoo.cn" title="客戶服務">客戶服務</a></h3>
       <ul class="sub">
        <LI ><A href="http://chabaoo.cn">常見問題</A> </LI>
        <LI ><A href="http://chabaoo.cn">購買指南</A> </LI>
        <LI ><A href="http://chabaoo.cn">備案流程</A> </LI>
        <LI ><A href="http://chabaoo.cn">售后服務</A></LI> 
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="http://chabaoo.cn" title="我的云">我的云</a></h3>
       <ul class="sub">
       <LI ><A href="http://chabaoo.cn">服務控制臺</A> </LI>
        <LI ><A href="http://chabaoo.cn">會員中心</A> </LI>
  </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="http://chabaoo.cn" title="產品服務">產品服務</a></h3>
       <ul class="sub">
       <LI ><A href="http://chabaoo.cn">云主機購買</A> </LI>
       <LI ><A href="http://chabaoo.cn">360XP盾甲</A> </LI>
       <LI ><A href="http://chabaoo.cn">360天擎</A> </LI>
       <LI ><A href="http://chabaoo.cn">數(shù)據(jù)中心</A> </LI>
       </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a href="http://chabaoo.cn" 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://chabaoo.cn"></a></li>
 <li style="background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;"><a target="_blank" href="http://chabaoo.cn"></a></li>
 <li style="background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;"><a target="_blank" href="http://chabaoo.cn"></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帶下拉菜單和焦點圖代碼，希望大家可以喜歡。

您可能感興趣的文章: