Biomod/2011/TeamJapan/Sendai/About wiki/Wikidesign/draft3

From OpenWetWare
Jump to navigationJump to search

<html> 

   <head>

       <title>Slide Down Box Menu with jQuery and CSS3</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
       <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
       <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>

    <link rel="stylesheet" href="http://gel.ym.edu.tw/~evelyn132/igem/css/style.css" type="text/css" media="screen"/>  



       <style>


span.reference{ position:fixed; left:0px; bottom:0px; font-size:12px; } span.reference a{ color:#ccc; text-transform:uppercase; text-decoration:none; text-shadow:1px 1px 1px #000; margin-right:2px; } span.reference a:hover{ color:#ccc; } ul.sdt_menu{ margin-top:100px; 

                               width:1500px;

align:center; 

                       }

#logo { 

               margin-top: -0px; margin-left: -0px;
               text-align:center
               }

</style> 

   </head>
 
 <body>

<center> <div id='logo'> <img src="http://openwetware.org/images/c/c4/TeamSendai-logo3.png" width="650"> </div> </center> 

   <div id="a1">

<div class="content">

<ul id="sdt_menu" class="sdt_menu"> <li> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai"> <img src="http://openwetware.org/images/c/c4/TeamSendai-logo3.png" alt="" width="150"/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Home</span> <span class="sdt_descr">Get to HOME</span> </span> </a> </li> <li> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Project"> <!-- <img src="#" alt=""/> --> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Project</span> <!-- <span class="sdt_descr">Our Idea</span>--> </span> </a> <!--<div class="sdt_box"> <a href="http://2011.igem.org/Team:NYMU-Taipei/concept-on-interface-and-biomedicine">Concept</a> <a href="http://2011.igem.org/Team:NYMU-Taipei/brainstorming-(tagcloud)">Brainstorming</a> <a href="http://2011.igem.org/Team:NYMU-Taipei/background-review">Background Review</a> </div>--> </li> <li> <a href="#"> <!-- <img src="http://openwetware.org/wiki/Image:Spider_and_simulation_spider.jpg" alt="" width="150" height="150"/> --> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Computational design</span> <span class="sdt_descr"></span> </span> </a> <div class="sdt_box"> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Legs">Legs design</a> <!--<a href="http://2011.igem.org/Team:NYMU-Taipei/modelling-protein-structure-champ-design">Protein Modelling</a>--> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Simulation">Simulation</a> <!--<a href="http://2011.igem.org/Team:NYMU-Taipei/chassis">Chassis</a> <a href="http://2011.igem.org/Team:NYMU-Taipei/synthoprime">SynthoPrime</a> <a href="http://2011.igem.org/Team:NYMU-Taipei/lab-protocols">Lab Protocol</a>--> </div> </li> <li> <a href="#"> <img src="http://openwetware.org/images/6/6b/%E7%94%BB%E5%83%8F_008.jpg" alt="" width="150" height="150"/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Results</span> <span class="sdt_descr"></span> </span> </a> <div class="sdt_box"> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Result">Electrophoresis</a> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Result Atomic Force Microscope">AFM</a> <!--<a href="http://2011.igem.org/Team:NYMU-Taipei/results/chassis1">Chassis</a> <a href="http://2011.igem.org/Team:NYMU-Taipei/results/parts">Parts</a> <a href="http://2011.igem.org/Team:NYMU-Taipei/results/international-collaboration(bloc-magneto-worldwide)">International Collaboration</a>--> </div> </li> <li> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Notes"> <!-- <img src="#" alt="" width="150" height="150"/>--> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Notes</span> <span class="sdt_descr"></span> </span> </a> <!--<div class="sdt_box"> <a href="http://2011.igem.org/Team:NYMU-Taipei/synthetic-neurobiology">Synthetic Neurobiology</a> <a href="http://2011.igem.org/Team:NYMU-Taipei/human-practices">Human Practice</a> <a href="http://2011.igem.org/Team:NYMU-Taipei/evaluation---safety-assessment">Evaluation& Safety Assessment</a> </div>--> </li> <li> <a href="#"> <!-- <img src="#" alt="" width="150" height="150"/> --> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">others</span> <span class="sdt_descr"></span> </span> </a> <div class="sdt_box"> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Supports">Supports</a> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Team">Team</a> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Resources"> Resources </a> <a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Acknowledgments"> Acknowledgments </a> </div> </li> </ul> </div>


</div>


</div> 

       <!-- The JavaScript -->
      <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://gel.ym.edu.tw/~evelyn132/igem/jquery.easing.1.3.js"></script> 

       <script type="text/javascript">
           $(function() {

/** * for each menu element, on mouseenter, * we enlarge the image, and show both sdt_active span and * sdt_wrap span. If the element has a sub menu (sdt_box), * then we slide it - if the element is the last one in the menu * 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':'155px', 'height':'155px', 'left':'0px' },400,'easeOutBack') .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'140px'},500,'easeOutBack') .andSelf() .find('.sdt_active') .stop(true) .animate({'height':'155px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '155px'; if($elem.parent().children().length == $elem.index()+1) left = '-155px'; $sub_menu.show().animate({'left':left},200); } }); }).bind('mouseleave',function(){ var $elem = $(this); var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length) $sub_menu.hide().css('left','0px');

$elem.find('.sdt_active') .stop(true) .animate({'height':'0px'},300) .andSelf().find('img') .stop(true) .animate({ 'width':'0px', 'height':'0px', 'left':'85px'},400) .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'25px'},500); }); 

           });
       </script>　　



   </body>

</html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2011/TeamJapan/Sendai/About_wiki/Wikidesign/draft3&oldid=553017"