首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

最常见的左侧分类菜单栏jQuery实现代码

Posted in Javascript onNovember 28, 2016

打开京东、淘宝等各大类网站，最常见的就是左侧分类菜单栏了，既然这么常见的功能，那么应该怎么去实现它呢，接下来，我会在js中介绍两种实现方式，一种是引入jQuery的实现方式，一种是不引入jQuery的原生js的实现方式~~

先看效果：

最常见的左侧分类菜单栏jQuery实现代码

一、先准备资料

1）如果你们是用jQuery来开发网站的，肯定先要准备jQuery.js呀，这个百度一搜就有。不用jQuery开发的，可以忽略此步骤

2）准备一些图片，鼠标右键 > 图片另存为就可以保存

icon_nav.jpg：

最常见的左侧分类菜单栏jQuery实现代码

img_226x40.jpg：

最常见的左侧分类菜单栏jQuery实现代码

img_226x95.jpg：

最常见的左侧分类菜单栏jQuery实现代码

二、准备开发

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，用原生代码实现特效
// 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，实现特效
$(".product_sort .bd .item").hover(function(){
  $(this).addClass("layer");
},function(){
  $(this).removeClass("layer");
});

</script>
</body>
</html>

静态文件而已，代码非常简单，copy下来即可。需要注意的是，js代码嵌入其中，其中用了两个方法实现，原生js方法和引入jQuery方法实现。

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的特效了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

最常见的左侧分类菜单栏jQuery实现代码

- Author -

我就是三冰

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
如何快速上手Vuex
Feb 14 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
JS实现页面跳转参数不丢失的方法
Nov 28 #Javascript
String字符串截取的四种方式总结
Nov 28 #Javascript
localStorage实现便签小程序
Nov 28 #Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 #Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 #Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 #Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 #Javascript
指针(1) DFA(1) linux(15) 切片(1) 结构体(1) pygame(3) pyqt5(3) Slice(1) random(1) pycharm(6)
You might like
PHP新手上路（九）
2006/10/09 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP之header函数详解
2021/03/02 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
建筑工程毕业生自我鉴定
2014/01/14 职场文书
《称象》教学反思
2014/04/25 职场文书
2015年暑假工作总结
2015/07/13 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers