Team:NYMU-Taipei/TopBar

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style> nav.navigation{ list-style-type:none; } nav.navigation li{ float:left; padding-left:20px; } nav.navigation a{ cursor:pointer; } </style> </head> <na...")
m
 
(33 intermediate revisions not shown)
Line 10: Line 10:
}
}
nav.navigation a{
nav.navigation a{
 +
  cursor:pointer;
 +
  font:15px Verdana;
 +
  font-weight:bold;
 +
  text-decoration:none;
 +
  line-height:50px;
 +
}
 +
span.navbt{
 +
  width:150px;
 +
  height:50px;
 +
  background-color:#FFF68F;
 +
  text-align:center;
 +
  border-radius:0px 5px 0px 6px;
 +
  border:solid 0px;
 +
  box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
   cursor:pointer;
   cursor:pointer;
}
}
</style>
</style>
</head>
</head>
 +
</html>
 +
{{:Team:NYMU-Taipei/TopBarScripts}}
 +
<html>
 +
<script type="text/javascript" language="javascript">
 +
$( document ).ready(function() {
 +
    $('.navbt')
 +
        .on('mouseover', function(){
 +
            $(this).stop(true).animate({
 +
                borderWidth: '12px',
 +
 +
                color: 'rgba(0,0,0,0.8)'
 +
            }, 300, 'easeOutSine');
 +
        })
 +
        .on('mouseout', function(){
 +
            $(this).stop(true).animate({
 +
                borderWidth: '0px',
 +
                color: '#696969'
 +
            }, 300, 'easeOutSine');
 +
        });
 +
    $('.navbt1')
 +
        .on('mouseover', function(){
 +
            $('#obj2').css({opacity:1,top:10,left:300,});
 +
            $('#obj2').stop(true).animate({
 +
                top:5,
 +
                left:250,
 +
            }, 300, 'easeOutSine');
 +
        })
 +
        .on('mouseout', function(){
 +
            $('#obj2').stop(true).animate({
 +
                opacity:0,
 +
            }, 200, 'easeOutSine');
 +
        });
 +
    $('.navbt2')
 +
        .on('mouseover', function(){
 +
            $('#obj3').stop(true).animate({
 +
                width:80,
 +
            }, 300, 'easeOutSine');
 +
        })
 +
        .on('mouseout', function(){
 +
            $('#obj3').stop(true).animate({
 +
                width:60,
 +
            }, 300, 'easeOutSine');
 +
        });
 +
    $('.navbt3')
 +
        .on('mouseover', function(){
 +
            $('#obj1').stop(true).animate({
 +
                top: 90,
 +
                left:650,
 +
            }, 300, 'easeOutSine');
 +
        })
 +
        .on('mouseout', function(){
 +
            $('#obj1').stop(true).animate({
 +
                top: 80,
 +
                left:850,
 +
            }, 300, 'easeOutSine');
 +
        });
 +
    $(window).scroll(function (event){
 +
        var y = $(this).scrollTop();
 +
        $('#flow_div').css({
 +
            top:250+y,
 +
        });
 +
    });
 +
});
 +
</script>
 +
<nav class="navigation">
<nav class="navigation">
   <li>
   <li>
-
      <a>synthetic biology</a>
+
<a href="https://2014.igem.org/Team:NYMU-Taipei/synthetic">
 +
<span class="navbt navbt1" style="margin-top:1px;display:block;" >synthetic biology</span>
 +
</a>
   </li>
   </li>
   <li>
   <li>
-
      <a>NYMU-Taipei</a>   
+
<a href="https://2014.igem.org/Team:NYMU-Taipei/nymu">
 +
<span class="navbt navbt2" style="margin-top:-10px;display:block;">NYMU-Taipei</span>
 +
</a>   
   </li>
   </li>
   <li>
   <li>
-
      <a>News</a>
+
<a href="https://2014.igem.org/Team:NYMU-Taipei/news">
 +
<span class="navbt navbt3" style="margin-top:20px;display:block;">News</span>
 +
</a>
   </li>
   </li>
</nav>
</nav>
</html>
</html>

Latest revision as of 12:04, 5 May 2014

Retrieved from "http://2014.igem.org/Team:NYMU-Taipei/TopBar"