当前位置:  首页  >  PHP资讯  >  业界资讯

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

这篇文章主要为大家详细介绍了最常见的左侧分类菜单栏jQuery实现代码,仿京东、淘宝等各大类网站效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

先看效果:

这里写图片描述

一、先准备资料

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

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

icon_nav.jpg:

这里写图片描述

img_226x40.jpg:

这里写图片描述

img_226x95.jpg:

这里写图片描述

二、准备开发

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

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

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4