
Меню в стиле Lava Lamp
В сети уже есть несколько плагинов для реализации меню в стиле Lava Lamp. Например вот этот https://plugins.jquery.com/lavalamp/ . Но хотелось написать что-то своё, чтобы и использование было легким, а верстка не сложной, с возможностью легкой интеграции в уже существующее меню.
Итак, сам плагин с демкой и документацией лежит на гитхабе - https://github.com/login2030/lavaLampLodash
Давайте рассмотрим его использование по шагам.
1) Конечно же нам нужна библиотека jQuery > 1.9
<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
2) HTML разметка для меню. Она максимально простая и понятная
<nav class="main-nav">
<a href="#" class="main-nav__item-parent">
<em class="main-nav__item">Item - 1</em>
</a>
<a href="#" class="main-nav__item-parent">
<em class="main-nav__item main-nav__item--on">Item - 2</em>
</a>
<a href="#" class="main-nav__item-parent">
<em class="main-nav__item">Long item - 3</em>
</a>
</nav>
3) CSS стили. Тоже максимально упрощенные.
.main-nav {
position: relative;
zoom: 1;
}
.main-nav:before,
.main-nav:after {
content: "";
display: table;
}
.main-nav:after {
clear: both;
}
.main-nav,
.main-nav * {
display: block;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-weight: normal;
font-style: normal;
}
.main-nav__item-parent {
float: left;
padding: 10px 20px;
}
.main-nav__lodash {
position: absolute;
bottom: 0;
height: 5px;
}
.main-nav__lodash--on {
background: #4ac5ff;
z-index: 99;
}
.main-nav__lodash--hover {
background: #f14b50;
z-index: 9;
}
4) Сам плагин
(function($){
jQuery.fn.lavaLampLodash = function(opt){
opt = $.extend({
speed: 500, // скорость анимации
prefix: 'main-nav', // префикс для классов внутри меню
returnStarting: true // если true, то плавающая полоска при убирании с меню будет улетать к активному пункту
}, opt);
var make = function() {
var $this = $(this);
var itemParent = $this.find('.' + opt.prefix + '__item-parent');
var item = $this.find('.' + opt.prefix + '__item');
var onItem = $this.find('.' + opt.prefix + '__item--on');
var onLodash = $('<i/>', {
class: opt.prefix + '__lodash ' + opt.prefix + '__lodash--on'
});
var hoverLodash = $('<i/>', {
class: opt.prefix + '__lodash ' + opt.prefix + '__lodash--hover'
});
var setCssLodash = function(el, stepfather) {
el.css({
width: stepfather.width(),
left: stepfather.position().left
});
};
var setAnimateLodash = function(el, stepfather) {
el.stop().animate({
width: stepfather.width(),
left: stepfather.position().left
}, opt.speed);
};
$this.append(onLodash, hoverLodash);
setCssLodash(onLodash, onItem);
setCssLodash(hoverLodash, onItem);
itemParent.hover(
function() {
var $el = $(this).find('.' + opt.prefix + '__item');
setAnimateLodash(hoverLodash, $el);
}, function() {
var $el = opt.returnStarting ? onItem : $(this).find('.' + opt.prefix + '__item');
setAnimateLodash(hoverLodash, $el);
}
);
};
return this.each(make);
};
})(jQuery);
5) И конечно же его вызов
$('.main-nav').lavaLampLodash();