JS-仿京东导航（JS版）
来源：互联网 发布：linux 防火墙配置 编辑：程序博客网 时间：2024/06/13 19:10
效果描述：相比前面的CSS版本，此版本做了很多优化和其他效果，比如文字悬浮和图片悬浮
具体代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分类导航一级菜单制作（JS版）</title> <style type="text/css"> body{ padding:0; font-size: 10px; } .topmenu{ display: block; width: 220px; border: 2px solid #e4393c; margin: 0; padding: 0; } .toptitle{ height: 40px; line-height: 40px; text-align: left; font-size: 11px; font-weight:bold; color: White; background: #e4393c; padding-left: 20px; } .topmenu li{ height: 30px; line-height: 30px; font-size: 11px; list-style-type: none; text-align: left; padding-left: 8px; z-index: 3; background-image: url(images/右箭头.jpg); background-repeat: no-repeat; background-position: right; } .topmenu li a{ text-decoration:none ; color: #313131; } .topmenu li a:hover{ text-decoration: underline; font-weight: bold; color: #e4393c; } .topmenu .lihover{/* 鼠标移动到上面时，应用的样式*/ background-image:none; border: 1px solid #DDD; border-right: 0; height: 60px; border-left: 4px solid #e4393c;//当鼠标放上去时左边边框变化 box-shadow:0 0 8px #DDD ;//IE -moz-box-shadow:0 0 8px #DDD;//firefox -webkit-box-shadow:0 0 8px #DDD;//chrome } .topmenu .lihover .submenu{/* 悬浮层应用的样式*/ display: block; } .topmenu .lihover span{/*白色小方框的样式 */ background: white; display: inline-block; z-index: 20; width: 20px; height: 60px; float: right; position: relative; } .topmenu .lihover b{ display: block; height: 30px; line-height: 30px; font-weight: normal; font-size: 10pt; } .submenu{ display: none; width: 715px; left: 220px; position: absolute; top: 40px; border: 1px solid #DDD; z-index: 4; background: white; box-shadow:0 0 8px #DDD ;//IE -moz-box-shadow:0 0 8px #DDD;//firefox -webkit-box-shadow:0 0 8px #DDD;//chrome } .leftdiv{ float: left; width: 490px; margin: 5px; } .rightdiv{ float: left; width: 200px; margin: 5px; } .leftdiv dl{ display: block; border-bottom: 1px solid #EEE; padding-bottom: 6px; overflow: hidden; } .leftdiv dl dt{ display: block; float: left; width: 60px; text-align: right; height: 22px; line-height: 22px; padding-right: 6px; } .leftdiv dl dt a{ color: #e4393c; font-weight: bold; text-decoration: underline; font-size: 10pt; } .leftdiv dl dd{ display: block; overflow: hidden; } .leftdiv dl dd a{ display: block; float: left; border-left: 1px solid #CCC; color: #737373; font-size: 9pt; padding: 0 8px; height: 14px; line-height: 14px; margin: 4px 0; } .rightdiv dl dd{ margin: 3px 0; } .rightdiv dl dt{ color: #e4393c; font-weight: bold; font-size: 10pt; } .rightdiv dl dd a{ font-size: 9pt; color: #737373; line-height: 22px; } .rightdiv dl dd a:hover{ color: #737373; font-weight: normal; } .topmenu li b{ display: none; } /*悬浮图片溢出效果*/ .rightPic{ position: relative; right: -35px; bottom: -20px; } </style></head><body><script> window.onload = function () { var Lis = document.getElementsByTagName("li"); for (i = 0;i<Lis.length;i++){ Lis[i].i = i; Lis[i].onmouseover = function () { this.className = "lihover"; var h0 = (this.i - 1)*30 +42; var y = this.getElementsByTagName("div")[0].offsetHeight; var h = this.getElementsByTagName("div")[0].style.top; if(h<h0){/* 当悬浮层内容很少的时候，让它不在顶部*/ this.getElementsByTagName("div")[0].style.top = h0 + "px"; } if( y>550){/* 当悬浮层内容太多，下面显示不完，让它向上显示*/ this.getElementsByTagName("div")[0].style.top ="3px"; } } Lis[i].onmouseout = function () { this.className =""; } } }</script><ul class="topmenu"> <div class="toptitle"> 全部商品分类 </div> <li><a href="#">图书、音像、数字产品</a><span></span> <!--仿苏宁悬浮文字 --> <b> <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> </b> <div class="submenu"> <div class="leftdiv"> <dl> <dt><a href="#">电子书</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> <dl> <dt><a href="#">电子书</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> <dl> <dt><a href="#">电子书</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> </div> <div class="rightdiv"> <dl> <dd> <a href="#"> <img src="images/1.jpg" width="194" height="70"> </a> </dd> <dd> <a href="#"> <img src="images/2.png" width="194" height="70"> </a> </dd> </dl> <dl> <dt>推荐品牌</dt> <dd> <a href="#">美的官方···</a> </dd> <dd> <a href="#">美的官方···</a> </dd> <dd> <a href="#">美的官方···</a> </dd> <dd> <a href="#">美的官方···</a> </dd> </dl> <!--悬浮图片 --> <img class="rightPic" src="images/4.png"> </div> </div> </li> <li><a href="#">家用电器</a><span></span> <div class="submenu"> <div class="leftdiv"> <dl> <dt><a href="#">111</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> <dl> <dt><a href="#">222</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> <dl> <dt><a href="#">333</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> </div> <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><span></span> <div class="submenu"> <div class="leftdiv"> <dl> <dt><a href="#">444</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> <dl> <dt><a href="#">555</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> <dl> <dt><a href="#">666</a> </dt> <dd> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a> <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a> </dd> </dl> </div> <li><a href="#">母婴、玩具乐器</a></li> <li><a href="#">食品饮料、酒类、生鲜</a></li> <li><a href="#">营养保健</a></li></ul></body></html>阅读全文
0 0
- JS-仿京东导航（JS版）
- js导航
- 导航js
- 导航js
- JS导航
- JS-实现导航栏悬停（续）
- JS排他思想（实现导航栏）
- js+div+css导航
- JS导航条显隐例子
- js 无限下拉导航
- js 折叠导航菜单
- js隐藏导航菜单
- Js 导航菜单
- js导航栏
- 简易JS菜单导航
- JS导航栏
- js导航条
- js切换导航
- C/S 与 B/S 的认识
- make error 'No space left on device'
- 学习笔记：设计冲刺
- HttpClient实现网络请求
- Java / Android 基于Http的多线程下载的实现
- JS-仿京东导航（JS版）
- 哈希表查找(Java)
- Multiple dex files define Lorg/xmlpull/v1/XmlPullParser
- 基于RPGMakerMV的JavaScript基础-1
- linux 压缩命令集合
- php 异步登陆和退出案列
- 大小端字节序的判断
- highcharts使用之使用数组数据绑定数据
- AndroidStudio SVN按装好后 单击鼠标右键 报错
