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