Меню в стиле 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();