jquery帶下拉菜單和焦點(diǎn)圖代碼分享
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) 12345678</i> <span> <a href="http://www.dbjr.com.cn" title="登錄">登錄</a> / <A href="http://www.dbjr.com.cn" title="注冊(cè)">注冊(cè)</A>/ <A href="http://www.dbjr.com.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://www.dbjr.com.cn" title="合作專(zhuān)區(qū)">合作專(zhuān)區(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="客戶(hù)服務(wù)">客戶(hù)服務(wù)</a></h3> <ul class="sub"> <LI ><A href="http://www.dbjr.com.cn">常見(jiàn)問(wèn)題</A> </LI> <LI ><A href="http://www.dbjr.com.cn">購(gòu)買(mǎi)指南</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ù)控制臺(tái)</A> </LI> <LI ><A href="http://www.dbjr.com.cn">會(huì)員中心</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">云主機(jī)購(gòu)買(mǎi)</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="首頁(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://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帶下拉菜單和焦點(diǎn)圖代碼,希望大家可以喜歡。
- jQuery焦點(diǎn)圖插件SaySlide
- 基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果
- jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼
- 基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides
- jQuery焦點(diǎn)圖輪播特效代碼分享(3款)
- jQuery實(shí)現(xiàn)仿Alipay支付寶首頁(yè)全屏焦點(diǎn)圖切換特效
- jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
- jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能實(shí)例
- jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無(wú)縫滾動(dòng)切換特效
- jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果
相關(guān)文章
無(wú)限樹(shù)Jquery插件zTree的常用功能特性總結(jié)
這篇文章主要對(duì)無(wú)限樹(shù)Jquery插件zTree的常用功能特性總結(jié),ztree的語(yǔ)法結(jié)構(gòu)是基于key-value的形式配置,需要的朋友可以參考下2014-09-09jQuery動(dòng)態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解
這篇文章主要介紹了jQuery動(dòng)態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解,需要的朋友可以參考下2017-08-08jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法,涉及jQuery基于ajax動(dòng)態(tài)操作頁(yè)面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-02-02jQuery Validation插件remote驗(yàn)證方式的Bug解決
jQuery插件很多,其中一個(gè)重要的插件便是jQuery Validation,它的作用是對(duì)表單進(jìn)行驗(yàn)證,還上了jQuery官網(wǎng)。2010-07-07jQuery中關(guān)于ScrollableGridPlugin.js(固定表頭)插件的使用逐步解析
以前寫(xiě)前臺(tái)的時(shí)候需要用哪些效果從來(lái)都是有現(xiàn)成的東西拿來(lái)就用的,因?yàn)樽约赫娴氖怯行?,毫無(wú)探索精神,只重視結(jié)果,不追求過(guò)程2014-07-07