jquery二级导航
效果图
直接放代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cat</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/cat.css">
</head>
<body>
<div class="content">
<div class="container">
<div id="cat" class="cat">
<a href="#" class="cat-title"><i class="cart-icon">#</i>商品分类</a>
<div class="cat-item dropdown" data-active="cat" data-load="../js/cat-1.json">
<div class="dropdown-toggle">
<a href="#" class="cat-item-link">家用电器</a>
<span class="dropdown-arrow cat-arrow">></span>
</div>
<div class="dropdown-list">
<div class="dropdown-loading"></div>
</div>
</div>
<div class="cat-item dropdown" data-active="cat" data-load="../js/cat-2.json">
<div class="dropdown-toggle">
<a href="#" class="cat-item-link">手机、运营商、数码</a>
<span class="dropdown-arrow cat-arrow">></span>
</div>
<div class="dropdown-list">
<div class="dropdown-loading"></div>
</div>
</div>
<div class="cat-item dropdown" data-active="cat" data-load="../js/cat-3.json">
<div class="dropdown-toggle">
<a href="#" class="cat-item-link">电脑、办公</a>
<span class="dropdown-arrow cat-arrow">></span>
</div>
<div class="dropdown-list">
<div class="dropdown-loading"></div>
</div>
</div>
<div class="cat-item dropdown" data-active="cat" data-load="../js/cat-4.json">
<div class="dropdown-toggle">
<a href="#" class="cat-item-link">家居、家具、家装、厨具</a>
<span class="dropdown-arrow cat-arrow">></span>
</div>
<div class="dropdown-list">
<div class="dropdown-loading"></div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showhide.js"></script>
<script src="../js/dropdown.js"></script>
<script src="../js/cat.js"></script>
</body>
</html>
base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
cat.css
/*公共样式 */
.container{
width:1200px;
margin:0 auto;
}
.link{
color:#4d555d;
}
a.link:hover{
color:#f01414;
}
.fl{
float:left;
}
.fr{
float:right;
}
/*提取出过渡样式，可公用*/
.transition{
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
/*文字隐藏*/
.text-hidden{
text-indent:-9999px;
overflow:hidden;
}
/*文字溢出省略显示*/
.text-ellipsis{
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
} /*dropdown下拉组件*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index:;
}
.dropdown-arrow{
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
line-height:;/*否则图标字体会继承父元素的line-height属性，占据过多空间*/
}
.dropdown-list{
display: none;
position: absolute;
z-index:;
}
.dropdown-left{
left:;
right:auto;
}
.dropdown-right{
right:;
left:auto;
}
.dropdown-loading{
width:32px;
height:32px;
background:url(../img/loading.gif) no-repeat;
margin:20px;
} /*showhide*/
.fadeOut{
opacity:;
visibility: hidden;
}
.slideUpDownCollapse{
height:0 !important;/*避免因为优先级不够而无法生效*/
padding-top:0 !important;
padding-bottom:0 !important;
}
.slideLeftRightCollapse{
width:0 !important;/*避免因为优先级不够而无法生效*/
padding-left:0 !important;
padding-right:0 !important;
} /*侧导航*/
.cat{
width:209px;
height:566px;
background-color:#f01414;
position: absolute;
top: -54px;
z-index:;
}
.cat-title{
display: inline-block;
width:165px;
height:54px;
line-height:54px;
color:#fff;
font-size:14px;
padding:0 22px;
background-color:#c81414;
}
.cart-icon{
color:#fff;
font-style:normal;
font-size:18px;
margin-right:8px;
}
.cat-item{
height:37px;
line-height: 37px;
padding-left:18px;
color:#fff;
border-left:1px solid #f01414;
border-right:1px solid #f01414;
position: static;/*覆盖掉之前的relative定位，使右边list相对于整个大容器进行顶部对齐*/
}
.cat-arrow{
position: absolute;
right: 20px;
top: 9px;
}
.cat-item-link{
color:#fff;
}
.cat .dropdown-loading{
margin:220px auto 0;
}
.cat .dropdown-list{
position: absolute;
left:209px;
top:54px;
background:#fff;
width:500px;
box-shadow:0 0 5px rgba(0,0,0,.2);
padding:20px;
height:472px;
overflow:hidden;
}
.dropdown-list-item{
width:500px !important;
display: block;
margin:24px 0;
line-height:20px;
}
.dropdown-list-item-title{
display: block;
float:left;
width:84px;
padding-right:16px;
border-right:1px solid #333;
text-align:right;
font-weight:bold;
}
.dropdown-list-item-txt{
display: inline-block;
padding-left:15px;
width:380px;
}
.dropdown-list-item-txt a{
margin-right:16px;
display: inline-block;/*否则内联元素换行时文字会被拆开*/
}
/*激活样式*/
.cat-active.cat-item{
background-color:#fff;
color:#f01414;
}
.cat-active .cat-item-link{
color:#f01414;
}
.cat-active .dropdown-list{
display:block;
}
jquery.js
transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html
showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html
dropdown.js https://www.cnblogs.com/chenyingying0/p/12363739.html
cat.js
// 不要暴露在全局，使用匿名函数自执行
(function($){ "use strict"; //cat
$("#cat").find(".dropdown").on("dropdown-show",function(e){
loadOnce($(this),buildCatItem);
}).dropdown({
css3:true,
js:true,
animation:"slideLeftRight"
});
//创建cat的item结构
function buildCatItem($elem,data){
var list=$elem.find(".dropdown-list");
var html=""; if(data.length===0) return;
html=``; for(var i=0;i<data.length;i++){
html+=`<dl class="dropdown-list-item">
<dt class="dropdown-list-item-title">
<a href="#">`+data[i].title+`</a>
</dt>
<dd class="dropdown-list-item-txt">`;
for(var j=0;j<data[i].items.length;j++){
html+=`<a href="#">`+data[i].items[j]+`</a>`;
}
html+=`</dd></dl>`; } list.html(html);
} //加载一次数据
function loadOnce($elem,success){
var dataLoad=$elem.data("load"); if(!dataLoad) return; if(!$elem.data("loaded")){
$elem.data("loaded",true); $.getJSON(dataLoad).done(function(data){
success($elem,data);
}).fail(function(){
$elem.data("loaded",false);
});
}
} })(jQuery);
jquery二级导航的更多相关文章
- 分享21个基于jquery菜单导航的效果
jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...
- 一款jquery编写图文下拉二级导航菜单特效
一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery垂直二级导航菜单代码
http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航. HTML <div id="my_menu" class=&qu ...
- 用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素. 3通过使用show()方法来显示HTML元素. 4通过 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- 二级导航内容均分--jquery
这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下. 背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制. 原理: 1.把各个二级 ...
- jQuery 顶部导航尾随滚动，固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- jquery-menu-aim插件实现二级导航
jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码: $(function () ...
随机推荐
- Windos下的一些命令集合
由于在CMD模式下(也就是命令行)有较多的有用的命令.以下是自己平时所记录下来的以帮助平时的任务. 1. 显示计算机的操作系统 wmic os get osarchitecture /value
- 个人第四次作业Alpha2版本测试~顾毓
个人第四次作业Alpha2版本测试 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要 ...
- Java容器解析系列(16) android内存优化之SparseArray
HashMap的缺点: 自动装箱导致的性能损失; 使用拉链法来解决hash冲突,如果hash冲突较多,需要遍历链表,导致性能下降,在Java 8 中,如果链表长度>8,会使用红黑树来代替链表; ...
- jmeter使用—响应断言
断言的作用:一个HTTP请求发出去,怎么判断执行的任务是否成功呢?通过检查服务器响应数据,是否返回预期想要的数据,如果是,判断任务成功,反之任务失败. 1.添加断言:选中一个取样器,右键->添加 ...
- Spring中的BeanPostProcessor详解
Spring中的BeanPostProcessor详解 概述 BeanPostProcessor也称为Bean后置处理器,它是Spring中定义的接口,在Spring容器的创建过程中(具体为Bean初 ...
- linux--->PHP常用模块解析
PHP常用模块解析 php-gd :GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片,也可以给图片加水印 php-ldap :LDAP是轻量 ...
- js中函数this的指向
this 在面试中,js指向也常常被问到,在开发过程中也是一个需要注意的问题,严格模式下的this指向undefined,这里就不讨论. 普通函数 记住一句话哪个对象调用函数,该函数的this就指向该 ...
- python学习Day04--列表
[主要内容] 1.列表的索引: lst=[1,2,3,4,5,6] print(lst[0]) #获取第一个元素 lst[1]='你好' #改变列表中的值 2.列表的切片: lst=[ ...
- Java并发编程(二)：volatile关键字
volatile是Java虚拟机提供的轻量级的同步机制.volatile关键字有如下两个作用,一句话概括就是内存可见性和禁止重排序. 1)保证被volatile修饰的共享变量对所有线程总是可见的,也就 ...
- OpenCV3入门（四）图像的基础操作
1.访问图像像素 1)灰度图像 2)彩色图像 OpenCV中的颜色顺序是BGR而不是RGB. 访问图像的像素在OpenCV中就是访问Mat矩阵,常用的有三种方法. at定位符访问 Mat数据结构,操作 ...