Skip to content

Instantly share code, notes, and snippets.

@josesaldana

josesaldana/index.html

Created April 27, 2015 23:16
Show Gist options
  • Save josesaldana/0975fa953196a6cf8167 to your computer and use it in GitHub Desktop.
Save josesaldana/0975fa953196a6cf8167 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html lang="en">
<head>
<title>Test</title>
<style id="jsbin-css">
#content {
border: 1px solid #000;
height: 200px;
overflow: hidden;
}
#top-content {
height: 100px;
}
.nav .tabs {
list-style-type: none;
text-align: center;
margin-bottom: 0;
}
.nav .tabs li {
padding: 5px;
border: 1px solid #aaa;
display: inline-block;
border-bottom: 0;
}
.nav-content {
border-top: 1px solid #aaa;
}
@-webkit-keyframes fadeIn {
0% {
background-color: transparent;
}
100% {
background-color: red;
}
}
@-webkit-keyframes fadeOut {
0% {
background-color: red;
}
100% {
background-color: transparent;
}
}
.nav-content-body .ng-enter {
-webkit-animation: fadeIn 2s;
}
.nav-content-body .ng-leave {
-webkit-animation: fadeOut 2s;
}
</style>
</head>
<body ng-app="app">
<div id="content" ng-controller="MyController">
<div id="top-content">
Top content
</div>
<div class="nav">
<ul class="tabs">
<li>
<a href="#" ng-click="tab = 1">
Tab 1
</a>
</li>
<li>
<a href="#" ng-click="tab = 2">
Tab 2
</a>
</li>
</ul>
</div>
<div class="nav-content">
<div id="content1" class="nav-content-body" ng-if="tab == 1">
<ul>
<li>Content 1 1</li>
<li>Content 1 2</li>
<li>Content 1 3</li>
<li>Content 1 4</li>
<li>Content 1 5</li>
</ul>
</div>
<div id="content2" class="nav-content-body" ng-if="tab == 2">
<ul>
<li>Content 2 1</li>
<li>Content 2 2</li>
<li>Content 2 3</li>
<li>Content 2 4</li>
<li>Content 2 5</li>
</ul>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.js"></script>
<script id="jsbin-javascript">
var app = angular.module('app', ['ngAnimate']);
app.controller('MyController', ['$scope', function MyController($scope) {
$scope.tab = 0;
}]);
</script>
<script id="jsbin-source-html" type="text/html"><html lang="en">
<head>
<title>Test</title>
</head>
<body ng-app="app">
<div id="content" ng-controller="MyController">
<div id="top-content">
Top content
</div>
<div class="nav">
<ul class="tabs">
<li>
<a href="#" ng-click="tab = 1">
Tab 1
</a>
</li>
<li>
<a href="#" ng-click="tab = 2">
Tab 2
</a>
</li>
</ul>
</div>
<div class="nav-content">
<div id="content1" class="nav-content-body" ng-if="tab == 1">
<ul>
<li>Content 1 1</li>
<li>Content 1 2</li>
<li>Content 1 3</li>
<li>Content 1 4</li>
<li>Content 1 5</li>
</ul>
</div>
<div id="content2" class="nav-content-body" ng-if="tab == 2">
<ul>
<li>Content 2 1</li>
<li>Content 2 2</li>
<li>Content 2 3</li>
<li>Content 2 4</li>
<li>Content 2 5</li>
</ul>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#content {
border: 1px solid #000;
height: 200px;
overflow: hidden;
}
#top-content {
height: 100px;
}
.nav {
.tabs {
list-style-type: none;
text-align: center;
margin-bottom: 0;
li {
padding: 5px;
border: 1px solid #aaa;
display: inline-block;
border-bottom: 0;
}
}
}
.nav-content {
border-top: 1px solid #aaa;
}
@-webkit-keyframes fadeIn {
0% {
background-color: transparent;
}
100% {
background-color: red;
}
}
@-webkit-keyframes fadeOut {
0% {
background-color: red;
}
100% {
background-color: transparent;
}
}
.nav-content-body {
.ng-enter {
-webkit-animation: fadeIn 2s;
}
.ng-leave {
-webkit-animation: fadeOut 2s;
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('app', ['ngAnimate']);
app.controller('MyController', ['$scope', function MyController($scope) {
$scope.tab = 0;
}]);</script></body>
</html>
Raw
jsbin.puyisutoke.css
#content {
border: 1px solid #000;
height: 200px;
overflow: hidden;
}
#top-content {
height: 100px;
}
.nav .tabs {
list-style-type: none;
text-align: center;
margin-bottom: 0;
}
.nav .tabs li {
padding: 5px;
border: 1px solid #aaa;
display: inline-block;
border-bottom: 0;
}
.nav-content {
border-top: 1px solid #aaa;
}
@-webkit-keyframes fadeIn {
0% {
background-color: transparent;
}
100% {
background-color: red;
}
}
@-webkit-keyframes fadeOut {
0% {
background-color: red;
}
100% {
background-color: transparent;
}
}
.nav-content-body .ng-enter {
-webkit-animation: fadeIn 2s;
}
.nav-content-body .ng-leave {
-webkit-animation: fadeOut 2s;
}
Raw
jsbin.puyisutoke.js
var app = angular.module('app', ['ngAnimate']);
app.controller('MyController', ['$scope', function MyController($scope) {
$scope.tab = 0;
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment