<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
angular.module('myApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent':{
templateUrl: 'home.html',
controller: 'HomeController'
}
}
})
.state('app.about', {
url: '/about',
views: {
'menuContent':{
templateUrl: 'about.html',
controller: 'AboutController'
}
}
});
$urlRouterProvider.otherwise('/app/home');
})
.controller('AppCtrl',function($scope, $location) {})
.controller('HomeController',function($scope, $location) {
$scope.title = "Home Page";
$scope.items = [{"name":"Item 1"},{"name":"Item 2"},
{"name":"Item 3"},{"name":"Item 4"},
{"name":"Item 5"},{"name":"Item 6"},
{"name":"Item 7"},{"name":"Item 8"},
{"name":"Item 9"},{"name":"Item 10"},
{"name":"Item 11"},{"name":"Item 12"},
{"name":"Item 13"},{"name":"Item 14"},
{"name":"Item 15"},{"name":"Item 16"},
{"name":"Item 17"},{"name":"Item 18"},
{"name":"Item 19"},{"name":"Item 20"}];
})
.controller('AboutController',function($scope, $location) {
$scope.title = "About Page";
});
/* Styles go here */
ion-scroll{
height:200px;
width:100%;
}
.myItemContainer{
width: 3020px;
}
.myItem{
background-color: #595959;
display: inline-block !important;
font-size: 0.8em;
height: 200px;
margin: 5px;
text-align: center;
text-decoration: none;
text-shadow: none;
width: 140px;
}
.myItem:nth-child(2n+2) {
background-color: #003F72;
color: #fff;
}
.myItem:first-child{
margin-left: 10px;
}
<ion-view title="{{title}}" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content>
<ion-scroll direction="x">
<div class="myItemContainer">
<div class="myItem" ng-repeat="item in items">
{{item.name}}
</div>
</div>
</ion-scroll>
<ion-scroll direction="x">
<div class="myItemContainer">
<div class="myItem" ng-repeat="item in items">
{{item.name}}
</div>
</div>
</ion-scroll>
<ion-scroll direction="x">
<div class="myItemContainer">
<div class="myItem" ng-repeat="item in items">
{{item.name}}
</div>
</div>
</ion-scroll>
<ion-scroll direction="x">
<div class="myItemContainer">
<div class="myItem" ng-repeat="item in items">
{{item.name}}
</div>
</div>
</ion-scroll>
<ion-scroll direction="x">
<div class="myItemContainer">
<div class="myItem" ng-repeat="item in items">
{{item.name}}
</div>
</div>
</ion-scroll>
</ion-content>
<div class="bar bar-footer bar-stable">
<div class="title">
Bam! A Footer!
</div>
</div>
</ion-view>
<ion-view title="{{title}}" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content>
About this!
</ion-content>
<div class="bar bar-footer bar-stable">
<div class="title">
Bam! Another Footer!
</div>
</div>
</ion-view>
<ion-side-menus>
<ion-pane ion-side-menu-content edge-drag-threshold="true">
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content>
<ion-list>
<a class="item item-icon-right" href="#/app/home">
Home
<i class="icon ion-chevron-right"></i>
</a>
<a class="item item-icon-right" href="#/app/about">
About
<i class="icon ion-chevron-right"></i>
</a>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>