Team:NYMU-Taipei/Navigation
From 2013.igem.org
(Difference between revisions)
Mastershot (Talk | contribs) |
Mastershot (Talk | contribs) |
||
(147 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<style> | <style> | ||
@import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs); | @import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs); | ||
+ | #menu-icon { | ||
+ | display: hidden; | ||
+ | width: 60px; | ||
+ | height: 60px; | ||
+ | background: url(https://static.igem.org/mediawiki/2013/6/63/NYMU-Taipei_menu-icon.png) no-repeat; | ||
+ | background-size: 60px; | ||
+ | } | ||
ul.sdt_menu{ | ul.sdt_menu{ | ||
margin:0; | margin:0; | ||
Line 28: | Line 35: | ||
height:inherit; | height:inherit; | ||
z-index:12; | z-index:12; | ||
- | background: # | + | background: #382201; |
-moz-box-shadow:0px 0px 2px #000 inset; | -moz-box-shadow:0px 0px 2px #000 inset; | ||
-webkit-box-shadow:0px 0px 2px #000 inset; | -webkit-box-shadow:0px 0px 2px #000 inset; | ||
Line 41: | Line 48: | ||
left: 63px; | left: 63px; | ||
z-index:100; | z-index:100; | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
ul.sdt_menu li span.sdt_wrap{ | ul.sdt_menu li span.sdt_wrap{ | ||
Line 67: | Line 72: | ||
ul.sdt_menu li span span.sdt_link, | ul.sdt_menu li span span.sdt_link, | ||
ul.sdt_menu li span span.sdt_descr, | ul.sdt_menu li span span.sdt_descr, | ||
- | ul.sdt_menu li div.sdt_box a{ | + | ul.sdt_menu li div.sdt_box a, |
+ | ul.sdt_menu li div.sdt_box a sdt_secsub a | ||
+ | { | ||
margin-left:15px; | margin-left:15px; | ||
text-transform:uppercase; | text-transform:uppercase; | ||
Line 100: | Line 107: | ||
top:60px; | top:60px; | ||
left:0px; | left:0px; | ||
+ | padding-top: 15px; | ||
display:none; | display:none; | ||
background:#000; | background:#000; | ||
Line 106: | Line 114: | ||
float:left; | float:left; | ||
clear:both; | clear:both; | ||
- | + | font-size: 20px; | |
line-height:30px; | line-height:30px; | ||
- | color:# | + | color: #3399CC; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | |||
ul.sdt_menu li div.sdt_box a:hover{ | ul.sdt_menu li div.sdt_box a:hover{ | ||
- | color:#fff; | + | color:#fff !important; |
+ | } | ||
+ | ul.sdt_menu li div.sdt_box a.sdt_aWsub{ | ||
+ | margin-right: 30px; | ||
+ | float: right; | ||
+ | font-size: 15px; | ||
+ | line-height:20px; | ||
+ | color: #CDFFFF; | ||
+ | } | ||
+ | ul.sdt_menu li div.sdt_box .sdt_secsub{ | ||
+ | display:block; | ||
+ | position:absolute; | ||
+ | width: 127px; | ||
+ | overflow:hidden; | ||
+ | height:127px; | ||
+ | top:60px; | ||
+ | left:0px; | ||
+ | display:none; | ||
+ | background:#000; | ||
+ | } | ||
+ | ul.sdt_menu li div.sdt_box .sdt_secsub a { | ||
+ | float:left; | ||
+ | clear:both; | ||
+ | font-size: 20px; | ||
+ | line-height:30px; | ||
+ | color:#0B75AF; | ||
+ | } | ||
+ | ul.sdt_menu li div.sdt_box .sdt_secsub a:hover { | ||
+ | color:#fff ; | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Overview" id="menu-icon"></a> | ||
<ul id="sdt_menu" class="sdt_menu"> | <ul id="sdt_menu" class="sdt_menu"> | ||
<li> | <li> | ||
<a href="https://2013.igem.org/Team:NYMU-Taipei"> | <a href="https://2013.igem.org/Team:NYMU-Taipei"> | ||
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/5/58/NYMU-Taipei_home_logo.png" alt=""/> |
<span class="sdt_active"></span> | <span class="sdt_active"></span> | ||
<span class="sdt_wrap"> | <span class="sdt_wrap"> | ||
Line 130: | Line 165: | ||
<li> | <li> | ||
<a href="https://2013.igem.org/Team:NYMU-Taipei/Team"> | <a href="https://2013.igem.org/Team:NYMU-Taipei/Team"> | ||
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/6/6c/NYMU-Taipei_team_logo.png" alt=""/> |
<span class="sdt_active"></span> | <span class="sdt_active"></span> | ||
<span class="sdt_wrap"> | <span class="sdt_wrap"> | ||
Line 138: | Line 173: | ||
</li> | </li> | ||
<li> | <li> | ||
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project"> | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Overview"> |
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/6/69/NYMU-Taipei_Projectlogo.png" alt=""/> |
<span class="sdt_active"></span> | <span class="sdt_active"></span> | ||
<span class="sdt_wrap"> | <span class="sdt_wrap"> | ||
Line 145: | Line 180: | ||
</span> | </span> | ||
</a> | </a> | ||
- | <div class="sdt_box" style=" | + | <div class="sdt_box" style="height: 270px; width: 190px;"> |
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Enter"> | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Overview">Overview</a> |
- | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Enter">Entering of Bee.coli</a> | |
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/ | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Inhibition/Prohibition">Prohibiting Sprouting</a> |
- | + | <a href="https://2013.igem.org/Team:NYMU- | |
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Kill"> | + | Taipei/Project/Inhibition">Inhibiting Infection</a> |
+ | |||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Inhibition/Sensor" class="sdt_aWsub">Sensing Nosema</a> | ||
+ | |||
+ | <a href="https://2013.igem.org/Team:NYMU- | ||
+ | Taipei/Project/Inhibition/Killing" class="sdt_aWsub">Killing Nosema</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Inhibition/Inhibition circuit" class="sdt_aWsub">Circuit</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Kill">Suicide Solution</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/safe">eco-friendly e.coli</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU- | ||
+ | Taipei/Project/Inhibition/Id-Nosema">Identifying Nosema</a> | ||
</div> | </div> | ||
</li> | </li> | ||
<li> | <li> | ||
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/ | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Experiments"> |
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/e/e8/NYMU-Taipei_Exp.png" alt=""/> |
<span class="sdt_active"></span> | <span class="sdt_active"></span> | ||
<span class="sdt_wrap"> | <span class="sdt_wrap"> | ||
Line 161: | Line 206: | ||
</span> | </span> | ||
</a> | </a> | ||
- | <div class="sdt_box"> | + | <div class="sdt_box" style="width: 155px;"> |
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/ | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Experiments/Protocols">Protocols</a> |
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/Experiment/ | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Experiment/Wet_Lab">Data</a> |
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/ | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Experiments/Functional_Assays">Notes</a> |
+ | </div> | ||
</li> | </li> | ||
<li> | <li> | ||
- | <a href="https://2013.igem.org/Team:NYMU-Taipei/ | + | <a href="https://2013.igem.org/Team:NYMU-Taipei/Modeling/Overview"> |
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/0/09/NYMU-Taipei_Mod.png" alt=""/> |
<span class="sdt_active"></span> | <span class="sdt_active"></span> | ||
<span class="sdt_wrap"> | <span class="sdt_wrap"> | ||
- | <span class="sdt_link"> | + | <span class="sdt_link">Modeling</span> |
</span> | </span> | ||
</a> | </a> | ||
+ | <div class="sdt_box" style="width: 135px; height: 160px;"> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Modeling/Overview">Overview</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Modeling/ModSensors">Sensors</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Modeling/MainParts">Main Parts</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Modeling/Ethanol">Ethanol Model</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/Modeling/Linear_epidemic_model">Epidemic Model</a> | ||
+ | |||
+ | </div> | ||
</li> | </li> | ||
<li> | <li> | ||
<a href="https://2013.igem.org/Team:NYMU-Taipei/Human_Practice"> | <a href="https://2013.igem.org/Team:NYMU-Taipei/Human_Practice"> | ||
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/5/52/NYMU-Taipei_Hum.png" alt=""/> |
<span class="sdt_active"></span> | <span class="sdt_active"></span> | ||
<span class="sdt_wrap"> | <span class="sdt_wrap"> | ||
- | <span class="sdt_link"> | + | <span class="sdt_link" style="font-size: 25px; padding-top: 5px; line-height: 1em;">Human Practice</span> |
</span> | </span> | ||
</a> | </a> | ||
+ | <div class="sdt_box" style="width: 185px; height: 160px;"> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/HumanPractice/Overview" style="margin-left: 13px;">Overview</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/HumanPractice/HumOut" style="margin-left: 13px;">Outreach</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/HumanPractice/HumCollab" style="margin-left: 13px;">Collaborations</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/HumanPractice/HumFlows" style="margin-left: 13px;">Flows Built-up</a> | ||
+ | <a href="https://2013.igem.org/Team:NYMU-Taipei/HumanPractice/HumPracticalApp">Practical Applications</a> | ||
+ | </div> | ||
+ | |||
</li> | </li> | ||
<li> | <li> | ||
<a href="https://2013.igem.org/Team:NYMU-Taipei/Safety"> | <a href="https://2013.igem.org/Team:NYMU-Taipei/Safety"> | ||
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2013/6/64/NYMU-Taipei_Safety.png" alt=""/> |
<span class="sdt_active"></span> | <span class="sdt_active"></span> | ||
<span class="sdt_wrap"> | <span class="sdt_wrap"> | ||
Line 195: | Line 257: | ||
</ul> | </ul> | ||
</div> | </div> | ||
+ | |||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | ||
Line 201: | Line 264: | ||
<html> | <html> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | + | $(function() { | |
/** | /** | ||
* for each menu element, on mouseenter, | * for each menu element, on mouseenter, | ||
Line 209: | Line 272: | ||
* we slide it to the left, otherwise to the right | * we slide it to the left, otherwise to the right | ||
*/ | */ | ||
- | + | $('#sdt_menu > li').bind('mouseenter',function(){ | |
- | + | var $elem = $(this); | |
- | + | $elem.find('img') | |
- | + | .stop(true) | |
- | + | .animate({ | |
- | + | 'width':'127px', | |
- | + | 'height':'127px', | |
- | + | 'left':'0px' | |
- | + | },400,'easeOutBack') | |
- | + | .andSelf() | |
- | + | .find('.sdt_wrap') | |
- | + | .stop(true) | |
- | + | .animate({'top':'90px'},500,'easeOutBack') | |
- | + | .andSelf() | |
- | + | .find('.sdt_active') | |
- | + | .stop(true) | |
- | + | .animate({'height':'127px'},200,function(){ | |
- | + | var $sub_menu = $elem.find('.sdt_box'); | |
- | + | if($sub_menu.length){ | |
- | + | var left = '127px'; | |
- | + | if($elem.parent().children().length == $elem.index()+1) | |
- | + | left = '-127px'; | |
- | + | $sub_menu.show().animate({'left':left},100) | |
- | + | ||
- | + | } | |
- | + | }) | |
+ | }).bind('mouseleave',function(){ | ||
var $elem = $(this); | var $elem = $(this); | ||
var $sub_menu = $elem.find('.sdt_box'); | var $sub_menu = $elem.find('.sdt_box'); | ||
Line 254: | Line 318: | ||
.animate({'top':'0px'},500); | .animate({'top':'0px'},500); | ||
}); | }); | ||
- | + | }); | |
</script> | </script> | ||
</html> | </html> |
Latest revision as of 02:50, 29 October 2013