兼职外快的项目中，tab要求仿照华为云平台的风格。在这里抽成插件，方便后面维护，和其他项目的复用。
下图为华为云tab效果，不过华为云的前端应该是用ng开发。自己的插件是用jquery
贴上自己jqeury代码
/**
* @name: HWNavigation.js
* @date: Sun 14 Jun 2018
* @author: zhongmingyuan
*/
(function($) {
var defaults = {
slideSpeed: 600,
fadeSpeed: 200,
delay: 500
};
var config = {
item: '.navItem',
dropdown: '.navContent',
dropdownContent: '.navContent > li',
itemsDelay: 300
};
$.fn.HWNavigation = function() {
// Initialize the plugin with the given arguments
init.apply(this, arguments);
return this;
};
function init(opts) {
$(config.dropdown).hide();
var options = $.extend({}, defaults, opts);
this.data(options);
this.each(function(i, e) {
var $e = $(e);
$e.find(config.item).each(function(index, element) {
var $el = $(element);
$el.data('height', $el.find(config.dropdown).height());
$el.data('id', index);
});
menuSlide($e, options);
});
}
function menuSlide(selector, opts) {
var $previousItem = null,
$currentItem = null,
delayHappened = false,
timer;
$(selector).on("mouseleave", function(e) {
delayHappened = false;
$(config.dropdown).slideUp(opts.slideSpeed);
});
$(selector).find(config.item).hover(function(e) {
if (delayHappened === false) {
timer = setTimeout(function() {
delayHappened = true;
$currentItem = $(e.currentTarget);
$(e.currentTarget).find(config.dropdownContent).show();
$(e.currentTarget).find(config.dropdown).slideDown(opts.slideSpeed);
}, opts.delay);
} else {
timer = setTimeout(function() {
if ($(e.currentTarget).data('id') !== $currentItem.data('id')) {
$previousItem = $currentItem;
$currentItem = $(e.currentTarget);
$previousItem.find(config.dropdown).height($previousItem.data('height'))
.end().find(config.dropdownContent).fadeOut(opts.fadeSpeed);
$previousItem.find(config.dropdown).animate({
height: $currentItem.data('height')
}, opts.slideSpeed, function() {
$currentItem.find(config.dropdown).height($currentItem.data('height'))
.end().find(config.dropdownContent).hide()
.end().find(config.dropdown).show();
$previousItem.find(config.dropdown).hide()
.end().find(config.dropdown).height($previousItem.data('height'));
$currentItem.find(config.dropdownContent).fadeIn(opts.fadeSpeed);
});
}
}, config.itemsDelay);
}
}, function(e) {
clearTimeout(timer);
});
}
})(jQuery);
dom结构如下
<nav id="booNavigation" class="booNavigation">
<ul>
<!-- <li class="navItem">
<a href="#" title="首页">首页</a>
</li> -->
<li class="navItem">
<a href="#" title="案例专区">案例专区</a>
<ul class="navContent">
<li>
<ul>
<li><a href="#" title="案例专区">案例专区</a><li/>
<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
<li><a href="#" title="The best cat">The best cat</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
</ul>
</li>
<li>
<ul>
<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
<li><a href="#" title="The best cat">The best cat</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
</ul>
</li>
<li>
<ul>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
<li><a href="#" title="The best cat">The best cat</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
</ul>
</li>
</ul>
</li>
<li class="navItem">
<a href="#" title="产品介绍">产品介绍</a>
<ul class="navContent">
<li>
<ul>
<li><a href="#" title="产品介绍">产品介绍</a><li/>
<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
</ul>
</li>
<li>
<ul>
<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
</ul>
</li>
<li>
<ul>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
</ul>
</li>
</ul>
</li>
<li class="navItem">
<a href="#" title="服务介绍">服务介绍</a>
<ul class="navContent">
<li>
<ul>
<li><a href="#" title="服务介绍">服务介绍</a><li/>
<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
</ul>
</li>
<li>
<ul>
<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
</ul>
</li>
<li>
<ul>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Boo the cat">Boo the cat</a><li/>
<li><a href="#" title="The invisible cat">The invisible cat</a><li/>
<li><a href="#" title="The amazing cat">The amazing cat</a><li/>
<li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
<li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
</ul>
</li>
</ul>
</li>
</ul>
</nav>下面调用即可
$('#booNavigation').HWNavigation({
slideSpeed: 400
});效果如下，导航栏切换的动画效果也基本一致
