首页
所有分类
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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
js实现带有动画的返回顶部
Aug 09 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 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
LINUX面试题(83) Oracle面试题(81) 软件测试工程师面试题(53) 网络工程师面试题(96) Android面试题(6) 软件工程师面试题(40) C#面试题(90) DB面试题(126) EJB面试题(46) .NET面试题(131)
You might like
PHP个人网站架设连环讲(三)
2006/10/09 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Python3读取zip文件信息的方法
2015/05/22 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python梯度下降法的简单示例
2018/08/31 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Onzie官网：美国时尚瑜伽品牌
2019/08/21 全球购物
绿色城市实施方案
2014/03/19 职场文书
六年级学生评语
2014/04/22 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
化工专业自荐书
2014/06/16 职场文书
白酒营销策划方案
2014/08/17 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书