首页
所有分类
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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
jquery键盘事件介绍
Jan 31 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
jquery实现聊天机器人
Feb 08 jQuery
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
i7 6700(1) WR-800F(1) 胆机(1) 对讲机(1) DE1102(1) R71E(1) GTX1660(1) React(6) R72E(1) ICOM(2)
You might like
PHP与SQL语句常用大全
2016/12/10 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python中操作MySQL入门实例
2015/02/08 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python csv文件记录流程代码解析
2020/07/16 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
Airbnb爱彼迎官网：成为爱彼迎房东，赚取收入
2019/03/14 全球购物
世界上最受欢迎的钓鱼诱饵：Rapala
2019/05/02 全球购物
Joseph官网：英国小众奢侈品牌
2019/05/17 全球购物
卡拉威高尔夫官方网站：Callaway Golf
2020/09/16 全球购物
勾股定理课后反思
2014/04/26 职场文书
管理工程专业求职信
2014/08/10 职场文书
合作协议书模板2014
2014/09/26 职场文书
预备党员转正意见
2015/06/01 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
python区块链持久化和命令行接口实现简版
2022/05/25 Python