Item: Card Nav Test
Rating: 3.4
Author: -Infamous

0 Downloads
32 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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
  }
});

Comments

More from -Infamous

Card Nav Test

In this example below you will see how to do a Card Nav Test with some HTML / CSS and Javascript

Technologies

Comments

More from -Infamous

A Pen by Greg J Bales

A Pen by Greg J Bales

A Pen by Greg J Bales

get a string after a specific character js

You Might Also Like

anuglar+svg+tweenmax

ITP 104 - 09-26-17 - forms.html

Loading Amiation

Vue & GSAP

nicehashe api

A Pen by Tanmay

Jim and Lori

Slide down/up with transform scale