<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Card Nav Test</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid no-padding main-wrap" id="app">
<div class="col-xs-12 no-padding home"
@click="isHomeActive = true;
isAboutActive = false;
isPortfolioActive = false;
isContactActive = false"
:class="{active : isHomeActive}">
<span>home</span>
</div>
<div class="col-xs-12 no-padding about"
@click="isAboutActive = true
isHomeActive = false;
isPortfolioActive = false;
isContactActive = false"
:class="{active : isAboutActive}">
<span>about</span>
</div>
<div class="col-xs-12 no-padding portfolio"
@click="isPortfolioActive = true
isAboutActive = false;
isHomeActive = false;
isContactActive = false"
:class="{active : isPortfolioActive}">
<span>portfolio</span>
</div>
<div class="col-xs-12 no-padding contact"
@click="isContactActive = true
isAboutActive = false;
isPortfolioActive = false;
isHomeActive = false"
:class="{active : isContactActive}">
<span>contact</span>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-Infamous/card-nav-test-QQWKMy */
.no-padding {
margin: 0;
padding: 0;
}
.main-wrap {
height: 100vh;
}
span {
color: #FFF;
text-transform: uppercase;
display: block;
margin-top: 8px;
margin-left: 5px;
}
.home,
.about,
.portfolio,
.contact {
height: 35px;
transition: height 0.2s ease;
}
.home {
background-color: #6a1b9a;
}
.about {
background-color: #1976d2;
}
.portfolio {
background-color: #2196f3;
}
.contact {
background-color: #64b5f6;
}
.active {
height: calc(100vh - 105px);
transition: height 0.2s ease;
}
/*Downloaded from https://www.codeseek.co/-Infamous/card-nav-test-QQWKMy */
new Vue({
el: '#app',
data: {
isHomeActive : true,
isAboutActive : false,
isPortfolioActive : false,
isContactActive : false
}
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
Vue js
v2.5.3
