Skip to content

Instantly share code, notes, and snippets.

@cgi-caesar
Last active March 5, 2018 12:58
Show Gist options
  • Save cgi-caesar/582de917e3147b6a7ce34f5e285b0c9b to your computer and use it in GitHub Desktop.
Save cgi-caesar/582de917e3147b6a7ce34f5e285b0c9b to your computer and use it in GitHub Desktop.
aMember (site.js) UX for menu with many items
jQuery(function(){
var tolerance = 80;
var initialStep = 30;
var speed = 0.35;
var step = initialStep;
var w;
jQuery('.am-tabs-wrapper').css({
overflow: 'hidden'
});
jQuery('.am-tabs-wrapper > ul').css({
transition: 'margin ' + speed + 's linear'
});
jQuery(window).resize(function(){
w = 0;
jQuery('.am-tabs-wrapper > ul > li').each(function(i, obj){
w += jQuery(obj).outerWidth();
});
jQuery('.am-tabs-wrapper > ul').css({
width: Math.max(w, jQuery('.am-tabs-wrapper').width() - 2) + 'px'
});
}).resize();
var interval1_id = false, interval2_id = false;
jQuery('.am-tabs-wrapper').mousemove(function(e) {
var context = jQuery('.am-tabs-wrapper');
var left = jQuery('.am-tabs-wrapper').offset().left;
var right = left + jQuery('.am-tabs-wrapper').width();
if (!interval1_id && e.clientX > (right - tolerance)) {
interval1_id = setInterval(function(){
jQuery('.am-tabs', context).css({
marginLeft: Math.max(
-1 * (w - right + left + 1),
parseInt(jQuery('.am-tabs', context).css('marginLeft')) - step
) + 'px'
});
step += 10;
}, speed * 1000);
} else if (!interval2_id && e.clientX < (left + tolerance)) {
interval2_id = setInterval(function(){
jQuery('.am-tabs', context).css({
marginLeft: Math.min(
0,
parseInt(jQuery('.am-tabs', context).css('marginLeft')) + step
) + 'px'
});
step += 10;
}, speed * 1000);
} else if (e.clientX >= (left + tolerance) && e.clientX <= (right - tolerance)) {
clearInterval(interval1_id);
clearInterval(interval2_id);
interval1_id = interval2_id = false;
step = initialStep;
}
});
jQuery('.am-tabs-wrapper').mouseleave(function(e) {
clearInterval(interval1_id);
clearInterval(interval2_id);
interval1_id = interval2_id = false;
step = initialStep;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment