Magic Line on Menu in jQuery

by Faisal Khan Janjua

HTML

<nav class="nav-wrap">
  <ul class="group" id="myMenu">
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Reviews</a></li>
    <li><a href="#">Videos of Youtube</a></li>
    <li><a href="#">Photos</a></li>
  </ul>
</nav>

CSS

.nav-wrap {
	position: relative; 
}
#myMenu { 
	margin: 0 auto; 
	list-style: none; 
	position: relative; 
	width: 100%; 
}
#myMenu li { 
	display: inline-block;	
}
#myMenu a { 
	color: #444; 
	font-size: 14px; 
	float: left;
	padding: 6px 10px 4px 10px;
	text-decoration: none;
	text-transform: uppercase;
  border: 1px solid #333;
}
#myMenu a:hover { 
	color: #fe4902;
  background: #F0F0F0;
}
#magic-line { 
	position: absolute;
	bottom: -2px; 
	left: 0; 
	width: 100px; 
	height: 2px; 
	background: #fe4902;
  transition: all ease-in-out 0.2s;
}
#myMenu .active a { 
	color: #fe4902 !important; 
}

JavaScript

$(".nav-wrap").append("<div id='magic-line'></div>");

/* Cache it */
var $magicLine = $("#magic-line");
function magicValues(elm) {
  if (elm) {
    $magicLine.css({
      "left": elm.position().left,
      "width": elm.outerWidth(),
    });
  } else {
    if($("#myMenu > .active > a").length){
      $magicLine.css({
        "left": $("#myMenu > .active > a").position().left,
        "width": $("#myMenu > .active > a").outerWidth(),
      });
    }
    else {
      $magicLine.css({
        "left": $("#myMenu > li:first-child > a").position().left,
        "width": $("#myMenu > li:first-child > a").outerWidth(),
      });
    }
    /* $magicLine.css({
      "left": $("#myMenu .active a").position().left,
      "width": $("#myMenu .active a").outerWidth(),
    }); */
  }
}
magicValues();

$("#myMenu li a").hover(function () {
  magicValues($(this));
},function () {
  magicValues();
});