Skip to content

Instantly share code, notes, and snippets.

@pixiebox
Last active November 18, 2016 10:16
Show Gist options
  • Save pixiebox/8061c7dfcd55e1252e1b to your computer and use it in GitHub Desktop.
Save pixiebox/8061c7dfcd55e1252e1b to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment