Team:SJTU-Software/Project

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
 
(One intermediate revision not shown)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
-
 
{{CSS/Main}}
{{CSS/Main}}
Line 8: Line 5:
<!--main content -->
<!--main content -->
-
<table width="70%" align="center">
 
 +
<p>
-
<!--welcome box -->
+
<style type="text/css">
-
<tr>
+
/* 全局样式 */
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
*{padding:0; margin:0; list-style:none}
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
.roundabout-holder { margin: 70px auto 0px auto; width: 850px; height: 496px; }
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
.roundabout-moveable-item { border-radius: 4px; border: 3px solid rgba(0, 0, 0, 0.08); width: 646px; height: 416px; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
-
<br>On this page you can document your project, introduce your team members, document your progress <br> and share your iGEM experience with the rest of the world! </p>
+
.roundabout-moveable-item img { width: 100%; }
-
<br>
+
.roundabout-in-focus { border: 3px solid rgba(0, 0, 0, 0.2); }
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:SJTU-Software/Project&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
</style>
-
</td>
+
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/jm.js%20?action=raw&ctype=text/js"></script>
-
</tr>
+
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
<style type=“text/css”>  
-
<!-- end welcome box -->
+
body {background: purple url(https://static.igem.org/mediawiki/2014/d/da/Han_bg.jpg); ? <br>background-attachment:fixed         
-
<tr>  
+
</style>
-
<!--navigation menu -->
+
<style type="text/css">
-
<td align="center" colspan="3">
+
.firstHeading {
 +
width: 0px;
 +
        height: 0px;
 +
margin: -38px auto;
 +
padding-top: 0px;
 +
margin-bottom: 0px;
 +
font-family: Georgia, Times, "Times New Roman", serif;
 +
}
-
<table  width="100%">
 
-
<tr heigth="15px"></tr>
 
-
<tr heigth="75px">
 
 +
</style>
 +
<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="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
 +
        <link rel="stylesheet" href="https://2014.igem.org/Team:SJTU-Software/bootstrapmin.css%20?action=raw&ctype=text/css" type="text/css" media="screen"/>
 +
        <style>
 +
body{
 +
background:#333 url(https://static.igem.org/mediawiki/2014/9/98/Bg.jpg)repeat top left ;
 +
font-family:Arial;
 +
}
 +
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:0px;
 +
                               
 +
}
 +
h1.title{
 +
text-indent:-9000px;
 +
background:transparent url(title.png) no-repeat top left;
 +
width:633px;
 +
height:69px;
 +
}
 +
</style>
 +
</p>
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
-
<a href="https://2014.igem.org/Team:SJTU-Software"style="color:#000000">Home </a> </td>
+
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
 +
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
 +
   
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
<!--<body style="background-image:url(https://static.igem.org/mediawiki/2014/6/67/Background2.jpg);background-position:center; background-repeat:repeat-y repeat-x">-->
-
<a href="https://2014.igem.org/Team:SJTU-Software/Team"style="color:#000000"> Team </a> </td>
+
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=SJTU-Software"style="color:#000000"> Official Team Profile </a></td>
 
-
<td style="border:1px solid black" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
<table width="70%" align="center">
-
<a href="https://2014.igem.org/Team:SJTU-Software/Project"style="color:#000000"> Project</a></td>
+
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://2014.igem.org/Team:SJTU-Software/Parts"style="color:#000000"> Parts</a></td>
 
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://2014.igem.org/Team:SJTU-Software/Modeling"style="color:#000000"> Modeling</a></td>
 
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
<!--navigation menu -->
-
<a href="https://2014.igem.org/Team:SJTU-Software/Notebook"style="color:#000000"> Notebook</a></td>
+
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://2014.igem.org/Team:SJTU-Software/Safety"style=" color:#000000"> Safety </a></td>
 
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
<div class="content" align="center" >
-
<a href="https://2014.igem.org/Team:SJTU-Software/Attributions"style="color:#000000"> Attributions </a></td>
+
 +
<img src="https://static.igem.org/mediawiki/2014/7/79/Han_without.jpg"; height=90px; width=1020px>
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
</div>
-
</tr>
+
-
</table>
+
-
 
+
-
</tr>
+
-
</tr>
+
-
</td>
+
-
 
+
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
-
 
+
-
 
+
-
 
+
-
<!--Project content  -->
+
-
<tr><td > <h3> Project Description </h3></td>
+
-
<td ></td >
+
-
<td > <h3> Content</h3></td>
+
-
</tr>
+
-
 
+
-
<tr>
+
-
<td width="45%"  valign="top">
+
-
<p>Tell us more about your project.  Give us background.  Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs) </p>
+
-
<br>
+
-
<h3>References </h3>
+
-
<p>
+
-
iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you though about your project and what works inspired you. </p>
+
-
</td>
+
-
 
+
-
<td></td>
+
-
<td  width="45%"  valign="top">
+
-
<p> You can use these subtopics to further explain your project</p>
+
-
 
+
-
<ol>
+
-
<li>Overall project summary</li>
+
-
<li>Project Details</li>
+
-
<li>Materials and Methods</li>
+
-
<li>The Experiments</li>
+
-
<li>Results</li>
+
-
<li>Data analysis</li>
+
-
<li>Conclusions</li>
+
-
</ol>
+
-
 
+
-
<p>
+
-
It's important for teams to describe all the creativity that goes into an iGEM project, along with all the great ideas your team will come up with over the course of your work.
+
-
</p>
+
-
 
+
-
<p>
+
-
It's also important to clearly describe your achievements so that judges will know what you tried to do and where you succeeded. Please write your project page such that what you achieved is easy to distinguish from what you attempted.
+
-
</p>
+
-
</td>
 
-
</tr>
+
<div class="content" align="center" style=" position:relative; z-index:2;">
 +
 +
<ul id="sdt_menu" class="sdt_menu">
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software2/test">
 +
<img src="https://static.igem.org/mediawiki/2014/b/bd/Test.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Home</span>
 +
<span class="sdt_descr">Get to Our Project</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Project">
 +
<img src="https://static.igem.org/mediawiki/2014/b/bd/Test.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Software</span>
 +
<span class="sdt_descr">Our work</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box" style=" position:relative; z-index:1;">
 +
<a href="#">OverView</a>
 +
<a href="#">Design</a>
 +
<a href="#">Upload</a>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Team">
 +
<img src="https://static.igem.org/mediawiki/2014/b/bd/Test.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Team</span>
 +
<span class="sdt_descr">Our strong team</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2014/b/bd/Test.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Document</span>
 +
<span class="sdt_descr">Some Introduction</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2014/b/bd/Test.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Demo</span>
 +
<span class="sdt_descr">I like Hp</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2014/b/bd/Test.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Requirement</span>
 +
<span class="sdt_descr">Some Requirement</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box" style=" position:relative; z-index:1;">
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Notebook">Notebook</a>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Safety">Safety</a>
 +
<a href="https://2014.igem.org/Team:SJTU-Software/Attributions">Attributions</a>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
     
 +
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/ra.js%20?action=raw&ctype=text/js"></script>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/ras.js%20?action=raw&ctype=text/js"></script>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/gi.js%20?action=raw&ctype=text/js"></script>
 +
<script type="text/javascript"> Cufon.now(); </script>
 +
 +
 +
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/jquery.js%20?action=raw&ctype=text/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>
</table>
</table>
</html>
</html>

Latest revision as of 06:07, 7 October 2014


Slide Down Box Menu with jQuery and CSS3

Retrieved from "http://2014.igem.org/Team:SJTU-Software/Project"