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 () ...
随机推荐
- 从0开发3D引擎：目录
介绍 大家好,本系列带你踏上Web 3D编程之旅- 本系列是实战类型,从0开始带领读者写出"良好架构.良好扩展性.优秀的性能.最小功能集合(MVP)" 的3D引擎. 本系列的素材来 ...
- FluentData -Micro ORM with a fluent API that makes it simple to query a database
Code samples Create and initialize a DbContextThe connection string on the DbContext class can be in ...
- Dynamics 365 CRM Connected Field Service 不能接收IoT Alert
今天浪费了2,3个小时再connected field service(CFS)上面. 状况如下 1. 在CFS中添加了新的customer assets,并且点击了注册按钮. 2. 注册步骤一直在i ...
- JS-01-js的三种引入方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- kali linux下的部分命令
查看发行版本 cat /etc/issue cat /etc/*-release 查看内核版本 uname -a 显示机器的处理器架构 arch uname -m 清屏 clear 命令行 ...
- IIS发布网站常见MIME扩展类型添加
# This file maps Internet media types to unique file extension(s). # Although created for httpd, thi ...
- mongodb centos7 安装
安装MongoDB的方法有很多种,可以源代码安装,在CentOS也可以用yum源安装的方法.由于MongoDB更新得比较快,我比较喜欢用yum源安装的方法.64位Centos下的安装步骤如下: 1.准 ...
- 关于mysql8启动后又停止(windows10系统),忘记密码以及密码过期等坑解决办法总结!
一 我遇到的问题 1 mysql连接不了,mysql服务启动后又马上关闭 2 忘记密码或者重装服务后提示安装的随机密码过期 一个一个来,先看第一个: 1 出现这个情况很大原因是mysql安装目录有多余 ...
- Jquery 替换全部字符
item.replace('P','') 只会替换第一个'P'字符 item.replace(/P/gm,'') 替换全部'P'字符
- PAT (Advanced Level) Practice 1001-1005
PAT (Advanced Level) Practice 1001-1005 PAT 计算机程序设计能力考试 甲级 练习题 题库:PTA拼题A官网 背景 这是浙大背景的一个计算机考试 刷刷题练练手 ...