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 () ...
随机推荐
- XML学习笔记——关于XML解析器
本篇文章基于W3C而写 在Firefox及其他浏览器中的XML解析器(除IE) var xmlDoc=document.implementation.createDocument("&quo ...
- 【JDK1.8】 Java小白的源码学习系列：HashMap
目录 Java小白的源码学习系列:HashMap 官方文档解读 基本数据结构 基本源码解读 基本成员变量 构造器 巧妙的tableSizeFor put方法 巧妙的hash方法 JDK1.8的putV ...
- 对Hadoop分布式文件系统HDFS的操作实践
原文地址:https://dblab.xmu.edu.cn/blog/290-2/ Hadoop分布式文件系统(Hadoop Distributed File System,HDFS)是Hadoop核 ...
- 美食家App开发日记1
前期一直在看第一行代码Android,这本书感觉讲基础讲得特别细致. 百看不如一试. 因为刚刚接触Android,没办法做到想写什么功能就直接一下写好,只能从最开始基础的控件使用开始练习. 所以一直在 ...
- 内部类、final与垃圾回收，面试时你一说，面试官就知道
内部类并不常用,而且使用起来有一定的定式,比如在下面的InnterDemoByTrhead.java里,我们通过内部类的形式创建线程. 1 public class InnerDemoByThread ...
- requests快速构造请求头的方法
上图请求头内容,内容多不说,也不确认哪些数据是必须的,网上找到一个懒办法 快速一键生成 Python 爬虫请求头 实战演练 抓取网站:https://developer.mozilla.org... ...
- jenkins集成jmeter-进阶篇
1.gitlab自动触发jenkins构建 1⃣️安装插件: 2⃣️新建工程,设置git url,build when a change is pushed auto.sh /bin/sh echo ...
- Python中的 if __name__ == '__main__' 是什么意思？
最近在看Python代码的时候,因为是Python初学者,看到这个if __name__ == '__main__' 的判断,并且下面还有代码语句,看了其他地方的说明,还是没搞明白是什么意思, 在看到 ...
- 《高性能MySQL》之MySQL查询性能优化
为什么查询会慢? 响应时间过长.如果把查询看做是一个任务,那么它由一系列子任务组成,每个子任务都会消耗一定的时间.如果要优化查询,实际上优化其子任务,要么消除其中一些子任务,要么减少子任务的执行次数, ...
- Nginx-负载均衡实现解读
负载均衡在服务端开发中算是一个比较重要的特性.因为Nginx除了作为常规的Web服务器外,还会被大规模的用于反向代理前端,因为Nginx的异步框架可以处理很大的并发请求,把这些并发请求hold住之后就 ...