jquery帶下拉菜單和焦點圖代碼分享
jquery帶下拉菜單和焦點圖是一款頂部通欄帶二級下拉菜單和banner導(dǎo)航菜單代碼。感興趣的朋友快來學(xué)習(xí)學(xué)習(xí)吧
運行效果圖: ----------------------查看效果 下載源碼-----------------------
小提示:瀏覽器中如果不能正常運行,可以嘗試切換瀏覽模式。
為大家分享的jquery帶下拉菜單和焦點圖如下
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery帶下拉菜單和焦點圖</title> <!-- base.css | 元素還原基礎(chǔ)樣式 --> <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>服務(wù)熱線 12345678</i> <span> <a href="http://www.dbjr.com.cn" title="登錄">登錄</a> / <A href="http://www.dbjr.com.cn" title="注冊">注冊</A>/ <A href="http://www.dbjr.com.cn" title="免費試用" >免費試用</A> </span> </div> <!-- menu --> <div class="nav_bar"> <ul class="nav clearfix"> <!-- 單一菜單 | end --> <li class="m"> <h3><a target="_blank" href="http://www.dbjr.com.cn" title="合作專區(qū)">合作專區(qū)</a></h3> <ul class="sub"> <LI ><A href="http://www.dbjr.com.cn">歡迎合作</A> </LI> <LI ><A href="http://www.dbjr.com.cn">合作伙伴</A> </LI> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.dbjr.com.cn" title="客戶服務(wù)">客戶服務(wù)</a></h3> <ul class="sub"> <LI ><A href="http://www.dbjr.com.cn">常見問題</A> </LI> <LI ><A href="http://www.dbjr.com.cn">購買指南</A> </LI> <LI ><A href="http://www.dbjr.com.cn">備案流程</A> </LI> <LI ><A href="http://www.dbjr.com.cn">售后服務(wù)</A></LI> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.dbjr.com.cn" title="我的云">我的云</a></h3> <ul class="sub"> <LI ><A href="http://www.dbjr.com.cn">服務(wù)控制臺</A> </LI> <LI ><A href="http://www.dbjr.com.cn">會員中心</A> </LI> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a target="_blank" href="http://www.dbjr.com.cn" title="產(chǎn)品服務(wù)">產(chǎn)品服務(wù)</a></h3> <ul class="sub"> <LI ><A href="http://www.dbjr.com.cn">云主機購買</A> </LI> <LI ><A href="http://www.dbjr.com.cn">360XP盾甲</A> </LI> <LI ><A href="http://www.dbjr.com.cn">360天擎</A> </LI> <LI ><A href="http://www.dbjr.com.cn">數(shù)據(jù)中心</A> </LI> </ul> </li> <li class="s">|</li> <li class="m"> <h3><a href="http://www.dbjr.com.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://www.dbjr.com.cn"></a></li> <li style="background:url(templets/default/images/banner3.jpg) #21BFCA center 0px no-repeat;"><a target="_blank" href="http://www.dbjr.com.cn"></a></li> <li style="background:url(templets/default/images/banner2.jpg) #394867 center 0px no-repeat;"><a target="_blank" href="http://www.dbjr.com.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帶下拉菜單和焦點圖代碼,希望大家可以喜歡。
- jQuery焦點圖插件SaySlide
- 基于Jquery實現(xiàn)焦點圖淡出淡入效果
- jQuery實現(xiàn)標(biāo)題有打字效果的焦點圖代碼
- 基于jQuery全屏焦點圖左右切換插件responsiveslides
- jQuery焦點圖輪播特效代碼分享(3款)
- jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效
- jquery實現(xiàn)多屏多圖焦點圖切換特效的方法
- jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能實例
- jQuery插件Elastislide實現(xiàn)響應(yīng)式的焦點圖無縫滾動切換特效
- jQuery實現(xiàn)的左右移動焦點圖效果
相關(guān)文章
無限樹Jquery插件zTree的常用功能特性總結(jié)
這篇文章主要對無限樹Jquery插件zTree的常用功能特性總結(jié),ztree的語法結(jié)構(gòu)是基于key-value的形式配置,需要的朋友可以參考下2014-09-09jQuery動態(tài)添加.active 實現(xiàn)導(dǎo)航效果代碼思路詳解
這篇文章主要介紹了jQuery動態(tài)添加.active 實現(xiàn)導(dǎo)航效果代碼思路詳解,需要的朋友可以參考下2017-08-08jQuery實現(xiàn)滾動到底部時自動加載更多的方法示例
這篇文章主要介紹了jQuery實現(xiàn)滾動到底部時自動加載更多的方法,涉及jQuery基于ajax動態(tài)操作頁面元素相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-02-02jQuery Validation插件remote驗證方式的Bug解決
jQuery插件很多,其中一個重要的插件便是jQuery Validation,它的作用是對表單進(jìn)行驗證,還上了jQuery官網(wǎng)。2010-07-07jQuery中關(guān)于ScrollableGridPlugin.js(固定表頭)插件的使用逐步解析
以前寫前臺的時候需要用哪些效果從來都是有現(xiàn)成的東西拿來就用的,因為自己真的是有些懶,毫無探索精神,只重視結(jié)果,不追求過程2014-07-07