狼山资源网

最常见的左侧分类菜单栏jQuery实现代码
网络编程 2024/11/13 佚名
3 2

打开京东、淘宝等各大类网站，最常见的就是左侧分类菜单栏了，既然这么常见的功能，那么应该怎么去实现它呢，接下来，我会在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">&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="/UploadFiles/2021-04-02/jquery.js">


静态文件而已，代码非常简单，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左侧分类菜单栏,jQuery左侧分类导航,bootstrap左侧菜单栏,jQuery分类菜单栏
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com

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

暂无“最常见的左侧分类菜单栏jQuery实现代码”评论...
www.pvsay.com 狼山资源网
29,905影音资源
44,626技术资源
11,817软件资源
578,645站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
狼山资源网 Copyright www.pvsay.com