首页
所有分类
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 相关文章推荐
javascript RadioButtonList获取选中值
Apr 09 Javascript
Prototype String对象 学习
Jul 19 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
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
find(1) greenlet(1) list(1) zip(1) Coroutine(1) gevent(1) csv(4) pytest(3) 进销存(1) enumerate(1)
You might like
改造一台复古桌面收音机
2021/03/02 无线电
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
基于php编程规范(详解)
2017/08/17 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
浅析js封装和作用域
2013/07/09 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
JS实现简单短信验证码界面
2017/08/07 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
详解python读取image
2019/04/03 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
网站编辑求职信
2013/10/17 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
网络技术专业求职信
2014/07/13 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
职位证明模板
2015/06/23 职场文书