|
|
(1034 intermediate revisions not shown) |
Line 1: |
Line 1: |
| + | {{Template:Team:Bonn:BaseCSS}} |
| + | {{Template:Team:Bonn:CSS}} |
| <html> | | <html> |
- | <script> | + | |
- | function rollout(id)
| + | <!-- We need jQuery >= 1.10 --> |
- | {
| + | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
- | var hover;
| + | <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> |
- | hover = document.getElementById(id).childNodes;
| + | |
- | for(var i=0, ii = hover.length; i < ii; i++) {
| + | <!-- Additional global elements --> |
- | if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-text") {
| + | |
- | $('#'+hover[i].id).stop().animate();
| + | <!-- NONE --> |
- | $('#'+hover[i].id).animate({height:'300px'},1000);
| + | |
- | var hover2;
| + | |
- | hover2 = document.getElementById(hover[i].id).childNodes;
| + | |
- | for(var a=0, aa = hover2.length; a < aa; a++) {
| + | |
- | if(hover2[a].nodeName == "SPAN"){
| + | |
- | if(hover2[a].className == "content-box-hover") {
| + | |
- | $('#'+hover2[a].id).stop().animate();
| + | |
- | $('#'+hover2[a].id).animate({opacity:1},500);
| + | |
- | }
| + | |
- | if(hover2[a].className == "content-box-more") {
| + | |
- | $('#'+hover2[a].id).stop().animate();
| + | |
- | $('#'+hover2[a].id).animate({opacity:0},500);
| + | |
- | }
| + | |
- | }
| + | |
- | }
| + | |
- | }}
| + | |
- | if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-sidemenu-left" || hover[i].className == "content-box-sidemenu-right") {
| + | |
- | $('#'+hover[i].id).stop().animate();
| + | |
- | $('#'+hover[i].id).animate({width:50},500);
| + | |
- | }}
| + | |
- | }
| + | |
- | $('#'+id).stop().animate();
| + | |
- | $('#'+id).animate({height:'300px'},500);
| + | |
- | }
| + | |
- | function rollin(id)
| + | |
- | {
| + | |
- | var hover;
| + | |
- | hover = document.getElementById(id).childNodes;
| + | |
- | for(var i=0, ii = hover.length; i < ii; i++) {
| + | |
- | if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-text") {
| + | |
- | $('#'+hover[i].id).stop().animate();
| + | |
- | $('#'+hover[i].id).animate({height:'200px'},1000);
| + | |
- | var hover2;
| + | |
- | hover2 = document.getElementById(hover[i].id).childNodes;
| + | |
- | for(var a=0, aa = hover2.length; a < aa; a++) {
| + | |
- | if(hover2[a].nodeName == "SPAN"){
| + | |
- | if(hover2[a].className == "content-box-more") {
| + | |
- | $('#'+hover2[a].id).stop().animate();
| + | |
- | $('#'+hover2[a].id).animate({opacity:1},500);
| + | |
- | }
| + | |
- | if(hover2[a].className == "content-box-hover") {
| + | |
- | $('#'+hover2[a].id).stop().animate();
| + | |
- | $('#'+hover2[a].id).animate({opacity:0},500);
| + | |
- | }
| + | |
- | }
| + | |
- | }
| + | |
- | }}
| + | |
- | if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-sidemenu-left" || hover[i].className == "content-box-sidemenu-right") {
| + | |
- | $('#'+hover[i].id).stop().animate();
| + | |
- | $('#'+hover[i].id).animate({width:00},500);
| + | |
- | }}
| + | |
- | }
| + | |
- | $('#'+id).stop().animate();
| + | |
- | $('#'+id).animate({height:'200px'},500);
| + | |
- | document.getElementById(id).style.fontWeight = "normal";
| + | |
- | }
| + | |
- | function fadein()
| + | |
- | {
| + | |
- | $('.menu-button').animate({height:'20px'},500);
| + | |
- | }
| + | |
- | function fadeout()
| + | |
- | {
| + | |
- | $('.menu-button').stop().animate();
| + | |
- | $('.menu-button').animate({height:'0px'},500);
| + | |
- | $('.menu-button').fadeOut(1);
| + | |
- | }
| + | |
- | </script> | + | |
- | </head>
| + | |
- | <style type="text/css">
| + | |
- | .firstHeading { /* Kill the default iGEM picture*/
| + | |
- | height:0px;
| + | |
- | visibility:hidden;
| + | |
- | }
| + | |
- | #page{
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | }
| + | |
- | #menu{
| + | |
- | color:#000000;
| + | |
- | margin:0 auto;
| + | |
- | border-width: 5px 0 0 0;
| + | |
- | border-style:solid;
| + | |
- | border-color:black;
| + | |
- | padding: 0 0 1px 0;
| + | |
- | width:900px;
| + | |
- | height:50px;
| + | |
- | }
| + | |
- | #menu a{
| + | |
- | color:#000000;
| + | |
- | padding: 5px;
| + | |
- | }
| + | |
- | .menu-button{
| + | |
- | float:left;
| + | |
- | margin-right: 10px;
| + | |
- | font-size: 15px;
| + | |
- | background-color:grey;
| + | |
- | text-weight:bold;
| + | |
- | }
| + | |
- | #content {
| + | |
- | margin:0 auto;
| + | |
- | padding:0;
| + | |
- | }
| + | |
- | #content-top{
| + | |
- | <!-- border-style:solid;
| + | |
- | border-width:1px; -->
| + | |
- | width:690px;
| + | |
- | height:100px;
| + | |
- | margin:0 auto;
| + | |
- | font-size:14px;
| + | |
- | text-align: center;
| + | |
- | }
| + | |
- | .content-box-more{
| + | |
- | font-weight:normal;
| + | |
- | }
| + | |
- | .content-row{
| + | |
- | <!-- border-style:solid;
| + | |
- | border-width:1px; -->
| + | |
- | padding:20px;
| + | |
- | height:340px;
| + | |
- | margin:0 auto;
| + | |
- | align:center;
| + | |
- | width:800px;
| + | |
- | }
| + | |
- | .content-box{
| + | |
- | float:left;
| + | |
- | height:200px;
| + | |
- | border-style:solid;
| + | |
- | border-width:1px;
| + | |
- | color:#ffffff;
| + | |
- | margin:0 20px 0 20px;
| + | |
- | text-align:center;
| + | |
- | border-radius:10px;
| + | |
- | opacity:0.75;
| + | |
- | font-weight:normal;
| + | |
- | width:350px;
| + | |
- | }
| + | |
- | .content-box-sidemenu-right{
| + | |
- | float:right;
| + | |
- | width:0px;
| + | |
- | background-color:black;
| + | |
- | height:200px;
| + | |
- | }
| + | |
- | .content-box-sidemenu-left{
| + | |
- | float:left;
| + | |
- | width:0px;
| + | |
- | background-color:black;
| + | |
- | height:200px;
| + | |
- | }
| + | |
- | .content-box-text{
| + | |
- | float:left;
| + | |
- | width:300px;
| + | |
- | background-color:grey;
| + | |
- | height:200px;
| + | |
- | opacity:1;
| + | |
- | }
| + | |
- | .content-box-hover{
| + | |
- | margin:0 auto;
| + | |
- | padding:10px;
| + | |
- | opacity:0;
| + | |
- | }
| + | |
- | .content-box-more{
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | .mw-headline{
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | .editsection{
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | </style>
| + | |
| </html> | | </html> |
| + | {{Template:Team:Bonn:MenuInit}} |