网页特效：仿京东商城左侧商品分类导航

演示地址：http://www.iiwnet.com/js_menu/976.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>【荐】DIV+CSS仿360buy京东商城导航条 - www.iiwnet.com</title>
<style type="text/css">
.my_left_category{
width:150px;
font-size:12px;
font-family:arial,sans-serif;
letter-spacing:2px;
}
.my_left_category h1{
background-image:url(http://www.iiwnet.com/images/jstx/spring_06.gif);
height:20px;
background-repeat:no-repeat;
font-size:14px;
font-weight:bold;
padding-left:15px;
padding-top:8px;
margin:0px;
color:#FFF;
}
.my_left_category .my_left_cat_list{
width:148px;
border-color:#b60134;
border-style:solid;
border-width:0px 1px 1px 1px;
line-height:13.5pt;
}
.my_left_category .my_left_cat_list h2 {
margin:0px;
padding:3px 5px 0px 9px;
}
.my_left_category .my_left_cat_list h2 a {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .my_left_cat_list h2 a:hover {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .h2_cat{
width:148px;
height:26px;
background-image:url(http://www.iiwnet.com/images/jstx/my_menubg.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category .h2_cat_1{
width:148px;
height:26px;
background-image:url(http://www.iiwnet.com/images/jstx/my_menubg.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category a{
font:12px;
text-decoration:none;
color:#333333;
}
.my_left_category a:hover{
text-decoration:underline;
color:#ff3333;
}
.my_left_category h3{
margin:0px;
padding:0px;
height:26px;
font-size:12px;
font-weight:normal;
display:block;
padding-left:8px;
}
.my_left_category h3 span{color:#999999; width:145px; float:right;}
.my_left_category h3 a{ line-height:26px;}
.my_left_category .h3_cat{
display:none;
width:204px;
position:absolute;
left:123px;
margin-top:-26px;
cursor:auto;
}
.my_left_category .shadow{
position:inherit;
background:url(http://www.iiwnet.com/images/jstx/shadow_04.gif) left top;
width:204px;
}
.my_left_category .shadow_border{
position:inherit;
width:200px;
border:1px solid #959595; margin-top:1px;
border-left-width:0px;
background:url(http://www.iiwnet.com/images/jstx/shadow_border.gif) no-repeat 0px 21px;
background-color:#ffffff;
margin-bottom:3px
}
.my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
.my_left_category .shadow_border ul li {
list-style:none;
padding-left:10px;
background-image:url(http://www.iiwnet.com/images/jstx/my_cat_sub_menu_dot.gif);
background-repeat:no-repeat;
background-position:0px 8px;
float:left;
width:75px;
height:26px;
overflow:hidden;
letter-spacing:0px;
}
.my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
.my_left_category .active_cat h3 { font-weight:bold}
.my_left_category .active_cat h3 span{ display:none;}
.my_left_category .active_cat div{display:block;}
</style>

</head>
<body>
<div class="my_left_category">
<h1>分类导航</h1>
<div class="my_left_cat_list">
<h2><a href="#">按网站类别</a></h2>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">企业建站</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</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="#">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">韩国男装</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</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="#">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">网页代码站</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">源码下载</a></li>
<li><a href="#">最新更新</a></li>
<li><a href="#">下载排行</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">DELPHI</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- again -->
<h2><a href="#">按品牌选货</a></h2>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</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="#">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">网站建设</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</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="#">LOGO设计</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="#">LOGO设计</a></li>
<li><a href="#">网站设计</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">网站程序</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">ASP.Net</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat_1" οnmοuseοver="this.className='h2_cat_1 active_cat'" οnmοuseοut="this.className='h2_cat_1'">
<h3><a href="#">其他网站</a></h3>
</div>
<!-- again -->
<h2><a href="#">按价格选货</a></h2>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">低端价位</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">50元以下</a></li>
<li><a href="#">50-100元</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
<h3><a href="#">中高端价位</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">100-150元</a></li>
<li><a href="#">150-200元</a></li>
<li><a href="#">200-300元</a></li>
<li><a href="#">300元以上</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- again -->
<h2><a href="#">超值特价区</a></h2>
<h2><a href="#">现货区</a></h2>
<!--测试复制end-->
</div>

</div>
</html>
以上特效由扣自： 淘宝返利网
同样都是购物，为啥不选择有返利的呢？
牛淘网官网： http://www.niutw.com

转载于:https://my.oschina.net/xixios/blog/83027

仿京东商城左侧商品分类导航-JS网页特效相关推荐

  1. HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)

    HTML期末大作业~仿京东商城(HTML+CSS+JavaScript) 这次网页主要以(HTML+CSS+JavaScript)制作登录 注册 首页 购物 商品详情 ,等多个页面~特别适合web期末 ...

  2. 楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航

    jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...

  3. 手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效

    jQuery仿京东商城手机端商品分类滑动切换特效 一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...

  4. HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript...

    HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码 学生网页课程设计期末作业下载 商城大学生网页设计制作成 临近期末, ...

  5. HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript

    HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码 学生网页课程设计期末作业下载 商城大学生网页设计制作成 临近期末, ...

  6. 练习：京东商城左侧导航栏_1

    练习:京东商城左侧导航栏,运用了css的简单布局,以及当鼠标移到li标签时有一个背景效果,练习源文件下面有链接. 目录 前言 一.练习 1.效果图: 2.文件目录: 二.效果实现 1.源码: 2.运行 ...

  7. 京东商城的商品分类代码

    京东商城的商品分类–代码 效果图: 该效果CSS可以拼接出来,但是出于CSS样式方法运用"hover"属性过多:产生浏览器不兼容问题.所以,该方法不值得提倡! JS方法实现,原理: ...

  8. 基于javaweb仿京东商城管理系统的设计与实现(含论文和程序源码及数据库文件)

    网上购物商城系统以弥补传统购物方式的弊端.在目前的商城里,如果采用网上商城方式,用户购物时就不需要到店里面排队,这样不仅能实时地了解商品的特色,而且方便了顾客,同时也减轻了商城的服务压力.随着WLAN ...

  9. ionic3 php 电商视频,ionic3仿京东商城源码

    [实例简介] ionic3仿京东商城源码,非常好用的ionic3学习参考资料. [实例截图] [核心代码] ionic3仿京东商城源码 ├── README.md ├── config.xml ├── ...

最新文章

  1. UVA122 树的层次遍历 Trees on the level（两种方法详解）
  2. c语言程序既可以编译执行也可以解释执行,2016年山东农业大学信息科学与工程学院C语言程序设计(同等学力加试)复试笔试仿真模拟题...
  3. 吴恩达等ML大神对话：如何用机器学习应对气候变化 | NeurIPS 2019
  4. 2022，普平数据中心招聘来啦！
  5. php置顶文章,zblogphp调用置顶文章的教程
  6. HDFS Federation机制
  7. 如何快速成长为技术大牛？阿里资深技术专家的经验告诉你
  8. RHEL7.X双网卡绑定
  9. html表头固定原理,html Table 表头固定的实现
  10. Python3 OpenCV 视频转字符动画
  11. 阿里云服务器ping不通github或其他域名
  12. 微软拼音输入法自定义短语
  13. 《通信原理》awgn信道仿真
  14. 成都启英泰伦科技有限公司
  15. php 系统分隔符,php脚本由哪个分隔符包围
  16. python新版个人所得税_Python 小案例 计算个人所得税
  17. wer 流程图编程_孩子学完各个阶段的编程课能够参加哪些比赛?
  18. Blockchain for Internet of Energy management: Review, solutions, and challenges
  19. 情感分类---未解决
  20. 教你如何在wordpress中在你的网站页脚添加管局备案号

热门文章

  1. 机器学习十大算法的简单介绍
  2. 学校官网和后台网页及心得
  3. 单片机MCU51系列RTOS多任务超微操作系统精髓 简单实现 汇编及C语言混合 keil9.0工程源码
  4. 林大计算机学子第一篇博客
  5. OpenCV读出来的是按BGR存储的，如何转变成传统的RGB格式
  6. 基于随机森林算法的糖尿病数据集回归
  7. 度量衡计算工具_中国古代度量衡领先世界的计量工具
  8. 痞子衡嵌入式：在i.MXRT启动头FDCB里使能串行NOR Flash的QPI/OPI模式
  9. tensorflow框架到caffe框架的模型转换
  10. 模拟CMOS集成电路设计入门学习（1）