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

先看效果:

这里写图片描述

一、先准备资料

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

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

icon_nav.jpg:

这里写图片描述

img_226x40.jpg:

这里写图片描述

img_226x95.jpg:

这里写图片描述

二、准备开发

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">&gt;</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">&gt;</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的特效了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持Devmax。

最常见的左侧分类菜单栏jQuery实现代码的更多相关文章

  1. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码

    这篇文章主要介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. 使用layui实现左侧菜单栏及动态操作tab项的方法

    这篇文章主要介绍了使用layui实现左侧菜单栏及动态操作tab项的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. xcode – 使用Storyboard参考AppDelegate中的主要NSWindow?

    我正在尝试在AppDelegate中为我的应用程序的主窗口设置一个插座,然后在InterfaceBuilder中连接它.我轻松地在AppDelegate中创建插座:但是,在界面构建器中,我无法将引用插座连接到AppDelegate.相反,我只能将它连接到WindowController,我希望这张图片显示:第一个对象是WindowController,第二个对象是FirstResponder,但缺

  5. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  6. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  7. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  8. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  9. 设置焦点到输入框和显示Android键盘使用jquery手机在pageshow

    我正在设置焦点到输入框,并显示Android键盘使用jquery手机网页显示.我从Web上尝试过很多选项.但是没有一个在模拟器和移动设备中都能按预期工作.这是代码:查找屏幕截图以供参考请咨询…解决方法对我有用的解决方案

  10. android – 如何在焦点()上以编程方式隐藏jquery mobile中的键盘

    我想在Focus()上隐藏键盘,但是当$(“.ui-input-text”).focus();它会自动打开键盘.我只是想隐藏在特定的屏幕上,我用document.activeElement.blur()测试;但它也没有关注()输入.解决方法提交表单时,iOS键盘可能不会自动关闭.这是一个非常实用的问题,因为不应要求用户手动关闭键盘,否则他们不会期望需要这样做.可以通过调用document.acti

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部