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

From OpenWetWare
Jump to: navigation, search


       <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="" type="text/css" media="screen"/>  


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;




#logo {

               margin-top: -0px; margin-left: -0px;



<center> <div id='logo'> <img src="" width="650"> </div> </center>

   <div id="a1">

<div class="content">

<ul id="sdt_menu" class="sdt_menu"> <li> <a href=""> <img src="" 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=""> <!-- <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="">Concept</a> <a href="">Brainstorming</a> <a href="">Background Review</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">Computational design</span> <span class="sdt_descr"></span> </span> </a> <div class="sdt_box"> <a href="">Legs design</a> <!--<a href="">Protein Modelling</a>--> <a href="">Simulation</a> <!--<a href="">Chassis</a> <a href="">SynthoPrime</a> <a href="">Lab Protocol</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">Results</span> <span class="sdt_descr"></span> </span> </a> <div class="sdt_box"> <a href="">Electrophoresis</a> <a href=" Atomic Force Microscope">AFM</a> <!--<a href="">Chassis</a> <a href="">Parts</a> <a href="">International Collaboration</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">Notes</span> <span class="sdt_descr"></span> </span> </a> <!--<div class="sdt_box"> <a href="">Synthetic Neurobiology</a> <a href="">Human Practice</a> <a href="">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="">Supports</a> <a href="">Team</a> <a href=""> Resources </a> <a href=""> Acknowledgments </a> </div> </li> </ul> </div>



       <!-- The JavaScript -->
      <script type="text/javascript" src=""></script>

<script type="text/javascript" src=""></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'; ${'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); });