Horizontal Scrollable Nav Menu in Angular Js - css

Question

Follwing is a image for the horizontal scroll bar menu , i am trying to achieve with angular js.
Using $swipe service of angular js to perform this action.
Able to achieve the function calls at directives ng-swipe-left and ng-swipe-right.
As i have set the overflow-x:hidden for the items in the starting , how do i change the css or make the menu scrollable at the ng-swipe-left or ng-swipe-right.
Any other better suggestion to perform this action is welcomed.
Trying to make this happen by this Example . on ng-swipe-left and ng-swipe-right , incereasing /decreasing the counter below , indeed have to make the menu bar scroll.
<div ng-swipe-left="prev($event)" ng-swipe-right="next($event)">
Thanks in advance.

Answer 1

You could use ng-class to add the scroll effect and to show the menu you could use the $scope.index too.
I've added a boolean to change how the menu opens because I'm not sure how you'd like to open the menu.
If var openDirRight is true then index of the menu selection goes from 0 to 3 (3 = length of menu array). If it's false it goes from 0 to -3.
Later you could add $state.go('page' + index_with_formatting) to transition to the menu item.
Please have a look at the demo below or in this fiddle.
(The buttons are just for debugging on desktop because I'm not sure how to trigger the swipe on desktop.)
var app = angular.module('myapp', ['ngTouch']);
app.controller('MyCtrl', function MyCtrl($scope) {
var openDirRight = true; // true = swipe left to right shows menu index > 0
// false = swipe right to left shows menu index < 0
var stopActions = function ($event) {
if ($event.stopPropagation) {
$event.stopPropagation();
}
if ($event.preventDefault) {
$event.preventDefault();
}
$event.cancelBubble = true;
$event.returnValue = false;
};
// Carousel thing
$scope.index = 0;
// Hide menu
$scope.showMenu = false;
// Links
$scope.navigation = [{
title: "Page A",
href: "#pageA"
}, {
title: "Page B",
href: "#pageB"
}, {
title: "Page C",
href: "#pageC"
}];
$scope.checkMenuVisibility = function() {
$scope.showMenu = openDirRight ? $scope.index > 0 : $scope.index < 0;
};
$scope.isActive = function(index) {
return ( (openDirRight ? 1: -1 ) * $scope.index - 1 ) === index;
};
// Increment carousel thing
$scope.next = function ($event) {
stopActions($event);
$scope.index++;
// limit index
if ( openDirRight ) {
if ( $scope.index > $scope.navigation.length)
$scope.index = $scope.navigation.length;
}
else {
if ( $scope.index > 0)
$scope.index = 0;
}
$scope.checkMenuVisibility();
};
// Decrement carousel thing
$scope.prev = function ($event) {
stopActions($event);
$scope.index--;
// limit index
console.log($scope.index);
if ( !openDirRight ) {
if ($scope.index < -$scope.navigation.length) {
console.log('limited to -3');
$scope.index = -$scope.navigation.length;
}
}
else if ( $scope.index < 0 ) {
$scope.index = 0;
}
$scope.checkMenuVisibility();
};
});
html, body, #page {
height: 100%;
min-height: 100%;
}
.box {
background-color: #EFEFEF;
box-shadow: 0 1px 2px #dedede;
border: 1px solid #ddd;
border-radius: 4px;
}
.menu {
/*float: left;*/
/*min-height:100%;*/
/*width: 98%;*/
}
.menu ul {
}
.menu_item {
display: inline-block;
line-height:2;
}
.menu_link {
display:block;
padding-left:1em;
}
.menu_link:hover {
background: #DEDEDE;
}
.menu-grip {
float:right;
height:5em;
line-height:.5;
padding-top:2em;
text-align:center;
width:1em;
}
h1 {
background:black;
color:white;
font-size:1.1em;
line-height:1.3;
}
.big-swiper {
font-size: 5em;
height:3em;
line-height:3;
margin:.5em auto;
text-align:center;
width:3em;
}
.big-swiper:before {
content:'<\a0';
color:#dedede;
font-weight:700;
}
.big-swiper:after {
content:'\a0>';
color:#dedede;
font-weight:700;
}
.active {
background-color: blue;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-touch.js"></script>
<div id="page" ng-cloak ng-app='myapp' ng-controller="MyCtrl" ng-swipe-left="">
<h1>Angular Swipe Menu</h1>
<div class="menu-grip box" ng-show="!showMenu" ng-click="showMenu = true">.<br />.<br />.</div>
<nav class="menu box" ng-show="showMenu"> <!-- ng-swipe-right="showMenu = false">-->
<ul>
<li class="menu_item" ng-repeat='nav in navigation track by $index'><a class="menu_link" ng-href="{{nav.href}}" ng-class="{'active': isActive($index)}">{{nav.title}}{{$index}}</a>
</li>
</ul>
</nav>
<!-- buttons for testing on desktop -->
<button ng-click="next($event)">swipe right</button>
<button ng-click="prev($event)" class="pull-right">swipe left</button>
<div class="big-swiper box" ng-swipe-right="next($event)" ng-swipe-left="prev($event)">{{index}}</div>
</div>