pixiebox/markerMenu

## markerMenu
<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        padding: 0;
        position: relative;
      }
      li {
        display: inline-block;
        padding: 12px 25px;
      }
      span.marker {
        background: #000;
        display: inline-block;
        height: 4px;
        left: 0;
        position: absolute;
        -webkit-transition: width 0.2s ease, left 0.2s ease;
        -moz-transition: width 0.2s ease, left 0.2s ease;
        -o-transition: width 0.2s ease, left 0.2s ease;
        transition: width 0.2s ease, left 0.2s ease;
      }
    </style>
  </head>

  <body>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li class="active"><a href="#">Link 4</a></li>
      <span></span>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript">
      var api = {
          marker      : {}
        , offsetLeft  : 0
        , setLine     : function setLine(li){
            if (li.length) {
              api.offsetLeft = li.outerWidth();
              api.marker.css({
                  left  : li.position().left + 'px'
                , top   : (li.outerHeight() + li.position().top - api.marker.height()) + 'px'
                , width : li.outerWidth()
              });
            }
          }
        , setInitial : function setInitial($el) {
            var targetLi = $el.find('.active').closest($el.selector + ' > li');
            api.setLine(targetLi);
          }
      };

      $.fn.menuMarker = function () {
        $el = $(this)
          , self = this;

        api.marker = $('<span class="marker"></span>');
        $el.append(api.marker);

        api.setInitial($el);

        $el.find('li').on('mouseenter', function() {
          api.setLine($(this));
        }).on('mouseleave', function(e){
          api.setInitial($el);
        });

        $(window).on('load resize orientationchange', function(e){
          setTimeout(function(){
            api.setInitial($el);
          }, 100);
        });

        return api;
      };

      var marker = $('ul').menuMarker();
      // marker.setLine($li);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	ul {
	list-style-type: none;
	padding: 0;
	position: relative;
	}
	li {
	display: inline-block;
	padding: 12px 25px;
	}
	span.marker {
	background: #000;
	display: inline-block;
	height: 4px;
	left: 0;
	position: absolute;
	-webkit-transition: width 0.2s ease, left 0.2s ease;
	-moz-transition: width 0.2s ease, left 0.2s ease;
	-o-transition: width 0.2s ease, left 0.2s ease;
	transition: width 0.2s ease, left 0.2s ease;
	}
	</style>
	</head>

	<body>
	<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li class="active"><a href="#">Link 4</a></li>
	<span></span>
	</ul>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script type="text/javascript">
	var api = {
	marker : {}
	, offsetLeft : 0
	, setLine : function setLine(li){
	if (li.length) {
	api.offsetLeft = li.outerWidth();
	api.marker.css({
	left : li.position().left + 'px'
	, top : (li.outerHeight() + li.position().top - api.marker.height()) + 'px'
	, width : li.outerWidth()
	});
	}
	}
	, setInitial : function setInitial($el) {
	var targetLi = $el.find('.active').closest($el.selector + ' > li');
	api.setLine(targetLi);
	}
	};

	$.fn.menuMarker = function () {
	$el = $(this)
	, self = this;

	api.marker = $('<span class="marker"></span>');
	$el.append(api.marker);

	api.setInitial($el);

	$el.find('li').on('mouseenter', function() {
	api.setLine($(this));
	}).on('mouseleave', function(e){
	api.setInitial($el);
	});

	$(window).on('load resize orientationchange', function(e){
	setTimeout(function(){
	api.setInitial($el);
	}, 100);
	});

	return api;
	};

	var marker = $('ul').menuMarker();
	// marker.setLine($li);
	</script>
	</body>
	</html>