最常見的左側分類菜單欄jQuery實現(xiàn)代碼
更新時間：2016年11月28日 09:24:00 作者：我就是三冰
這篇文章主要為大家詳細介紹了最常見的左側分類菜單欄jQuery實現(xiàn)代碼,仿京東、淘寶等各大類網站效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
打開京東、淘寶等各大類網站，最常見的就是左側分類菜單欄了，既然這么常見的功能，那么應該怎么去實現(xiàn)它呢，接下來，我會在js中介紹兩種實現(xiàn)方式，一種是引入jQuery的實現(xiàn)方式，一種是不引入jQuery的原生js的實現(xiàn)方式~~
先看效果：
一、先準備資料
1）如果你們是用jQuery來開發(fā)網站的，肯定先要準備jQuery.js呀，這個百度一搜就有。不用jQuery開發(fā)的，可以忽略此步驟
2）準備一些圖片，鼠標右鍵 > 圖片另存為就可以保存
icon_nav.jpg：
img_226x40.jpg：
img_226x95.jpg：
二、準備開發(fā)
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>旅游網站左側分類菜單代碼</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="product_sort fl">
<div class="hd">旅游產品導航</div>
<div class="bd">
<div class="item">
<div class="title one"><a href="#"><i></i>出境游</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
<div class="line"></div>
<div class="subitem">
<div class="inner">
<div class="tit tit1">
<div class="name">泰國</div>
<ul>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律賓</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文萊</a></li>
<li><a href="#">藍夢島</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班島</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">馬來西亞</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龍灣</a></li>
<li><a href="#">吳哥</a></li>
<li><a href="#">芽莊</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律賓</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文萊</a></li>
<li><a href="#">藍夢島</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班島</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">馬來西亞</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龍灣</a></li>
<li><a href="#">吳哥</a></li>
<li><a href="#">芽莊</a></li>
</ul>
</div>
<div class="tit">
<div class="name">印度尼西亞</div>
<ul>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律賓</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文萊</a></li>
<li><a href="#">藍夢島</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班島</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">馬來西亞</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龍灣</a></li>
<li><a href="#">吳哥</a></li>
<li><a href="#">芽莊</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="title two"><a href="#"><i></i>國內游</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
<div class="line"></div>
<div class="subitem">
<div class="inner">
<div class="tit tit1">
<div class="name">泰國</div>
<ul>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律賓</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文萊</a></li>
<li><a href="#">藍夢島</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班島</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">馬來西亞</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龍灣</a></li>
<li><a href="#">吳哥</a></li>
<li><a href="#">芽莊</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律賓</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文萊</a></li>
<li><a href="#">藍夢島</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班島</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">馬來西亞</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龍灣</a></li>
<li><a href="#">吳哥</a></li>
<li><a href="#">芽莊</a></li>
</ul>
</div>
<div class="tit">
<div class="name">印度尼西亞</div>
<ul>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律賓</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文萊</a></li>
<li><a href="#">藍夢島</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班島</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">馬來西亞</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龍灣</a></li>
<li><a href="#">吳哥</a></li>
<li><a href="#">芽莊</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//不引入jQuery，用原生代碼實現(xiàn)特效
// var a = document.getElementsByClassName("item");
// for(var i = 0 ; i < a.length ; i++){
// a[i].onmouseenter = function(e){
// this.className +=" "+"layer";
// }
// a[i].onmouseleave = function(e){
// this.className = this.className.replace(" layer","");
// }
// }
//引入jQuery，實現(xiàn)特效
$(".product_sort .bd .item").hover(function(){
$(this).addClass("layer");
},function(){
$(this).removeClass("layer");
});
</script>
</body>
</html>
靜態(tài)文件而已，代碼非常簡單，copy下來即可。需要注意的是，js代碼嵌入其中，其中用了兩個方法實現(xiàn)，原生js方法和引入jQuery方法實現(xiàn)。
CSS代碼：
*{
margin:0;
padding:0;
list-style: none;
text-decoration:none;
}
/*旅游產品分類*/
.product_sort{
margin:20px;
width:226px;
height:644px;
background:#fff url(../images/img_226x95.jpg) no-repeat left bottom;
border:solid 1px #3299fd;
position:relative;
z-index:90;
}
.product_sort .hd{
width:226px;
background:url(../images/img_226x40.jpg) no-repeat;
height:40px;
line-height:40px;
text-indent:15px;
font-size:15px;
font-weight:bold;
font-family:"微軟雅黑";
color:#fff;
}
.product_sort .bd{
padding-bottom:10px;
}
.product_sort .bd .item{
border-bottom:solid 1px #3299fd;
height:60px;
position:relative;
}
.product_sort .bd .item .title{
width:226px;
text-indent:43px;
height:30px;
overflow:hidden;
line-height:42px;
font-size:14px;
font-weight:bold;
color:#292929;
}
.product_sort .bd .item .title a{
color:#3299fd;
position:relative;
}
.product_sort .bd .item .title a i{
position:absolute;
background:url(../images/icon_nav.jpg) no-repeat;
}
.product_sort .bd .item .one a i{
width:19px;
height:19px;
background-position:0 0;
left:-25px;
top:-3px;
}
.product_sort .bd .item .two a i{
width:22px;
height:20px;
background-position:0 -51px;
left:-28px;
top:-5px;
}
.product_sort .bd .item .three a i{
width:31px;
height:23px;
background-position:0 -101px;
left:-34px;
top:-7px;
}
.product_sort .bd .item .four a i{
width:25px;
height:17px;
background-position:0 -156px;
left:-29px;
top:-3px;
}
.product_sort .bd .item .five a i{
width:28px;
height:17px;
background-position:0 -207px;
left:-33px;
top:-1px;
}
.product_sort .bd .item .six a i{
width:28px;
height:17px;
background-position:0 -259px;
left:-32px;
top:-3px;
}
.product_sort .bd .item .seven a i{
width:26px;
height:20px;
background-position:0 -309px;
left:-31px;
top:-6px;
}
.product_sort .bd .item .eight a i{
width:26px;
height:21px;
background-position:0 -360px;
left:-32px;
top:-7px;
}
.product_sort .bd .item .list{
width:210px;
padding-left:15px;
height:30px;
line-height:30px;
overflow:hidden;
}
.product_sort .bd .item .list a{
font-family:"微軟雅黑";
color:#333;
}
.product_sort .bd .item .list a:hover{
text-decoration:underline;
}
.product_sort .bd .item .arrow{
font-family:"微軟雅黑";
font-size:20px;
color:#c0d7f9;
position:absolute;
right:10px;
top:14px;
}
.product_sort .bd .item .line{
position:absolute;
right:-2px;
top:0px;
width:2px;
height:60px;
background-color:#fff;
z-index:95;
display:none;
}
.product_sort .bd .item .subitem{
display:none;
}
.product_sort .bd .layer .line{
display:block;
}
.product_sort .bd .layer .arrow{
display:none;
}
.product_sort .bd .layer .subitem{
width:731px;
background:#fff;
border:solid 1px #3299fd;
border-left:none;
font-family:"微軟雅黑";
position:absolute;
left:227px;
_left:228px;
top:-15px;
z-index:95;
min-height:60px;
height:auto!important;
height:60px;
padding:5px 10px 15px 10px;
display:block;
}
.product_sort .bd .layer .subitem .inner .tit{
font-size:12px;
text-align:left;
border-top:1px dashed #d7d7d7;
padding:5px 0;
}
.product_sort .bd .layer .subitem .inner .tit1{
border-top:none;
}
.product_sort .bd .layer .subitem .inner .tit .name{
display:block;
width:90px;
color:#3299fd;
cursor:pointer;
float:left;
padding-top:3px;
}
.product_sort .bd .layer .subitem .inner ul{
overflow:hidden;
zoom:1;
display:block;
margin-left:90px;
width:630px;
}
.product_sort .bd .layer .subitem .inner ul li{
float:left;
padding:0 8px;
height:25px;
}
.product_sort .bd .layer .subitem .inner ul li a{
color:#222;
display:block;
}
.product_sort .bd .layer .subitem .inner ul li a:hover{
color:#3299fd;
text-decoration:underline;
}
css代碼也很簡潔，放在一個叫index.css文件中，html中引入其即可。上面已經有全部代碼，copy加引入就可以跑動這個牛x的特效了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在jQuery1.5中使用deferred對象 著放大鏡看Promise
在那篇經典的關于jQuery1.5中Deferred使用方法介紹的文章中（譯文見這里），有下面一段描述2011-03-03
jQuery lazyLoad圖片延遲加載插件的優(yōu)化改造方法分享
jQuery lazyLoad.js插件 是一款基于jquery框架，可以“實現(xiàn)”圖片延遲加載的插件2013-08-08
jquery.validate 自定義驗證方法及validate相關參數(shù)
jquery.validate是一個基于jquery的非常優(yōu)秀的驗證框架，我們可以通過它迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法，而且對國際化也有非常好的支持，通過本文給大家介紹jquery.validate 自定義驗證方法及validate相關參數(shù)，需要的朋友一起學習吧2016-01-01
jQuery.validate 的正則驗證功能，包括手機號碼、電話號碼、郵政編碼、QQ號碼、IP地址、字母和數(shù)字、中文的驗證等2013-08-08
新浪網易的評論塊制作 因為 textarea里面不能放圖片，所以和新浪的做法一樣，選用iframe放內容，然后隱藏一個 textarea用于提交。2010-07-07
全選、全非選即取得被選中的值在日常開發(fā)應用中很廣泛，下面有個不錯的示例，大家可以感受下2013-11-11
這篇文章分享一款基于jQuery圖片預加載ydxLazyLoad.js代碼。這是一款基于ydxLazyLoad.js插件實現(xiàn)的圖片延遲加載特效，感興趣的小伙伴們可以參考一下2015-11-11
下面小編就為大家?guī)硪黄猨Query獲取this當前對象子元素對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
本篇文章主要是對JQuery的$和其它JS發(fā)生沖突的快速解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)儀表盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04