Team:NYMU-Taipei/Navigation

From 2013.igem.org

(Difference between revisions)
 
(157 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:NYMU-Taipei/Navigation/jQuery_Easing_v1.3}}
 
<html>
<html>
<head>
<head>
<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 29: Line 35:
height:inherit;
height:inherit;
z-index:12;
z-index:12;
-
background: #200b03;
+
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 42: Line 48:
left: 63px;
left: 63px;
z-index:100;
z-index:100;
-
-moz-box-shadow:0px 0px 4px #000;
+
 
-
-webkit-box-shadow:0px 0px 4px #000;
+
-
box-shadow:0px 0px 4px #000;
+
}
}
ul.sdt_menu li span.sdt_wrap{
ul.sdt_menu li span.sdt_wrap{
Line 68: 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 82: Line 88:
   float: left;
   float: left;
   margin: 0;
   margin: 0;
-
   padding-top: 15px;
+
   padding-top: 17px;
   text-align: center;
   text-align: center;
clear:both;
clear:both;
Line 101: Line 107:
top:60px;
top:60px;
left:0px;
left:0px;
 +
        padding-top: 15px;
display:none;
display:none;
background:#000;
background:#000;
Line 107: Line 114:
float:left;
float:left;
clear:both;
clear:both;
-
  font-size: 20px;
+
        font-size: 20px;
line-height:30px;
line-height:30px;
-
color:#0B75AF;
+
color: #3399CC;
-
}
+
-
ul.sdt_menu li div.sdt_box a:first-child{
+
-
margin-top:15px;
+
}
}
 +
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="#">
+
<a href="https://2013.igem.org/Team:NYMU-Taipei">
-
<img src="images/2.jpg" alt=""/>
+
<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 164:
</li>
</li>
         <li>
         <li>
-
<a href="#">
+
<a href="https://2013.igem.org/Team:NYMU-Taipei/Team">
-
<img src="images/5.jpg" alt=""/>
+
<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 139: Line 173:
</li>
</li>
<li>
<li>
-
<a href="#">
+
<a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Overview">
-
<img src="images/1.jpg" alt=""/>
+
<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 146: Line 180:
</span>
</span>
</a>
</a>
-
<div class="sdt_box">
+
<div class="sdt_box" style="height: 270px; width: 190px;">
-
<a href="#">Websites</a>
+
                                                        <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Overview">Overview</a>
-
<a href="#">Illustrations</a>
+
<a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Enter">Entering of Bee.coli</a>
-
<a href="#">Photography</a>
+
                                                        <a href="https://2013.igem.org/Team:NYMU-Taipei/Project/Inhibition/Prohibition">Prohibiting Sprouting</a>
 +
<a href="https://2013.igem.org/Team:NYMU-
 +
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="#">
+
<a href="https://2013.igem.org/Team:NYMU-Taipei/Experiments">
-
<img src="images/3.jpg" alt=""/>
+
<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 160: Line 206:
</span>
</span>
</a>
</a>
 +
                                        <div class="sdt_box" style="width: 155px;">
 +
                                                        <a href="https://2013.igem.org/Team:NYMU-Taipei/Experiments/Protocols">Protocols</a>
 +
                                                        <a href="https://2013.igem.org/Team:NYMU-Taipei/Experiment/Wet_Lab">Data</a>
 +
                                                        <a href="https://2013.igem.org/Team:NYMU-Taipei/Experiments/Functional_Assays">Notes</a>
 +
                                        </div>
</li>
</li>
<li>
<li>
-
<a href="#">
+
<a href="https://2013.igem.org/Team:NYMU-Taipei/Modeling/Overview">
-
<img src="images/4.jpg" alt=""/>
+
<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">Modelling</span>
+
<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="#">
+
<a href="https://2013.igem.org/Team:NYMU-Taipei/Human_Practice">
-
<img src="images/5.jpg" alt=""/>
+
<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">Out Reach</span>
+
<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="#">
+
<a href="https://2013.igem.org/Team:NYMU-Taipei/Safety">
-
<img src="images/6.jpg" alt=""/>
+
<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 187: Line 254:
</span>
</span>
</a>
</a>
-
<div class="sdt_box">
 
-
<a href="#">Job Board Website</a>
 
-
<a href="#">Shopping Cart</a>
 
-
<a href="#">Interactive Maps</a>
 
-
</div>
 
</li>
</li>
</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>
-
<script type="text/javascript" src="http://https://2013.igem.org/Team:NYMU-Taipei/Navigation/jQuery_Easing_v1.3"></script>      
+
</html>
 +
{{:Team:NYMU-Taipei/Navigation/jQuery_Easing_v1.3}}
 +
<html>
<script type="text/javascript">
<script type="text/javascript">
-
            $(function() {
+
  $(function() {
/**
/**
* for each menu element, on mouseenter,  
* for each menu element, on mouseenter,  
Line 207: 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(){
+
  $('#sdt_menu > li').bind('mouseenter',function(){
-
var $elem = $(this);
+
      var $elem = $(this);
-
$elem.find('img')
+
      $elem.find('img')
-
.stop(true)
+
  .stop(true)
-
.animate({
+
    .animate({
-
'width':'127px',
+
'width':'127px',
-
'height':'127px',
+
'height':'127px',
-
'left':'0px'
+
'left':'0px'
-
},400,'easeOutBack')
+
  },400,'easeOutBack')
-
.andSelf()
+
    .andSelf()
-
.find('.sdt_wrap')
+
  .find('.sdt_wrap')
-
    .stop(true)
+
  .stop(true)
-
.animate({'top':'90px'},500,'easeOutBack')
+
  .animate({'top':'90px'},500,'easeOutBack')
-
.andSelf()
+
  .andSelf()
-
.find('.sdt_active')
+
  .find('.sdt_active')
-
    .stop(true)
+
  .stop(true)
-
.animate({'height':'127px'},200,function(){
+
  .animate({'height':'127px'},200,function(){
-
var $sub_menu = $elem.find('.sdt_box');
+
      var $sub_menu = $elem.find('.sdt_box');
-
if($sub_menu.length){
+
      if($sub_menu.length){
-
var left = '127px';
+
          var left = '127px';
-
if($elem.parent().children().length == $elem.index()+1)
+
  if($elem.parent().children().length == $elem.index()+1)
-
left = '-127px';
+
  left = '-127px';
-
$sub_menu.show().animate({'left':left},100);
+
  $sub_menu.show().animate({'left':left},100)
-
}
+
                     
-
});
+
                }
-
}).bind('mouseleave',function(){
+
          })
 +
  }).bind('mouseleave',function(){
var $elem = $(this);
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
var $sub_menu = $elem.find('.sdt_box');
Line 252: Line 318:
.animate({'top':'0px'},500);
.animate({'top':'0px'},500);
});
});
-
            });
+
                });
         </script>
         </script>
</html>
</html>

Latest revision as of 02:50, 29 October 2013

Retrieved from "http://2013.igem.org/Team:NYMU-Taipei/Navigation"