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 () ...
随机推荐
- influxdb的命令们
InfluxDB是一个开源的时序数据库,使用GO语言开发,特别适合用于处理和分析资源监控数据这种时序相关数据.而InfluxDB自带的各种特殊函数如求标准差,随机取样数据,统计数据变化比等,使数据统计 ...
- c#数字图像处理（三）灰度直方图
灰度直方图是灰度的函数,描述的是图像中具有该灰度级的像素的个数.如果用直角坐标系来表示,则它的横坐标是灰度级,纵坐标是该灰度出现的概率(像素的个数). using System; using Syst ...
- python多层数组合成一个数组后循环打印出数组内的每一项元素的方法
a=[1,2,3,4] b=[5,6,7,8] c=[a,b] def test(c): for i in c: return i print(test(c)) 以上代码执行后打印出来的结果是 预期目 ...
- AVR单片机教程——矩阵键盘
本文隶属于AVR单片机教程系列. 开发板上有4个按键,我们可以把每一个按键连接到一个单片机引脚上,来实现按键状态的检测.但是常见的键盘有104键,是每一个键分别连接到一个引脚上的吗?我没有考证过, ...
- Deep server from scratch
Deep server from scratch 1.install Ubuntu16.04 via flash2.wired Network by Ruijie3.install google4.S ...
- Linux文件内容重定向
文件描述符 可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以实现文件的读写操作. 用户可以自定义文件描述符范围是:3-num,这个最大数字, ...
- screen配置窗口显示
screen的下方不显示,可以复制如下的代码 cd /root && vim .screenrc 贴上如下内容 hardstatus on hardstatus alwayslastl ...
- acwing 243. 一个简单的整数问题2 树状数组 线段树
地址 https://www.acwing.com/problem/content/description/244/ 给定一个长度为N的数列A,以及M条指令,每条指令可能是以下两种之一: 1.“C l ...
- 使用 web3D 技术的风力发电场展示
前言 风能是一种开发中的洁净能源,它取之不尽.用之不竭.当然,建风力发电场首先应考虑气象条件和社会自然条件.近年来,我国海上和陆上风电发展迅猛.海水.陆地为我们的风力发电提供了很好地质保障.正是 ...
- kubernetes安装-kubeadm
系统信息 角色 系统 CPU Core memory master 18.04.1-Ubuntu 4 8G slave 18.04.1-Ubuntu 4 4G 安装前准备(主节点和从节点都需要执行) ...