Team:NYMU-Taipei/TopBar
From 2014.igem.org
(Difference between revisions)
m |
m |
||
(31 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; | ||
} | } | ||
- | + | span.navbt{ | |
width:150px; | width:150px; | ||
height:50px; | height:50px; | ||
Line 21: | Line 22: | ||
text-align:center; | text-align:center; | ||
border-radius:0px 5px 0px 6px; | border-radius:0px 5px 0px 6px; | ||
+ | border:solid 0px; | ||
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; | ||
} | } | ||
</style> | </style> | ||
- | < | + | </head> |
- | + | </html> | |
+ | {{:Team:NYMU-Taipei/TopBarScripts}} | ||
+ | <html> | ||
<script type="text/javascript" language="javascript"> | <script type="text/javascript" language="javascript"> | ||
$( document ).ready(function() { | $( document ).ready(function() { | ||
Line 33: | Line 37: | ||
$(this).stop(true).animate({ | $(this).stop(true).animate({ | ||
borderWidth: '12px', | borderWidth: '12px', | ||
+ | |||
color: 'rgba(0,0,0,0.8)' | color: 'rgba(0,0,0,0.8)' | ||
- | }, | + | }, 300, 'easeOutSine'); |
}) | }) | ||
.on('mouseout', function(){ | .on('mouseout', function(){ | ||
Line 40: | Line 45: | ||
borderWidth: '0px', | borderWidth: '0px', | ||
color: '#696969' | 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> | </script> | ||
- | + | ||
<nav class="navigation"> | <nav class="navigation"> | ||
<li> | <li> | ||
- | + | <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 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 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