亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js實(shí)現(xiàn)的常用的左側(cè)導(dǎo)航效果

 更新時(shí)間：2013年10月17日 17:37:51   作者：  
使用js簡單實(shí)現(xiàn)下常用的左側(cè)導(dǎo)航效果為提高導(dǎo)航性能而生，各位朋友可以參考應(yīng)用，希望對(duì)大家有所幫助
常用的左側(cè)導(dǎo)航效果，JS簡單，為提高導(dǎo)航性能而生，各位可以 參考應(yīng)用。

效果展示：
 
HTML:
復(fù)制代碼 代碼如下:

<!--左側(cè)菜單-->
<div class="menu">
<ul class="menu_list">
<li class="even">
<p class="menu_title bgfs"><a href="#" target="_blank">服飾箱包</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女裝</a><a href="#" target="_blank">男裝</a><a href="#" target="_blank">童裝</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">飾品</a>
</p>
</li>
<li class="odd">
<p class="menu_title bgjs"><a href="#" target="_blank">酒水飲料</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女裝</a><a href="#" target="_blank">男裝</a><a href="#" target="_blank">童裝</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">飾品</a>
</p>
</li>
<li class="even">
<p class="menu_title bgjj"><a href="#" target="_blank">居家建材</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女裝</a><a href="#" target="_blank">男裝</a><a href="#" target="_blank">童裝</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">飾品</a>
</p>
</li>
<li class="odd">
<p class="menu_title bgcy"><a href="#" target="_blank">餐飲娛樂</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女裝</a><a href="#" target="_blank">男裝</a><a href="#" target="_blank">童裝</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">飾品</a>
</p>
</li>
<li class="even">
<p class="menu_title bgmr"><a href="#" target="_blank">美容保健</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女裝</a><a href="#" target="_blank">男裝</a><a href="#" target="_blank">童裝</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">飾品</a>
</p>
</li>
<li class="odd">
<p class="menu_title bgjy"><a href="#" target="_blank">教育培訓(xùn)</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女裝</a><a href="#" target="_blank">男裝</a><a href="#" target="_blank">童裝</a><a href="#" target="_blank">包包</a>
</p>
</li>
<li class="even">
<p class="menu_title bggyp"><a href="#" target="_blank">工業(yè)品</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女裝</a><a href="#" target="_blank">男裝</a><a href="#" target="_blank">童裝</a><a href="#" target="_blank">包包</a>
</p>
</li>
<li class="odd">
<p class="menu_title bgxqt"><a href="#" target="_blank">新奇特</a></p>
<p class="menu_sort">
<a href="#" target="_blank">女裝</a><a href="#" target="_blank">男裝</a><a href="#" target="_blank">童裝</a><a href="#" target="_blank">包包</a><br/>
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">飾品</a>
</p>
</li>
</ul>

<div class="menu_box hide">
<div class="menu_cont hide">

<div class="menu_cont01">
<span class="menu_title_video">項(xiàng)目視頻</span>
<div class="menu_video">
<ul>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li>
</ul>
</div>
<div class="scroll_menu">
<span class="prev_menu" href="#"></span>
<span class="next_menu" href="#"></span>
<div class="roolbox_menu">
<div class="scroll_list_menu">
<ul>
<li>
<p class="ad_logo ad_fs01">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名" /></a>
</p>
<p class="ad_logo">
<span class="ad_fs02">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名" /></a>
</span>
<span class="ad_fs03">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名" /></a>
</span>

</p>
<p class="ad_logo ad_fs04">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</p>
<p class="ad_logo">
<span class="ad_fs02">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</span>
<span class="ad_fs03">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</span>

</p>
<p class="ad_logo">
<span class="ad_fs05">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</span>
<span class="ad_fs06">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</span>

</p>
</li>
<li>
<p class="ad_logo ad_fs01">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名" /></a>
</p>
<p class="ad_logo">
<span class="ad_fs02">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名" /></a>
</span>
<span class="ad_fs03">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名" /></a>
</span>

</p>
<p class="ad_logo ad_fs04">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</p>
<p class="ad_logo">
<span class="ad_fs02">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</span>
<span class="ad_fs03">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</span>

</p>
<p class="ad_logo">
<span class="ad_fs05">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</span>
<span class="ad_fs06">
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="項(xiàng)目名"/></a>
</span>

</p>
</li>
</ul>
</div>
</div>
</div>

<div class="menupic_fsxb"><img src="images/pic_fsxb.png" /></div>
</div>



</div>
<div class="menu_cont hide">2</div>
<div class="menu_cont hide">3</div>
<div class="menu_cont hide">4</div>
<div class="menu_cont hide">5</div>
<div class="menu_cont hide">6</div>
<div class="menu_cont hide">7</div>
<div class="menu_cont hide">8</div>
</div>
</div>
<!--中間項(xiàng)目展示-->

JS：
復(fù)制代碼 代碼如下:

$(".menu_list li").mouseenter(function(){
$(".menu_box").show();
var nav_index = $(".menu_list li").index(this);
$(".menu_cont").eq(nav_index).show()//滑動(dòng)菜單對(duì)應(yīng)當(dāng)前內(nèi)容
.siblings().hide();
}) ;
$(".menu").mouseleave(function(){

$(".menu_box").hide();
}) ;

相關(guān)文章

  • JavaScript判斷表單為空及獲取焦點(diǎn)的方法

    JavaScript判斷表單為空及獲取焦點(diǎn)的方法

    這篇文章主要介紹了JavaScript判斷表單為空及獲取焦點(diǎn)的方法,可實(shí)現(xiàn)表單提交時(shí)判斷表單是否為空及獲取響應(yīng)焦點(diǎn)的功能,非常簡單實(shí)用,需要的朋友可以參考下
    2016-02-02
  • select隱藏選中值對(duì)應(yīng)的id,顯示其它id的簡單實(shí)現(xiàn)方法

    select隱藏選中值對(duì)應(yīng)的id,顯示其它id的簡單實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄猻elect隱藏選中值對(duì)應(yīng)的id,顯示其它id的簡單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-08-08
  • 解決百度Echarts圖表坐標(biāo)軸越界的方法

    解決百度Echarts圖表坐標(biāo)軸越界的方法

    Echarts是由百度提供的數(shù)據(jù)可視化解決方案, 這篇文章主要介紹了解決百度Echarts圖表坐標(biāo)軸越界的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
    2018-10-10
  • JS動(dòng)畫效果代碼2

    JS動(dòng)畫效果代碼2

    用js實(shí)現(xiàn)的圖片生成效果代碼，學(xué)習(xí)js的朋友可以看看
    2008-04-04
  • Javascript之this關(guān)鍵字深入解析

    Javascript之this關(guān)鍵字深入解析

    如我之前的文章所述(Javascript作用域)，定義在全局的函數(shù)，函數(shù)的所有者就是當(dāng)前頁面，也就是window對(duì)象
    2013-11-11
  • JavaScript數(shù)組去重和扁平化函數(shù)介紹

    JavaScript數(shù)組去重和扁平化函數(shù)介紹

    這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù)，數(shù)組扁平化又稱數(shù)組降維，下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下
    2021-12-12
  • js中document.getElementById(id)的具體用法

    js中document.getElementById(id)的具體用法

    本文主要介紹了js中document.getElementById(id)的具體用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Javascript新手入門之字符串拼接與變量的應(yīng)用

    Javascript新手入門之字符串拼接與變量的應(yīng)用

    這篇文章主要給大家介紹了關(guān)于Javascript新手入門之字符串拼接與變量應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • 淺析JavaScript中的常用算法與函數(shù)

    淺析JavaScript中的常用算法與函數(shù)

    這篇文章主要介紹了JavaScript中的常用算法與函數(shù)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
    2013-11-11
  • 我的javascript 函數(shù)鏈之演變

    我的javascript 函數(shù)鏈之演變

    我的javascript 函數(shù)鏈之演變,需要的朋友可以參考下。
    2011-04-04

最新評(píng)論