Difference between revisions of "Team:TP-CC San Diego/Templates/NavBar"

Line 8: Line 8:
  
 
<style>
 
<style>
 +
.nav-animation a:before
 +
{
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
    width: 2px;
 +
    height: 0px;
 +
    background: #FFF;
 +
    content: "";
 +
    opacity: 1;
 +
    transition: all 0.3s;
 +
}
 +
 +
.nav-animation a:after
 +
{
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
    width: 100%;
 +
    height: 2px;
 +
    background: #FFF;
 +
    content: "";
 +
    opacity: 1;
 +
    transition: all 0.3s;
 +
}
 +
 +
.nav-animation a:hover:before
 +
{
 +
    height: 100%;
 +
}
 +
 +
.nav-animation a:hover:after
 +
{
 +
    opacity: 0;
 +
    top: 100%;
 +
}
 +
 
#navbar  
 
#navbar  
 
{
 
{
Line 93: Line 130:
 
<div id = "navbar">
 
<div id = "navbar">
 
<div id="navbar-fill">
 
<div id="navbar-fill">
−
<div class="dropdown">
+
<div class="dropdown nav-animation">
 
   <a href = "https://2017.igem.org/Team:TP-CC_San_Diego"> <button class = "dropbtn" class id = "title" style = "color: white"> Home </button> </a>
 
   <a href = "https://2017.igem.org/Team:TP-CC_San_Diego"> <button class = "dropbtn" class id = "title" style = "color: white"> Home </button> </a>
  

Revision as of 04:02, 15 October 2017