Team:NYMU-Taipei
From 2011.igem.org
Line 1: | Line 1: | ||
{{:Team:NYMU-Taipei/Templates/Header}} | {{:Team:NYMU-Taipei/Templates/Header}} | ||
- | {{: | + | <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:10px; | ||
+ | bottom:10px; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | span.reference a{ | ||
+ | color:#aaa; | ||
+ | text-transform:uppercase; | ||
+ | text-decoration:none; | ||
+ | text-shadow:1px 1px 1px #000; | ||
+ | margin-right:30px; | ||
+ | } | ||
+ | span.reference a:hover{ | ||
+ | color:#ddd; | ||
+ | } | ||
+ | ul.sdt_menu{ | ||
+ | margin-top:150px; | ||
+ | } | ||
+ | h1.title{ | ||
+ | text-indent:-9000px; | ||
+ | background:transparent url(title.png) no-repeat top left; | ||
+ | width:633px; | ||
+ | height:69px; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div id="a1"> | ||
+ | <div class="content"> | ||
+ | |||
+ | <ul id="sdt_menu" class="sdt_menu"> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <img src="image/2.jpg" alt=""/> | ||
+ | <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="image/1.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Idea</span> | ||
+ | <span class="sdt_descr">My 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="image/3.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Design/ | ||
+ | Experiment</span> | ||
+ | <span class="sdt_descr"></span> | ||
+ | </span> | ||
+ | </a> | ||
+ | <div class="sdt_box"> | ||
+ | <a href="#">Optomagnetic Design</a> | ||
+ | <a href="#">Protein Modelling</a> | ||
+ | <a href="#">Immunological Solution</a> | ||
+ | <a href="#">Chassis</a> | ||
+ | <a href="#">SynthoPrime</a> | ||
+ | <a href="#">Lab Protocol</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <img src="image/4.jpg" alt=""/> | ||
+ | <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="#">Optomagnetic Bacteria</a> | ||
+ | <a href="#">Immunological Solution</a> | ||
+ | <a href="#">Chassis</a> | ||
+ | <a href="#">Parts</a> | ||
+ | <a href="#">Lab Journal</a> | ||
+ | <a href="#">International Collaboration</a> | ||
+ | <a href="#">Achievements</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <img src="image/5.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">STS</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& | ||
+ | Sagety Assessment</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <img src="image/6.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Abount Us</span> | ||
+ | <span class="sdt_descr"></span> | ||
+ | </span> | ||
+ | </a> | ||
+ | <div class="sdt_box"> | ||
+ | <a href="#">The School</a> | ||
+ | <a href="#">The Team</a> | ||
+ | <a href="#">China Meetup</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':'170px', | ||
+ | 'height':'170px', | ||
+ | 'left':'0px' | ||
+ | },400,'easeOutBack') | ||
+ | .andSelf() | ||
+ | .find('.sdt_wrap') | ||
+ | .stop(true) | ||
+ | .animate({'top':'140px'},500,'easeOutBack') | ||
+ | .andSelf() | ||
+ | .find('.sdt_active') | ||
+ | .stop(true) | ||
+ | .animate({'height':'170px'},300,function(){ | ||
+ | var $sub_menu = $elem.find('.sdt_box'); | ||
+ | if($sub_menu.length){ | ||
+ | var left = '170px'; | ||
+ | if($elem.parent().children().length == $elem.index()+1) | ||
+ | left = '-170px'; | ||
+ | $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> | ||
+ | |||
{| style="width:965px;border:1px solid gray;" | {| style="width:965px;border:1px solid gray;" | ||
|- | |- |
Revision as of 14:27, 5 October 2011