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>



      <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"