首页 / JQUERY / jQuery实战之仿淘宝商城左侧导航效果

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实战之仿淘宝商城左侧导航效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9870字，纯文字阅读大概需要15分钟。

内容图文

希望对大家有用。

下面是效果图：
效果实现基于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实战之仿淘宝商城左侧导航效果全部内容，希望文章能够帮你解决jQuery实战之仿淘宝商城左侧导航效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/369486.html

来源：【匿名】

【上一篇】强大的jquery插件jqeuryUI做网页对话框效果！简单【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery实战之仿淘宝商城左侧导航效果】教程文章相关的互联网学习教程文章

jquery 效果笔记【代码】【图】

jquery效果显示隐藏 show() 语法 show([speed,[easing],[fn]]) 参数可以省略,无动画直接使用 hide() toggle() 滑动 slideDown() slideUp() slideToggle() 淡入淡出 fadeln() fadeOut() fadeToggle() fadeTo() 停止排队 stop()方法必须写在动画前面 stop()<button>显示/下拉/淡入</button><button>隐藏/上拉/淡出</button><button>切换</button><button>修改</button...

jQuery效果【代码】

1.jQuery的隐藏显示：$(selector).hide(speed,callback);$(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。也可以：使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：2.jQuery的淡入淡出效果有下面四种 fade 方法：fadeIn():用于淡入已隐藏的元素。即使其出现$(s...

jQuery常用交互效果【代码】

一、点击div控制另一div的显示和隐藏$(".con").bind("click",function(){var flag=$(".main").is(":hidden");if(flag){$(".main").addClass(‘animated fadeIn‘).show();}else{$(".main").removeClass(‘animated fadeIn‘).hide();} });jQuery 选择器(:hidden)详解:元素可以被认为是隐藏的几个情况:他们的CSS display值是none。他们是type="hidden"的表单元素。它们的宽度和高度都显式设置为0。一个祖先元素是隐藏的，因此该元素...

JQuery效果

JQuery可以创建显示、隐藏、切换、滑动以及自定义动画等效果。1.hide()/show()　　hide()/show()是最基础也是用的最多的一种效果，它用来控制元素的隐藏与显示。　　下面是还没有进行hide()/show()操作的示例：<style>　　.demo {　　　　　　 margin:100px auto;　　　　　　width:600px; height:320px;　　　　　　 background:#ededed;　　　　　　border:1px dotted #ff0000;　　　　　　}　　.fl {　　　　　　 width:280px;　...

JQuery EasyUi之界面设计——前言与界面效果（一）【图】

如果冯巩的开场白是“观众朋友们，我想死你们了”，那么我的开场白是“最近一直很忙，很久没有发文了”。前面说过了EXT.NET，这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢？主要有以下几点：轻量级。基本的组件都用，即“麻雀虽小五脏俱全”。使用简洁方便，比如支持html+js。可扩展性。可维护性。世上没有完美的产品，而且其对IE6的兼容性还存在一些问题，但相比extjs，其还是很方便阅读和修改的。简单性。这既是优...

动画效果详情请看 jQuery api 动画收放 slideUp slideDown 通过id class 来设置 jQuery实现效果【代码】

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #boss{ margin:auto ; width: 500px; background-color:#C48698; border: 2px; } #boss ul li { list-style: none; } #boss ul li div { display: none...

JQuery效果【代码】

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 4<head> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6<title>effects</title> 7<script src="jquery.js"></script> 8<link rel="stylesheet" href="gettysburg.css" type="text/css"...

js网页雪花效果jquery插件

1，使用前先导入jquery类库 2，导入雪花特效js类库 jq.snow.min.js 3，初始化代码 <script>$(function(){$.fn.snow({minSize : 5, //雪花的最小尺寸默认5maxSize : 40, //雪花的最大尺寸默认40newOn : 200, //雪花出现的频率这个数值越小雪花越多默认200showStyle : 0, //雪花样式1~17，默认是0flakeColor : ‘#FFFFFF‘, //雪花颜色默认白色 #FFFFFFspeed : 15 //雪花下降速度默认15}...

jquery实现左侧菜单效果【代码】【图】

html<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>左侧菜单</title><script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script><script type="text/javascript" src="js/test.js" ></script><style>* { padding:0; margin:0; }body { padding:100px; font:12px "宋体"; }.box { width:500px; border-bottom:1px solid #CCC; }.box h1 { height:30px; line-height:30px; padding:0 10px; font-size:1...

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果【图】

滑动手势在移动设备是很流行的，在移动设备中滑动翻页中很常见虽然这个功能可以在jQueryMobile中实现，但是个人与之前写的《【jQuery】论手机浏览器中拖拽动作的艰难性》（点击打开链接）中的观点一直，由于这是在手机浏览器中浏览，而不是安卓的一个独立APP，所以不要经常除点击以外的移动设备手势，以免跟手机浏览器与手机系统本身的手势发生冲突。那么，使用jQueryMobile实现滑动翻页的效果到底怎么做呢？一、基本目标在手机浏览...

上卷下拉效果（jQuery）【代码】

1jQuery中下拉动画slideDown对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。之前学过了show方法，show方法在显示的过程中也可以有动画，但是.show()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideDown方法.slideDown()：用滑动动画显示一个匹配元素.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式常见...

【jQuery】使用JQ来编写面板的淡入淡出效果【图】

本文与上一篇的《【jQuery】使用JQ来编写最主要的淡入淡出效果》（点击打开链接）为姊妹篇。但上一篇仅仅是对文本的基本控制，本篇则是对面板元素进行控制。尽管功能上很类似，可是所用到的控制函数是不同的，因此有必要进行说明。实现了点击一个面板来控制还有一个面板。而且对显示与隐藏速度进行了控制。一、基本目标网页中有两个面板一个button，点击上面板，则可以使以下在显示/隐藏之间来回切换。点击下方的三个button。可以分...

jquery实现"跳到底部"，"回到顶部"效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery实现"跳到底部"，"回到顶部"效果(类似锚)</title><script src="jquery-1.4.4.min.js" type="text/javascript"></script><script type="text/javascript"> jQue...

jQuery 效果 - 滑动【代码】

jQuery 效果 - 滑动jQuery 滑动方法可使元素上下滑动。实例jQuery slideDown() 放下演示 jQuery slideDown() 方法。jQuery slideUp() 收起演示 jQuery slideUp() 方法。jQuery slideToggle() 放下收起开关演示 jQuery slideToggle() 方法。jQuery 滑动方法通过 jQuery，您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法：slideDown()slideUp()slideToggle()jQuery slideDown() 方法jQuery slideDown() 方法用于向下滑动元...

jQuery实现轮播图效果【代码】

任务实现：用jQuery实现轮播图。来自瓶子啊之小白，欢迎来访，欢迎指导。相信大家从事前端的开发者初级就是轮播图，首先我用jquery写了一个，第二篇我会用原生JavaScript给大家展示。其原理是一样的，只不过jquery封住好了一些属性和方法。获取节点和实现效果就比较方便快捷了。下面是展示代码和介绍：html部分代码：<div class="slideshow"><div class="btn"><span class="last-img"><</span><span class="next-img">></span></di...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / jQuery实战之仿淘宝商城左侧导航效果

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery实战之仿淘宝商城左侧导航效果】教程文章相关的互联网学习教程文章

jquery 效果笔记【代码】【图】

jQuery效果【代码】

jQuery常用交互效果【代码】

JQuery效果

JQuery EasyUi之界面设计——前言与界面效果（一）【图】

动画效果详情请看 jQuery api 动画收放 slideUp slideDown 通过id class 来设置 jQuery实现效果【代码】

JQuery效果【代码】

js网页雪花效果jquery插件

jquery实现左侧菜单效果【代码】【图】

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果【图】

上卷下拉效果（jQuery）【代码】

【jQuery】使用JQ来编写面板的淡入淡出效果【图】

jquery实现"跳到底部"，"回到顶部"效果

jQuery 效果 - 滑动【代码】

jQuery实现轮播图效果【代码】

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程