Hey there! I'm currently working on developing a sleek horizontal menu that may have elements extending beyond the window's x-axis. The navigation through the menu is managed by utilizing arrow keys within an Angular controller.
My goal is to incorporate a CSS transition animation that seamlessly shifts the entire menu left or right in response to navigation, ensuring that the active item remains visible at all times. This needs to be achieved without resorting to traditional scrolling, as the window has been set with overflow: hidden.
Initially, I considered using jquery .animate() for this purpose; however, I encountered limitations when attempting to integrate it within an angular controller / directive.
Below is a snippet of the HTML code for the menu:
<section id="catContainer" cat-navigation ng-class="{'disabled': activeLevelIndex > 1}">
<div ng-repeat="category in categories" ng-class="{'active': $index == activeCatIndex }" class="category selectable">
<img class="catImg" ng-src="{{category.image}}" />
<h2>{{category.name}}</h2>
</div>
</section>
Furthermore, here is the code that triggers the movement upon pressing the right/left button:
var current = $("#catContainer .category.active");
var left = current.position().left;
var right = left + current.width();
var shift;
if (right > $(window).width)
shift = -(1.2 * current.width()) + $("#catContainer").css("left-margin");
else if (left < 0){
shift = (1.2 * current.width()) + $("#catContainer").css("left-margin");
}
$("#catContainer").animate({
"margin-left" : shift
}, 400, function() {
console.log("cat anim done.");
});
$("#catContainer").css("margin-left", shift);
Presently, I can see the "cat anim done" message being logged; however, no discernible change occurs in the layout. Any assistance or guidance on resolving this animation issue would be greatly valued and appreciated.