首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实战之仿淘宝商城左侧导航效果

Posted in Javascript onApril 12, 2011

希望对大家有用。
jQuery实战之仿淘宝商城左侧导航效果
下面是效果图：
效果实现基于jq的 .html()方法。大大简化了对DOM的操作。
下面是代码： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> 
<title>仿淘宝商城左侧导航效果t</title> 
<script src="jquery-1.4.2.min.js" type="text/javascript"> 
</script> 
<style type="text/css"> 
* { 
margin: 0px; 
padding: 0px; 
} 
ul{ 
list-style: none; 
} 
ul.nav li { 
cursor: pointer; 
width: 130px; 
height: 30px; 
text-align: center; 
border: 1px solid #A91319; 
line-height: 30px; 
margin: 4px auto; 
background: #FFF8F6 
} 
ul.nav li a { 
width: 130px; 
height: 30px; 
display: block; 
color: #A71F37; 
text-decoration: none; 
} 
ul.nav li a:hover { 
background: #A91319; 
width: 130px; 
height: 30px; 
display: block; 
color: #ffffff 
} 
div#showValue { 
border: 3px solid #A91319; background:#ffffff; width:400px; height:auto; padding-bottom:10px; 
} 
ul.brand_list{ overflow:hidden; width:350px;} 
ul.brand_list li{line-height:30px; height:auto;} 
ul.brand_list li.brand_name{ font-weight:bolder; width:100px; float:left; margin-left:10px; color:#A71F37; margin-right:5px;} 
ul.brand_list li.brand_content{ width:220px; float:right;} 
ul.brand_list li.brand_content a{color:#A71F37; text-decoration:none; } 
ul.brand_list li.brand_content span{ padding:0 3px; border-left:1px solid #cccccc; font-size:14px;} 

</style> 
</head> 
<body> 
<div id='guid' style=" width:200px;"> 
<ul class="nav" style=" border:none;"> 
<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 id="hdValue" style=" display:none; position:absolute; left:0px;"> 
<div> 
<div class="con_st"> 
<h3>品牌关键字1</h3> 
<div> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
</div> 
</div> 
</div> 
<div> 
<div class="con_st"> 
<h3>品牌关键字2</h3> 
<div> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
</div> 
</div> 
</div> 
<div> 
<h3>品牌关键字3</h3> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
</div> 
<div> 
<h3>品牌关键字4</h3> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
</div> 
<div> 
<h3>品牌关键字5</h3> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
<ul class="brand_list"> 
<li class="brand_name">大家电<b>></b></li> 
<li class="brand_content"> 
<span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span> 
</li> 
</ul> 
</div> 
</div> 
<div id="showValue" style=" z-index:22; display:none; position:fixed; top:-77px; left:130px; margin-left:20px; margin-top:100px;"> 
</div> 
<script type="text/javascript"> 
$(document).ready(function(){//加载DOM 
if (!$("#guid").is(":animated")) {//首先判断是否处于动画状态 
var lis = $("#guid ul.nav li"); 
//遍历文档树 
lis.each(function(i){ 
$(this).bind("mouseover", i, function(){ 
$("#showValue").show(); 
var hv = $("#hdValue").children().eq(i); 
$("#showValue").html(hv.html()); 
$("#showValue").bind("mouseover", function(){ 
$("#showValue").show(); 
}) 
}); 
}); 
//控制鼠标移除事件 
$("#guid,#showValue").mouseleave(function(){ 
$("#showValue").hide(); 
}); 
} 
}); 
</script> 
</body> 
</html>

以上就是全部代码，JQ的代码部分比较简单，所以就没写太多注释。
还请见谅

jQuery实战之仿淘宝商城左侧导航效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
jquery监控数据是否变化(修正版)
Apr 12 #Javascript
javascript学习笔记（九）javascript中的原型(prototype)及原型链的继承方式
Apr 12 #Javascript
javascript 学习笔记（八）javascript对象
Apr 12 #Javascript
jQuery的初始化与对象构建之浅析
Apr 12 #Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 #Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 #Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 #Javascript
most_common(1) 脚手架(2) el-table(1) SingleFlight(2) set(1) 并发(8) frozenset(1) pip(1) 字典(3) Next.js(1)
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
关于页面优化和伪静态
2009/10/11 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python collections模块实例讲解
2014/04/07 Python
python实现ping的方法
2015/07/06 Python
Python二分查找详解
2015/09/13 Python
解读python logging模块的使用方法
2018/04/17 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
大学生如何写自荐信
2014/01/08 职场文书
通信研究生自荐信
2014/02/01 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
整改报告格式
2014/11/06 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
给上级领导的感谢信
2015/01/22 职场文书
培养联系人考察意见
2015/06/01 职场文书
高三物理教学反思
2016/02/20 职场文书
Nginx隐藏式跳转（浏览器URL跳转后保持不变）
2022/04/07 Servers