jquery帶下拉菜單和焦點(diǎn)圖是一款頂部通欄帶二級(jí)下拉菜單和banner導(dǎo)航菜單代碼。感興趣的朋友快來(lái)學(xué)習(xí)學(xué)習(xí)吧
運(yùn)行效果圖： ----------------------查看效果下載源碼-----------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jquery帶下拉菜單和焦點(diǎn)圖如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery帶下拉菜單和焦點(diǎn)圖</title>
<!-- base.css | 元素還原基礎(chǔ)樣式 -->
<link rel="stylesheet" type="text/css" href="templets/default/styles/base.css" />
<!-- main.css | 頁(yè)面主體樣式 -->
<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>服務(wù)熱線(xiàn)&nbsp;12345678</i>
     &nbsp;
     <span>
      <a href="http://chabaoo.cn" title="登錄">登錄</a>
      /
      <A href="http://chabaoo.cn" title="注冊(cè)">注冊(cè)</A>/
      <A href="http://chabaoo.cn" title="免費(fèi)試用" >免費(fèi)試用</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="合作專(zhuān)區(qū)">合作專(zhuān)區(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="客戶(hù)服務(wù)">客戶(hù)服務(wù)</a></h3>
       <ul class="sub">
        <LI ><A href="http://chabaoo.cn">常見(jiàn)問(wèn)題</A> </LI>
        <LI ><A href="http://chabaoo.cn">購(gòu)買(mǎi)指南</A> </LI>
        <LI ><A href="http://chabaoo.cn">備案流程</A> </LI>
        <LI ><A href="http://chabaoo.cn">售后服務(wù)</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">服務(wù)控制臺(tái)</A> </LI>
        <LI ><A href="http://chabaoo.cn">會(huì)員中心</A> </LI>
  </ul>
      </li>
      <li class="s">|</li>
      
      <li class="m">
       <h3><a target="_blank" href="http://chabaoo.cn" title="產(chǎn)品服務(wù)">產(chǎn)品服務(wù)</a></h3>
       <ul class="sub">
       <LI ><A href="http://chabaoo.cn">云主機(jī)購(gòu)買(mǎi)</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="首頁(yè)">首頁(yè)</a></h3>
      </li>
      <li class="block"></li><!-- 滑動(dòng)塊 -->
      
     </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帶下拉菜單和焦點(diǎn)圖代碼，希望大家可以喜歡。

您可能感興趣的文章: