首页
所有分类
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 相关文章推荐
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
javascript实现点击小图显示大图
Nov 29 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
instantclient(1) B+树(2) ICF-5900W(2) 存储过程(3) Fragment(1) EventBus(1) 忘记密码(1) muduo(1) TcpServer(1) pt-archiver(1)
You might like
PHP自动生成表单代码分享
2015/06/19 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
python的即时标记项目练习笔记
2014/09/18 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python读取和保存视频文件
2018/04/16 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python DataFrame 取差集实例
2019/01/30 Python
Python实现名片管理系统
2020/02/14 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
没编程基础可以学python吗
2020/06/17 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
陈胜吴广起义口号
2014/06/20 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
预备党员入党感想
2015/08/10 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python