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 () ...
随机推荐
- noip2018 考前提醒！
适应Noilinux 1.终端操作 打开终端 \(Ctrl+Alt+T\) 打开文件夹 \(cd\) +名称 新建文件夹 \(mkdir\) +名称 打开 \(vim\) 配置 \(vim ~/.vi ...
- 「 深入浅出 」java集合Collection和Map
本系列文章主要对java集合的框架进行一个深入浅出的介绍,使大家对java集合有个深入的理解. 本篇文章主要具体介绍了Collection接口,Map接口以及Collection接口的三个子接口Set ...
- 基于 Lind.DDD 的 权限管理系统
先起个头,在跟吧 表结构 12个表 ps: sxiaomais.blog.163.com/blog/static/31741203200811102630406/ 需要数据库 文件的 附件 权限 ...
- 深入Node模块Buffer-学会操作二进制
Buffer 作为 nodejs 中重要的概念和功能,为开发者提供了操作二进制的能力.本文记录了几个问题,来加深对 Buffer 的理解和使用: 认识缓冲器 如何申请堆外内存 如何计算字节长度 如何计 ...
- javascript的对象、类和方法
1.类和对象的概念: 1.所有的事物都是一个对象,而类就是具有相同属性和行为方法的事物的集合 2.在JavaScript中建立对象的目的就是将所有的具有相同属性的行为的代码整合到一起,方便使用者的管理 ...
- PKU 1185-炮兵阵地(状压DP)
炮兵阵地 题目链接 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 34827 Accepted: 13353 Descripti ...
- 笔记常用Linux命令(三) 查看服务器日志
服务器日志 用于记录服务器的运行情况 查看服务器日志 tail:查看后面几行 n 显示行数 f 持续侦测后面的内容,查看服务器日志常用 查看最新的服务日志(静态) 命令格式:tail -n 行数 日志 ...
- 最好用的web端代码文本编辑器ACE
使用足够简单,功能足够强大,体验足够优秀 之前有一个系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,总共发了四篇文章介绍了三个非常棒的插件,分别是bootstrap-duallistbox ...
- HanLP《自然语言处理入门》笔记--6.条件随机场与序列标注
笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 6. 条件随机场与序列标注 本章介绍一种新的序列标注模型条件随机场.这种模型与感知 ...
- bjut校园网自动登录
主要是懒得每次上网都需要打开网页=.= logon.bat @echo off mode con: cols=40 lines=15 color 0a title 登录ing... rem 获得IP ...