Team:NYMU-Taipei/TopBar

From 2014.igem.org

(Difference between revisions)
m
 
(19 intermediate revisions not shown)
Line 12: Line 12:
   cursor:pointer;
   cursor:pointer;
   font:15px Verdana;
   font:15px Verdana;
 +
  font-weight:bold;
   text-decoration:none;
   text-decoration:none;
   line-height:50px;
   line-height:50px;
}
}
-
div.navbt_in{
+
span.navbt{
   width:150px;
   width:150px;
   height:50px;
   height:50px;
Line 24: Line 25:
   box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
   box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
   cursor:pointer;
   cursor:pointer;
-
}
 
-
div.navbt_in, div.navbt_out {
 
-
  margin:12px;
 
}
}
</style>
</style>
Line 35: Line 33:
<script type="text/javascript" language="javascript">
<script type="text/javascript" language="javascript">
$( document ).ready(function() {
$( document ).ready(function() {
-
     $('.navbt_in')
+
     $('.navbt')
         .on('mouseover', function(){
         .on('mouseover', function(){
             $(this).stop(true).animate({
             $(this).stop(true).animate({
                 borderWidth: '12px',
                 borderWidth: '12px',
-
                margin: '0px',
+
 
                 color: 'rgba(0,0,0,0.8)'
                 color: 'rgba(0,0,0,0.8)'
             }, 300, 'easeOutSine');
             }, 300, 'easeOutSine');
Line 46: Line 44:
             $(this).stop(true).animate({
             $(this).stop(true).animate({
                 borderWidth: '0px',
                 borderWidth: '0px',
-
                margin: '12px',
 
                 color: '#696969'
                 color: '#696969'
             }, 300, 'easeOutSine');
             }, 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>
</script>
Line 55: Line 95:
<nav class="navigation">
<nav class="navigation">
   <li>
   <li>
-
      <a>
+
<a href="https://2014.igem.org/Team:NYMU-Taipei/synthetic">
-
        <div class="navbt_out" style="margin-top:1px;"><div class="navbt_in">synthetic biology</div><div>
+
<span class="navbt navbt1" style="margin-top:1px;display:block;" >synthetic biology</span>
-
      </a>
+
</a>
   </li>
   </li>
   <li>
   <li>
-
      <a><div class="navbt_out" style="margin-top:-10px;"><div class="navbt_in">NYMU-Taipei</div><div>
+
<a href="https://2014.igem.org/Team:NYMU-Taipei/nymu">
-
      </a>   
+
<span class="navbt navbt2" style="margin-top:-10px;display:block;">NYMU-Taipei</span>
 +
</a>   
   </li>
   </li>
   <li>
   <li>
-
      <a><div class="navbt_out" style="margin-top:20px;"><div class="navbt_in">News</div></div>
+
<a href="https://2014.igem.org/Team:NYMU-Taipei/news">
-
      </a>
+
<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"