导航菜单，showHide插件 + Dropdown 下拉对象
一，index.html文件
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-item link">免费注册</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-item link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="dropdown fl" data-active='site'>
<a href="javascript:;" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="javascript:;" class="dropdown-item">已买到宝贝</a></li>
<li><a href="javascript:;" class="dropdown-item">我的足迹</a></li>
</ul>
</li>
<li class="dropdown fl" data-active='site'>
<a href="javascript:;" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="javascript:;" class="dropdown-item">收藏的宝贝</a></li>
<li><a href="javascript:;" class="dropdown-item">收藏的店铺</a></li>
</ul>
</li>
<li class="dropdown fl" data-active='site'>
<a href="javascript:;" class="dropdown-catorage link">商品分类</a>
</li>
<li class="dropdown fl" data-active='site'>
<a href="javascript:;" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left" data-url='dropdown.json'>
<li class="loading"></li>
<!-- <li><a href="javascript:;" class="dropdown-item">免费开店</a></li>
<li><a href="javascript:;" class="dropdown-item">已卖出的宝贝</a></li>
<li><a href="javascript:;" class="dropdown-item">出售中的宝贝</a></li>
<li><a href="javascript:;" class="dropdown-item">卖家服务市场</a></li>
<li><a href="javascript:;" class="dropdown-item">卖家培训中心</a></li>
<li><a href="javascript:;" class="dropdown-item">体验中心</a></li> -->
</ul>
</li>
<li class="dropdown fl" data-active='site'>
<a href="javascript:;" class="dropdown-toggle link">联系客服<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="javascript:;" class="dropdown-item">消费者咨询</a></li>
<li><a href="javascript:;" class="dropdown-item">卖家服务</a></li>
</ul>
</li>
</ul> </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
二， common.css文件
/* ¹«¹²Ñùʽ */
.container {
width: 1200px;
}
.link {
color: #4d555d;
}
.link:hover {
color: #f01414;
} /* showHide */
.transition {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.fade {
opacity: 0 !important;
visibility: hidden !important;
}
.slideUpDown {
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRight {
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* dropdown */
.dropdown{
position: relative;
}
.dropdown-toggle {
display: inline-block;
}
.dropdown-arrow {
display: inline-block;
background-repeat: no-repeat;
}
.dropdown-layer {
display: none;
position: absolute;
top: 100%;
overflow: hidden;
}
/* .dropdown-item {
display: block;
white-space: nowrap;
overflow: hidden;
} */
.dropdown-left {
left: 0;
right: auto;
}
.dropdown-right {
left: auto;
right: 0;
}
三， index.css文件
.nav-site{
width: 100%;
background: #f3f5f7;
}
.nav-site > .container{
height: 44px;
line-height: 44px;
margin: 0 auto;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login {
margin-left: 15px;
color: #f01414;
}
.nav-site-item {
margin-left: 10px;
}
.nav-site .nav-site-item:nth-child(1) {
margin-right: 16px;
}
/*dropdown*/
/* .dropdown{
position: relative;
} */
.dropdown-catorage,
.dropdown-toggle {
/*display: inline-block;*/
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
/* .dropdown-toggle:hover {
background: #fff;
border-left: 1px solid #cdd0d4;
border-right: 1px solid #cdd0d4;
} */
.dropdown-arrow {
/*display: inline-block;*/
width: 8px;
height: 6px;
/*background: url('../img/dropdown-arrow.png') no-repeat;*/
background-image: url('../img/dropdown-arrow.png');
margin-left: 8px;
}
.dropdown-layer {
/*display: none;*/
/*position: absolute;*/
/*top: 100%;*/
background: #f3f5f7;
border: 1px solid #cdd0d4;
border-top: none;
}
/* .dropdown:hover .dropdown-layer,
.dropdown:hover .dropdown-toggle {
background: #fff;
}
.dropdown:hover .dropdown-layer {
display: block;
} */
.dropdown-item {
display: block;
height:30px;
line-height: 30px;
padding-left: 12px;
padding-right: 12px;
white-space: nowrap;
overflow: hidden;
color: #4d555d;
}
/* .dropdown-left {
left: 0;
right: auto;
}
.dropdown-right {
left: auto;
right: 0;
}
*/
.dropdown-item {
background: #fff;
}
.dropdown-item:hover {
background: #f3f5f7;
}
.site-active .dropdown-toggle {
background: #fff;
border-left: 1px solid #cdd0d4;
border-right: 1px solid #cdd0d4;
}
.site-active .dropdown-layer {
/*display: block;*/
background: #fff;
}
四，导入jquery.js
五，transitionend.js文件
(function(){
// 'use strict';//在IE浏览器下，使用严格模式是不能定义多个变量的，所以不能使用严格模式
//判断样式是否支持该浏览器，可以在控制台输出 document.body.style[属性名] = ""; 则支持
//如果返回的 undefined 则不支持。
//因为调用未定义的对象，报错;使用未定义的属性，返回undefined
var transitions = {
'-webkit-transition':'webkitTransitionEnd',
'-moz-transition':'mozTransitionEnd',
'-webkit-transition':'webkitTransitionEnd',
'-o-transition':'oTransitionEnd',
'transition':'transitionend'
};
var value = '';
var isSupport = false;
for(var p in transitions){
if (document.body.style[p] !== undefined) {
value = transitions[p];
isSupport = true;
break;
}
};
//暴露一个借口对象给外界调用
// window.mt = "" window.mt = undefined 进行隐式转换 都是false
// 所以window.mt 只能是一个对象时才返回真
// 与找false,或找true
window.mt = window.mt || {};
window.mt.transitionend = {
transition:value,
isSupport:isSupport
};
})(jQuery)
六， showHide.js文件
(function(){
'use strict';
//引用 transitionend 动画结束后执行的事件
var transitionend = window.mt.transitionend.transition;
//所有的兼容性写法都可以添加一个附带属性，即表示浏览器是否支持
var isSupport = window.mt.transitionend.isSupport;
//公共方法，高内聚低耦合，方法提取最小，所有都有
//初始化$ele对象，判断是否显示并设置对应的状态
function init($ele,callback){
if ($ele.is(':hidden')) {
$ele.data('status','hidden');
typeof callback=== 'function' && callback();
}else{
$ele.data('status','shown');
}
}
//公共 show 设置事件开始前的状态并trigger其他事件
function show($ele,callback){
if ($ele.data('status')==='show' || $ele.data('status')==='shown') return;
$ele.data('status','show').trigger('show');
typeof callback === 'function' && callback();
}
//公共 hide 设置事件触发前的状态，并触发其他事件
function hide($ele,callback){
if ($ele.data('status')==='hide' || $ele.data('status')==='hidden') return;
$ele.data('status','hide').trigger('hide');
typeof callback === 'function' && callback();
}
//静静的显示隐藏，没有动画
var silent = {
init:function($ele){
//初始化
init($ele);
},
show:function($ele){
show($ele,function(){
$ele.show();
$ele.data('status','shown').trigger('shown');
});
},
hide:function($ele){
hide($ele,function(){
$ele.hide();
$ele.data('status','hidden').trigger('hidden');
});
}
}
//使用css3显示隐藏的动画
var css3 = {
fade:{// fadeOut fadeIn 淡入淡出
init:function($ele){
css3._init($ele,'fade');
},
show:function($ele){
css3._show($ele,'fade');
},
hide:function($ele){
css3._hide($ele,'fade');
}
},
slideUpDown:{ //slideUp slideDown 上下拉动
init:function($ele){
//千万记住如果$ele的宽高是由内容撑开，而没有设置固定宽高，
//如果设置其中一个属性进行过度，那么一定要在初始化时先获取，且设置其宽高，
//才能进行上下拉动或左右拉动的过渡效果，否则是没有过渡效果的显示隐藏
$ele.height($ele.height());
css3._init($ele,'slideUpDown');
},
show:function($ele){
css3._show($ele,'slideUpDown');
},
hide:function($ele){
css3._hide($ele,'slideUpDown');
}
},
slideLeftRight:{ //jquery中没有定义，左右拉动
init:function($ele){
//千万记住如果$ele的宽高是由内容撑开，而没有设置固定宽高，
//如果设置其中一个属性进行过度，那么一定要在初始化时先获取，且设置其宽高，
//才能进行上下拉动或左右拉动的过渡效果，否则是没有过渡效果的显示隐藏
$ele.width($ele.width());
css3._init($ele,'slideLeftRight');
},
show:function($ele){
css3._show($ele,'slideLeftRight');
},
hide:function($ele){
css3._hide($ele,'slideLeftRight');
}
},
fadeSlideUpDown:{ // fadeOut fadeIn + slideUp = slideDown 淡入淡出 + 上下拉动
init:function($ele){
//千万记住如果$ele的宽高是由内容撑开，而没有设置固定宽高，
//如果设置其中一个属性进行过度，那么一定要在初始化时先获取，且设置其宽高，
//才能进行上下拉动或左右拉动的过渡效果，否则是没有过渡效果的显示隐藏
$ele.height($ele.height());
css3._init($ele,'fade slideUpDown');
},
show:function($ele){
css3._show($ele,'fade slideUpDown');
},
hide:function($ele){
css3._hide($ele,'fade slideUpDown');
}
},
fadeSlideLeftRight:{ //fadeOut fadeIn + 左右拉动
init:function($ele){
//千万记住如果$ele的宽高是由内容撑开，而没有设置固定宽高，
//如果设置其中一个属性进行过度，那么一定要在初始化时先获取，且设置其宽高，
//才能进行上下拉动或左右拉动的过渡效果，否则是没有过渡效果的显示隐藏
$ele.width($ele.width());
css3._init($ele,'slideLeftRight fade');
},
show:function($ele){
css3._show($ele,'slideLeftRight fade');
},
hide:function($ele){
css3._hide($ele,'slideLeftRight fade');
}
}
}
/*谨记：下面的方法一定要写在 css3对象后面，因为使用的字面的方式定义函数，
浏览器在预解析时，css3._init = null; 如果css3对象不存在就会报错
即：不存在的对象报错，不存在的属性返回undefined*/
// _init 下划线的方法表示，css3对象内部使用的
css3._init = function($ele,className){
$ele.addClass('transition');
init($ele,function(){
$ele.addClass(className);
});
}
// _show 下划线的方法表示，css3对象内部使用的
css3._show = function($ele,className){
show($ele,function(){
$ele.show();
setTimeout(function(){
$ele.removeClass(className);
},20);
$ele.off(transitionend).one(transitionend,function(){
$ele.data('status','shown').trigger('shown');
});
});
}
// _hide 下划线的方法表示，css3对象内部使用的
css3._hide = function($ele,className){
hide($ele,function(){
$ele.addClass(className);
$ele.off(transitionend).one(transitionend,function(){
$ele.hide();
$ele.data('status','hidden').trigger('hidden');
});
});
}
/*谨记：下面的方法一定要写在 css3对象后面，因为使用的字面的方式定义函数，
浏览器在预解析时，css3._init = null; 如果css3对象不存在就会报错
即：不存在的对象报错，不存在的属性返回undefined*/
//使用原生js进行显示隐藏
var js = {
fade:{// fadeOut fadeIn 淡入淡出
init:function($ele){
js._init($ele,{
'opacity':'0',
'visibility':'hidden'
});
},
show:function($ele){
js._show($ele,{
'opacity':'1',
'visibility':'visible'
}); },
hide:function($ele){
js._hide($ele,{
'opacity':'0',
'visibility':'hidden'
});
}
},
slideUpDown:{//slideUp slideDown 上下拉动
init:function($ele){
js._init($ele,{
'height':'0',
'padding-top':'0',
'padding-bottom':'0'
});
},
show:function($ele){
var styles = $ele.data('styles');
js._show($ele,{
'height':styles['height'],
'padding-top':styles['padding-top'],
'padding-bottom':styles['padding-bottom']
});
},
hide:function($ele){
js._hide($ele,{
'height':'0',
'padding-top':'0',
'padding-bottom':'0'
});
}
},
slideLeftRight:{//jquery中没有定义，左右拉动
init:function($ele){
js._init($ele,{
'padding-left':'0',
'padding-right':'0'
});
},
show:function($ele){
var styles = $ele.data('styles');
js._show($ele,{
'width':styles['width'],
'padding-left':styles['padding-left'],
'padding-right':styles['padding-right']
});
},
hide:function($ele){
js._hide($ele,{
'width':'0',
'padding-left':'0',
'padding-right':'0'
});
}
},
fadeSlideUpDown:{// fadeOut fadeIn + slideUp = slideDown 淡入淡出 + 上下拉动
init:function($ele){
js._init($ele,{
'height':'0',
'opacity':'0',
'padding-top':'0',
'padding-bottom':'0'
});
},
show:function($ele){
var styles = $ele.data('styles');
js._show($ele,{
'height':styles['height'],
'opacity':styles['opacity'],
'padding-top':styles['padding-top'],
'padding-bottom':styles['padding-bottom']
});
},
hide:function($ele){
js._hide($ele,{
'height':'0',
'opacity':'0',
'padding-top':'0',
'padding-bottom':'0'
});
}
},
fadeSlideLeftRight:{ //fadeOut fadeIn + 左右拉动
init:function($ele){
js._init($ele,{
'width':'0',
'opacity':'0',
'padding-left':'0',
'padding-right':'0'
});
},
show:function($ele){
var styles = $ele.data('styles');
js._show($ele,{
'width':styles['width'],
'opacity':styles['opacity'],
'padding-left':styles['padding-left'],
'padding-right':styles['padding-right']
});
},
hide:function($ele){
js._hide($ele,{
'width':'0',
'opacity':'0',
'padding-left':'0',
'padding-right':'0'
});
}
}
}
// _init 下划线的方法表示，js对象内部使用的
js._init = function($ele,options){
//这里特别注意，如果$ele标签中已经添加 transition 过渡类，
//那么使用js时，显示效果就会有异常，所以一定记住这里要移除
$ele.removeClass('transition');
var styles = {};
for(var p in options){
styles[p] = $ele.css(p);
}
//把值存放在$ele对象中，在显示时可以提取出来使用
$ele.data('styles',styles);
init($ele,function(){
$ele.animate(options);
})
}
// _show 下划线的方法表示，js对象内部使用的
js._show = function($ele,options){
show($ele,function(){
$ele.show();
setTimeout(function(){
$ele.stop().animate(options,function(){
$ele.data('status','shown').trigger('shown');
});
},20);
})
}
// _hide 下划线的方法表示，js对象内部使用的
js._hide = function($ele,options){
hide($ele,function(){
$ele.stop().animate(options,function(){
$ele.hide();
$ele.data('status','hidden').trigger('hidden');
});
});
}
// 思路：
// 1，返回一个对象
// showHide(options)
// silent{show,hide}
// css3.animation{show,hide}
// js.animation{show,hide}
// 2， showHide('string');
var defaults = {
css3:false,
js:false,
animation:'fade'
}
function showHide($ele,option){
var mode = {};//模式
//如果css3=true ,且 支持 transitionend事件才执行 使用css3执行动画
if (option.css3 && isSupport) {
//如果css3[options.animation]存在，则mode=css3[options.animation],否则等于默认值
mode = css3[option.animation] ? css3[option.animation] : css3[defaults.animation];
}else if (option.js) {
mode = js[option.animation] ? js[option.animation] : js[defaults.animation];
}else{
mode = silent;
}
//初始化
mode.init($ele);
return {
show:$.proxy(mode.show,this,$ele),
hide:$.proxy(mode.hide,this,$ele)
}
}
window.mt = window.mt || {};
window.mt.showHide = showHide;
//写成插件进行调用
$.fn.extend({
showHide:function(options){
//插件对象一定返回的是一个对象
//传对象进来时，一定记得遍历，因为有可能是一个数组对象
return $(this).each(function() {
//注意：这里mode存取值，使用的是单例存取值，
var mode = $(this).data('mode');
//$.extend({},a,b,c);处理参数，参数扩展，
//后面对象的属性覆盖前面的属性(包括属性值)，最后覆盖空值得到一个新对象
//即：c 覆盖 b 覆盖 a 覆盖 {} 最后得到一个新的对象参数
//typeof options === 'object' && options 如果参数options 为对象，则返回 options,
//否则返回false,即：使用defaults 默认值
var option = $.extend({},defaults,typeof options ==='object' && options);
//注意：这里mode存取值，使用的是单例存取值，
//1,一开始就获取mode=$(this).data('mode'),
//2,中间执行一段代码获取 mode
//3,如果mode为空，则执行存值，并赋值，否则继续执行
if (!mode) {
$(this).data('mode',mode = showHide($(this),option));
}
//不要使用 typeof options === 'string'，因为options[options] 可能是未定义的属性，
//所以这里使用 typeof mode[options] === 'function' options是否是 mode 的函数属性
if (typeof mode[options] === 'function') {
//执行
mode[options]();
}
});
}
})
})(jQuery)
七， dropdown.js文件
(function($){
function Dropdown(ele,options){
//因为这里的参数在下面 init 方法中访问不到，
//所以这里把options参数也设置为Dropdown的一个属性，那么就可以通过this进行访问了。
this.options = options;
this.$ele = $(ele);
//这里不能直接使用 this.eleLayer = $('.dropdown-layer'),这里获取的是所有的下拉层。
this.eleLayer = this.$ele.find('.dropdown-layer');
//判断是否有设定默认值 active ,如果有设定则使用设定好的值，否则使用下拉菜单对象中 data-actvie 的值
//使用下面长句也可以，只是处理参数，都把它们放到了，插件中的 $.extend 方法中一起处理了。这种方法优秀
// this.activeName = options.active !== undefined || this.$ele.data('active') + '-active';
this.activeName = options.active;
//除了Dropdown属性外，其他所有的操作都应该放到init()函数中去，代表初始化
this.init();
}
Dropdown.prototype.init = function(){
//初始化
this.eleLayer.showHide(this.options);
var self = this;
if (this.options.event === 'click') {
this.$ele.on('click',function(e){
self.show();
//this.$ele 对象有单击事件，而 $(document)也绑定了单击事件，如果没有阻止事件冒泡，
//那么会从this.$ele一直父级元素冒泡单击事件，直到window对象，
//this.$ele的父级以上只要有单击事件都会触发。所以这里必须阻止事件冒泡
e.stopPropagation();
})
//单击除了 this.$ele对象外的所有地方都会触发 self.hide()事件
$(document).on('click',function(){
self.hide();
})
}else{//除了单击事件其他值默认都是hover事件
this.$ele.hover($.proxy(this.show,this), $.proxy(this.hide,this));
}
/* this.$ele.hover(function(){
self.show();
},function(){
self.hide();
})*/
}
//Dropdown本身就是一个对象，所以可以设置属性，
//默认参数，都是一个一个添加上去的，只要会变的参数都暴露到插件中给用户自定义。
//在添加参数的思路可以是，从函数里面一步一步向外边推，或者也可以从用户调用参数时开始一步一步传递。
Dropdown.DEFAULTS = {
css3:false,
js:false,
animation:'fade',
event:'hover',
active:'dropdown'
}
//面向对象编程时，一定先找出该对象的方法，然后使用原型链的方式进行声明
//因为在创建多个对象后，原型不会在堆内存中开辟空间存放 方法了，
//而是是在原型中向上查找其他对象的方法，进而引用它们的方法。性能最佳。
//所以方法都是存放在原型中，属性都是放在构造函数中。
Dropdown.prototype.show = function(){
//注意点：本来this.activeName = 'site-active' 即：.site-active中
//使用 display:block;控制显示隐藏的，如果使用了showHide 显示隐藏插件，
//一定记住把里面 display 的属性删除掉，这里的类只用于控制样式。
//显示隐藏的操作交给插件 showHide 来控制
this.$ele.addClass(this.activeName);
this.eleLayer.showHide('show');
}
//同上
Dropdown.prototype.hide = function(){
this.$ele.removeClass(this.activeName);
this.eleLayer.showHide('hide');
}
/* //这里是思路方法写的函数 ，上面面向对象是根据这个函数构造出来的下拉对象
function dropdown(ele) {
var $ele = $(ele),
$eleLayer = $ele.find('.dropdown-layer');
//初始化
$eleLayer.showHide({
css3:true,
js:false,
animation:'slideLeftRight'
});
$ele.hover(function() {
$ele.addClass('site-active');
$eleLayer.showHide('show');
// console.log($eleLayer.showHide('show'));
}, function() {
$ele.removeClass('site-active');
$eleLayer.showHide('hide');
});
}*/
//把面向对象Dropdown 写成插件的形式被调用
$.fn.extend({
dropdown:function(option){
return this.each(function(){
// dropdown(this);
//$.extend({},a,b,c);处理参数，参数扩展，
//后面对象的属性覆盖前面的属性(包括属性值)，最后覆盖空值得到一个新对象
//即：c 覆盖 b 覆盖 a 覆盖 {} 最后得到一个新的对象参数
var options = $.extend({},Dropdown.DEFAULTS,$(this).data('active'),option);
new Dropdown(this,options);
})
}
})
})(jQuery)
八，index.js文件
//这是最后指定$('.dropdown')对象调用插件
$('.dropdown').dropdown({
//指定使用哪种方式进行显示隐藏
css3:false,
js:true,
//具体怎么显示隐藏
animation:'fadeSlideLeftRight',
/*默认只给了两个事件，如果不是click,那么其他值默认为hover事件，容错率高，即使传错参数也可以正常运行*/
event:'cdlick',
/*index.html中鼠标悬浮在 $('.dropdown')标签添加的是 site-acitve，如果不是该类
那么就不会在 .dropdown-toggle 添加白色背景，或者可能出现其他异常,
如：使用dropdown整个导航在鼠标一进一出时就会左右移动一点点 ，请注意*/
active:'site'
});
//获取下拉菜单jquery对象
var $dropdown = $('.dropdown')
html = '';
//给下拉菜单绑定显示之前要触发的 dropdown-show 事件
$dropdown.on('dropdown-show',function(){
//在当前下拉菜单 $dropdown 下面找到下拉层 .dropdown-layer
var $layer = $(this).find('.dropdown-layer');
var width = $(this).width()-2;
//如果data-url 为 未定义，则不需要获取数据，即不需要加载下拉菜单，
//需要手动在index.html中 卖家中心添加 data-url="需要加载的文件路径"
if (!$layer.data('url')) return;
//如果下拉层已经加载过了，有缓存，所以不需要继续加载。
if ($layer.data('loaded')) return;
//这里使用异步调用模仿从服务器获取数据的延迟。
//$.getJSON 谷歌，火狐等主流浏览器不能在本地获取数据。
//但是IE11及以下是可以使用 $.getJSON 方法的，可以使用IE浏览器测试
//这里好像无法获取数据，思路是正确的，不知道哪里有问题。
setTimeout(function(){
$.getJSON($layer.data('url'),function(data){console.log(1);
for (var i = 0; i < data.length; i++) {
html += '<li><a href="' + data[i].url + ':;" class="menu-item link">' + data[i].name+ '</a></li>'
}
$layer.width(width);
$layer.html(html);
$layer.data('loaded',true);
})
},1000);
})
九，dropdown.json文件
[
{
"name":"免费开店",
"href":"javascript:;"
},
{
"name":"已卖出的宝贝",
"href":"javascript:;"
},
{
"name":"出售中的宝贝",
"href":"javascript:;"
},
{
"name":"卖家服务市场",
"href":"javascript:;"
},
{
"name":"卖家培训中心",
"href":"javascript:;"
},
{
"name":"体验中心",
"href":"javascript:;"
}
]
导航菜单，showHide插件 + Dropdown 下拉对象的更多相关文章
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- dropdown下拉菜单
<!--声明方式的下拉菜单:三个要点--> <!--1 外围容器用dropdown包裹--> <!--2 内部点击事件data-toggle--> <!--3 ...
- 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
- 美轮美奂！9款设计独特的jQuery/CSS3全新应用插件（下拉菜单、动画、图表、导航等）
今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...
- bootstrap 响应式导航条模板（含下拉菜单，弹出框）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Dropdown 下拉菜单
将动作或菜单折叠到下拉菜单中. 基础用法 移动到下拉菜单上,展开更多操作. 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单.默认情况下,下拉按钮只要ho ...
- bootstrap 导航栏鼠标悬停显示下拉菜单
在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...
- 我的第一个jquery插件：下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
随机推荐
- todo---java中的json探讨
1.json的命名格式 2.json赋值原则 3.json常用的工具 4.json的处理的第三方软件比较 5.json的起源 6.关于json串的对于null ,"" 的不同的第三 ...
- （二）linux 学习 -- 探究操作系统
The Linux Command Line 读书笔记 - 部分内容来自 http://billie66.github.io/TLCL/book/chap04.html 文章目录 ls 命令进阶 `l ...
- python 之 数据库（多表查询之连接查询、子查询、pymysql模块的使用）
10.10 多表连接查询 10.101 内连接 把两张表有对应关系的记录连接成一张虚拟表 select * from emp,dep: #连接两张表的笛卡尔积 select * from emp,de ...
- 【mapreudce】6.对Nginx的access日志进行数据清洗，我们提取出文件数据的ip，时间，url
1.首先我们需要一个util辅助类 package cn.cutter.demo.hadoop.mapreduce.nginxlog.util; import java.text.ParseExcep ...
- 解决windows 激活问题
解决windows 激活问题 下载 然后 搞定 重启
- ASP.net Web API综合示例
目录 概述 功能介绍 程序结构 服务器端介绍 客户端介绍 “契约” Web API设计规则 并行写入冲突与时间戳 身份验证详解 Web API验证规则 客户端MVVM简介 Web.Config 本DE ...
- sql For xml path('') 备忘
sql 合并行使用的两个函数记录: SELECT CityName,STUFF((SELECT ',' + UserName FROM table1 subTitle WHERE CityName=A ...
- github新建远程仓库初始化记录
…or create a new repository on the command line echo "# 输出内容" >> README.md git init ...
- 怎样修改element-ui中的样式？
方法一 方法二 使用 /deep/ .homePage /deep/ .el-main { padding: 0; } .homePage为我们要修改组件类名的父级组件样式类名..即使定义一个空的 ...
- linux后台执行命令crontab
有如下几种方式: crontab at & nohup 1. crontab 定时执行任务 # crontab -e //编辑crontab配置文件 Select an editor. To ...