首页
所有分类
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动态加载select下拉框示例代码
Dec 10 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
jquery手风琴特效插件
Feb 04 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
JS实现在线ps功能详解
Jul 31 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
波段(1) AngularJS(2) 西索(1) 申请书(21) explain(2) 实用文书(952) 城市猎人(1) HAM-2000(1) 文书(291) 观后感(479)
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP 文件上传功能实现代码
2009/06/24 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP实现计算器小功能
2020/08/28 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
室内设计自我鉴定
2013/10/15 职场文书
经典促销广告词大全
2014/03/19 职场文书
品牌服务方案
2014/06/03 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
python开发人人对战的五子棋小游戏
2022/05/02 Python