|
|
| Line 27: |
Line 27: |
| | } | | } |
| | | | |
| - | function hoverLink1() | + | function hover1() |
| | { | | { |
| - | $("#block #link1").hover(function() { | + | $("#block").hover(function() { |
| | $("#block #image1").toggleClass("expand"); | | $("#block #image1").toggleClass("expand"); |
| | }); | | }); |
| - | $("#block #link1").mouseenter(function() { | + | $("#block").mouseenter(function() { |
| | $("#block #image1").css({marginLeft: "40px"}); | | $("#block #image1").css({marginLeft: "40px"}); |
| | }); | | }); |
| - | $("#block #link1").mouseleave(function() { | + | $("#block").mouseleave(function() { |
| - | $("#block #image1").css({marginLeft: "50px"}); | + | $("#block #image1").css({marginLeft: "50px"}); |
| | }); | | }); |
| | } | | } |
| | | | |
| - | function hoverImage1() | + | function hover2() |
| | { | | { |
| - | $("#block #image1").mouseenter(function() { | + | $("#block").mouseenter(function() { |
| | $("#block #image1").css({marginLeft: "40px"}); | | $("#block #image1").css({marginLeft: "40px"}); |
| | }); | | }); |
| - | $("#block #image1").mouseleave(function() { | + | $("#block").mouseleave(function() { |
| - | $("#block #image1").css({marginLeft: "50px"}); | + | $("#block #image1").css({marginLeft: "50px"}); |
| | }); | | }); |
| | } | | } |
| | | | |
| - | function hoverLink2() | + | function hover3() |
| | { | | { |
| - | $("#block #link2").hover(function() { | + | $("#block1").hover(function() { |
| - | $("#block #image2").toggleClass("expand");
| + | $("#block1 #image2").toggleClass("expand"); |
| | }); | | }); |
| - | $("#block #link2").mouseenter(function() { | + | $("#block1").mouseenter(function() { |
| - | $("#block #image2").css({marginLeft: "40px"}); | + | $("#block1 #image2").css({marginLeft: "40px"}); |
| | }); | | }); |
| - | $("#block #link2").mouseleave(function() { | + | $("#block1").mouseleave(function() { |
| - | $("#block #image2").css({marginLeft: "50px"}); | + | $("#block1 #image2").css({marginLeft: "50px"}); |
| | }); | | }); |
| | + | $("#block1").mouseenter(function() { |
| | + | $("#block1 .submenu").show(); |
| | + | }); |
| | + | $("#block1").mouseleave(function() { |
| | + | $("#block1 .submenu").hide(); |
| | + | }); |
| | } | | } |
| | | | |
| - | function hoverImage2() | + | function hover4() |
| | { | | { |
| - | $("#block #image2").mouseenter(function() { | + | $("#block2").hover(function() { |
| - | $("#block #image2").css({marginLeft: "40px"});
| + | $("#block2 #image3").toggleClass("expand"); |
| - | });
| + | |
| - | $("#block #image2").mouseleave(function() {
| + | |
| - | $("#block #image2").css({marginLeft: "50px"});
| + | |
| - | });
| + | |
| - | }
| + | |
| - | | + | |
| - | function hoverLink3()
| + | |
| - | {
| + | |
| - | $("#block #link3").hover(function() {
| + | |
| - | $("#block #image3").toggleClass("expand");
| + | |
| | }); | | }); |
| - | $("#block #link3").mouseenter(function() { | + | $("#block2").mouseenter(function() { |
| - | $("#block #image3").css({marginLeft: "40px"}); | + | $("#block2 #image3").css({marginLeft: "40px"}); |
| | }); | | }); |
| - | $("#block #link3").mouseleave(function() { | + | $("#block2").mouseleave(function() { |
| - | $("#block #image3").css({marginLeft: "50px"}); | + | $("#block2 #image3").css({marginLeft: "50px"}); |
| | }); | | }); |
| - | }
| + | $("#block2").mouseenter(function() { |
| - | | + | $("#block2 .submenu").show(); |
| - | function hoverImage3()
| + | |
| - | {
| + | |
| - | $("#block #image3").mouseenter(function() { | + | |
| - | $("#block #image3").css({marginLeft: "40px"});
| + | |
| - | });
| + | |
| - | $("#block #image3").mouseleave(function() {
| + | |
| - | $("#block #image3").css({marginLeft: "50px"});
| + | |
| | }); | | }); |
| | + | $("#block2").mouseleave(function() { |
| | + | $("#block2 .submenu").hide(); |
| | + | }); |
| | } | | } |
| | | | |
| - | function hoverLink4() | + | |
| | + | function hover5() |
| | { | | { |
| - | $("#block #link4").hover(function() { | + | $("#block3").hover(function() { |
| - | $("#block #image4").toggleClass("expand");
| + | $("#block3 #image6").toggleClass("expand"); |
| | }); | | }); |
| - | $("#block #link4").mouseenter(function() { | + | $("#block3").mouseenter(function() { |
| - | $("#block #image4").css({marginLeft: "40px"}); | + | $("#block3 #image6").css({marginLeft: "40px"}); |
| | }); | | }); |
| - | $("#block #link4").mouseleave(function() { | + | $("#block3").mouseleave(function() { |
| - | $("#block #image4").css({marginLeft: "50px"}); | + | $("#block3 #image6").css({marginLeft: "50px"}); |
| | }); | | }); |
| - | }
| + | $("#block3").mouseenter(function() { |
| - | | + | $("#block3 .submenu").show(); |
| - | function hoverImage4()
| + | |
| - | {
| + | |
| - | $("#block #image4").mouseenter(function() { | + | |
| - | $("#block #image4").css({marginLeft: "40px"});
| + | |
| - | });
| + | |
| - | $("#block #image4").mouseleave(function() {
| + | |
| - | $("#block #image4").css({marginLeft: "50px"});
| + | |
| | }); | | }); |
| | + | $("#block3").mouseleave(function() { |
| | + | $("#block3 .submenu").hide(); |
| | + | }); |
| | } | | } |
| | | | |
| - | function hoverLink5() | + | function hover6() |
| | { | | { |
| - | $("#block #link5").hover(function() { | + | $("#block4").hover(function() { |
| - | $("#block #image5").toggleClass("expand");
| + | $("#block4 #image4").toggleClass("expand"); |
| | }); | | }); |
| - | $("#block #link5").mouseenter(function() { | + | $("#block4").mouseenter(function() { |
| - | $("#block #image5").css({marginLeft: "40px"}); | + | $("#block4 #image4").css({marginLeft: "40px"}); |
| | }); | | }); |
| - | $("#block #link5").mouseleave(function() { | + | $("#block4").mouseleave(function() { |
| - | $("#block #image5").css({marginLeft: "50px"}); | + | $("#block4 #image4").css({marginLeft: "50px"}); |
| | }); | | }); |
| - | }
| + | $("#block4").mouseenter(function() { |
| - | | + | $("#block4 .submenu").show(); |
| - | function hoverImage5()
| + | |
| - | {
| + | |
| - | $("#block #image5").mouseenter(function() { | + | |
| - | $("#block #image5").css({marginLeft: "40px"});
| + | |
| - | });
| + | |
| - | $("#block #image5").mouseleave(function() {
| + | |
| - | $("#block #image5").css({marginLeft: "50px"});
| + | |
| | }); | | }); |
| | + | $("#block4").mouseleave(function() { |
| | + | $("#block4 .submenu").hide(); |
| | + | }); |
| | } | | } |
| | | | |
| - | function hoverLink6() | + | |
| | + | function hover7() |
| | { | | { |
| - | $("#block #link6").hover(function() { | + | $("#block5").hover(function() { |
| - | $("#block #image6").toggleClass("expand");
| + | $("#block5 #image5").toggleClass("expand"); |
| | }); | | }); |
| - | $("#block #link6").mouseenter(function() { | + | $("#block5").mouseenter(function() { |
| - | $("#block #image6").css({marginLeft: "40px"}); | + | $("#block5 #image5").css({marginLeft: "40px"}); |
| | }); | | }); |
| - | $("#block #link6").mouseleave(function() { | + | $("#block5").mouseleave(function() { |
| - | $("#block #image6").css({marginLeft: "50px"}); | + | $("#block5 #image5").css({marginLeft: "50px"}); |
| | }); | | }); |
| - | }
| + | $("#block5").mouseenter(function() { |
| - | | + | $("#block5 .submenu").show(); |
| - | function hoverImage6()
| + | |
| - | {
| + | |
| - | $("#block #image6").mouseenter(function() { | + | |
| - | $("#block #image6").css({marginLeft: "40px"});
| + | |
| - | });
| + | |
| - | $("#block #image6").mouseleave(function() {
| + | |
| - | $("#block #image6").css({marginLeft: "50px"});
| + | |
| | }); | | }); |
| | + | $("#block5").mouseleave(function() { |
| | + | $("#block5 .submenu").hide(); |
| | + | }); |
| | } | | } |
| | </script> | | </script> |
| Line 244: |
Line 226: |
| | top:15px; | | top:15px; |
| | left:0; | | left:0; |
| - | z-index:300; | + | z-index:100; |
| | } | | } |
| | | | |
| - | #block | + | #block, #block1, #block2, #block3, #block4, #block5 |
| | { | | { |
| | float:left; | | float:left; |
| | width:150px; | | width:150px; |
| - | margin:0 6px; | + | height:80px; |
| - | | + | margin:0 5px; |
| | } | | } |
| | | | |
| - | #block a | + | #block a, #block1 a, #block2 a, #block3 a, #block4 a, #block5 a |
| | { | | { |
| | display:block; | | display:block; |
| Line 272: |
Line 254: |
| | border:1px solid #4C0082; | | border:1px solid #4C0082; |
| | | | |
| | + | |
| | + | -webkit-transition-duration:0.1s; |
| | + | -webkit-timing-function:linear; |
| | transition-duration:0.1s; | | transition-duration:0.1s; |
| | transition-timing-function:linear; | | transition-timing-function:linear; |
| | } | | } |
| | | | |
| - | #block img | + | #block img,#block1 img,#block2 img,#block3 img,#block4 img, #block5 img |
| | { | | { |
| | + | -webkit-transition-duration:0.1s; |
| | + | -webkit-timing-function:linear; |
| | transition-duration:0.1s; | | transition-duration:0.1s; |
| | transition-timing-function:linear; | | transition-timing-function:linear; |
| Line 284: |
Line 271: |
| | } | | } |
| | | | |
| - | #block img:hover | + | #block img:hover,#block1 img:hover,#block2 img:hover,#block3 img:hover,#block4 img:hover, #block5 img:hover |
| | { | | { |
| | width:65px; | | width:65px; |
| Line 290: |
Line 277: |
| | } | | } |
| | | | |
| - | #block .list | + | #block .list,#block1 .list,#block2 .list,#block3 .list,#block4 .list |
| | { | | { |
| | margin:0; | | margin:0; |
| | } | | } |
| | | | |
| - | #block .list li | + | #block .list li, #block1 .list li, #block2 .list li, #block3 .list li, #block4 .list li |
| | { | | { |
| | display:block; | | display:block; |
| | list-style:none; | | list-style:none; |
| | + | margin:0; |
| | } | | } |
| | | | |
| - | #block .list .submenu, .submenu1, .submenu2
| + | .submenu |
| | { | | { |
| | position:relative; | | position:relative; |
| Line 318: |
Line 306: |
| | } | | } |
| | | | |
| - | #block .list .submenu li a | + | #block1 .list .submenu li a, #block2 .list .submenu li a, #block3 .list .submenu li a, #block4 .list .submenu li a |
| | { | | { |
| | clear:both; | | clear:both; |
| Line 331: |
Line 319: |
| | } | | } |
| | | | |
| - | #block .list li .submenu li:hover .submenu1 a | + | #block4 .list .submenu li .submenu1, #block4 .list .submenu li .submenu2 |
| | + | { |
| | + | margin:0; |
| | + | } |
| | + | |
| | + | #block4 .list .submenu li .submenu1 a, #block4 .list .submenu li .submenu2 a |
| | { | | { |
| - | clear:both;
| |
| - | display:block;
| |
| - | border:1px solid #4C0082;
| |
| | margin:0 auto; | | margin:0 auto; |
| - | width:100px; | + | width:110px; |
| - | font-size: 12px; | + | font-size: 13px; |
| | font-family: Trebuchet MS; | | font-family: Trebuchet MS; |
| | font-weight: bold; | | font-weight: bold; |
| | color:black; | | color:black; |
| - | background:#ffcc33; | + | background-color:#FFCC33; |
| | } | | } |
| | | | |
| - | #block .list .submenu a:hover | + | #block4 .list .submenu li .submenu1 a:hover, #block4 .list .submenu li .submenu2 a:hover |
| | { | | { |
| | + | color:white; |
| | display:block; | | display:block; |
| | background:#A901DB; | | background:#A901DB; |
| | } | | } |
| | | | |
| - | #block .list li:hover .submenu | + | #block1 .list .submenu li a:hover, #block2 .list .submenu li a:hover, #block2 .list .submenu li a:hover, |
| | + | #block3 .list .submenu li a:hover, #block4 .list .submenu li a:hover |
| | { | | { |
| | display:block; | | display:block; |
| | + | background:#A901DB; |
| | } | | } |
| | | | |
| - | .submenu li:hover .submenu1 | + | #block .list li:hover .submenu |
| | { | | { |
| | display:block; | | display:block; |
| - | position:absolute;
| |
| - | left:145px;
| |
| - | top:0;
| |
| | } | | } |
| | | | |
| - | .submenu li:hover .submenu2 | + | .expand |
| | { | | { |
| - | display:block;
| + | -webkit-transition-duration:0.1s; |
| - | position:absolute;
| + | -webkit-timing-function:linear; |
| - | left:145px;
| + | transition-duration:0.1s; |
| - | top:28px;
| + | transition-timing-function:linear; |
| - | }
| + | |
| | | | |
| - | #block .list li .submenu li:hover .submenu2 a
| |
| - | {
| |
| - | clear:both;
| |
| - | display:block;
| |
| - | border:1px solid #4C0082;
| |
| - | margin:0 auto;
| |
| - | width:150px;
| |
| - | font-size: 12px;
| |
| - | font-family: Trebuchet MS;
| |
| - | font-weight: bold;
| |
| - | color:black;
| |
| - | background:#FFCC33;
| |
| - | }
| |
| - |
| |
| - | .expand
| |
| - | {
| |
| | width:65px; | | width:65px; |
| | height:65px; | | height:65px; |
| Line 637: |
Line 610: |
| | </head> | | </head> |
| | | | |
| - | <body onLoad="showImage(); hoverLink1(); hoverLink2(); hoverLink3(); hoverImage1(); hoverImage2(); hoverImage3(); | + | <body onLoad="showImage(); hover1(); hover2(); hover3(); hover4(); hover5(); hover6(); hover7();"> |
| - | hoverLink4(); hoverImage4(); hoverLink5(); hoverImage5(); hoverLink6(); hoverImage6();">
| + | |
| | | | |
| | <div class="header"> | | <div class="header"> |
| Line 670: |
Line 642: |
| | </div> | | </div> |
| | | | |
| - | <div id="block"> | + | <div id="block1"> |
| | <img src="https://static.igem.org/mediawiki/2013/e/e6/Group.gif" width="50" height="50" id="image2"/> | | <img src="https://static.igem.org/mediawiki/2013/e/e6/Group.gif" width="50" height="50" id="image2"/> |
| | <ul class="list"> | | <ul class="list"> |
| - | <li><a href="#" id="link2">About</a> | + | <li><a href="https://2013.igem.org/Team:Manchester/OurTeamtest" id="link2">Team</a> |
| - | <ul class="submenu" id="sub1">
| + | <ul class="submenu"> |
| - | <li><a href="https://2013.igem.org/Team:Manchester/OurTeamtest" id="link2"> Our Team</a>< /li> | + | <li><a href="https://igem.org/Team.cgi?id=1027" target="_blank">Team Profile</a></li> |
| - | <li><a href="https://igem.org/Team.cgi?year=2013" id="link2">Team Profile</a></li> | + | |
| | </ul> | | </ul> |
| | </li> | | </li> |
| Line 682: |
Line 653: |
| | </div> | | </div> |
| | | | |
| - | <div id="block"> | + | <div id="block2"> |
| | <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image3"/> | | <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image3"/> |
| | <ul class="list"> | | <ul class="list"> |
| | <li><a href="https://2013.igem.org/Team:Manchester/Projecttest" id="link3">Project</a> | | <li><a href="https://2013.igem.org/Team:Manchester/Projecttest" id="link3">Project</a> |
| | <ul class="submenu"> | | <ul class="submenu"> |
| - | <li><a href="https://2013.igem.org/Team:Manchester/Aimtest2" id="link3">Aim</a></li> | + | <li><a href="https://2013.igem.org/Team:Manchester/Aimtest2" id="link3">Project Overview</a></li> |
| | <li><a href="https://2013.igem.org/Team:Manchester/Notebooktest2" id="link3">Notebook</a></li> | | <li><a href="https://2013.igem.org/Team:Manchester/Notebooktest2" id="link3">Notebook</a></li> |
| | <li><a href="https://2013.igem.org/Team:Manchester/LabBooktest" id="link3">Lab Book</a></li> | | <li><a href="https://2013.igem.org/Team:Manchester/LabBooktest" id="link3">Lab Book</a></li> |
| Line 699: |
Line 670: |
| | </div> | | </div> |
| | | | |
| - | <div id="block"> | + | <div id="block3"> |
| | <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image6"/> | | <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image6"/> |
| | <ul class="list"> | | <ul class="list"> |
| Line 712: |
Line 683: |
| | </div> | | </div> |
| | | | |
| - | <div id="block"> | + | <div id="block4"> |
| | <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image4"/> | | <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image4"/> |
| | <ul class="list"> | | <ul class="list"> |
| | <li><a href="https://2013.igem.org/Team:Manchester/HumanPracticetest" id="link4">Human Practices</a> | | <li><a href="https://2013.igem.org/Team:Manchester/HumanPracticetest" id="link4">Human Practices</a> |
| - | <ul class="submenu" id="sub3"> | + | <ul class="submenu"> |
| | <li><a href="https://2013.igem.org/Team:Manchester/outreachtest" id="link4">Public Outreach</a> | | <li><a href="https://2013.igem.org/Team:Manchester/outreachtest" id="link4">Public Outreach</a> |
| - | <ul class="submenu1" > | + | <ul class="submenu1"> |
| | <a href="https://2013.igem.org/Team:Manchester/stars" id="link4">Science Stars</a></li> | | <a href="https://2013.igem.org/Team:Manchester/stars" id="link4">Science Stars</a></li> |
| | <a href="https://2013.igem.org/Team:Manchester/openday" id="link4">Open day</a></li> | | <a href="https://2013.igem.org/Team:Manchester/openday" id="link4">Open day</a></li> |
| Line 724: |
Line 695: |
| | </li> | | </li> |
| | <li><a href="https://2013.igem.org/Team:Manchester/ethicstest" id="link4">Ethics</a> | | <li><a href="https://2013.igem.org/Team:Manchester/ethicstest" id="link4">Ethics</a> |
| - | <ul class="submenu2" id="sub3"> | + | <ul class="submenu2"> |
| - | <a href="https://2013.igem.org/Team:Manchester/environmenttest" id="link4">Environmental Impact</a></li> | + | <li><a href="https://2013.igem.org/Team:Manchester/environmenttest" id="link4">Environmental Impact</a></li> |
| - | <a href="https://2013.igem.org/Team:Manchester/economytest" id="link4">Economical Impact</a></li> | + | <li><a href="https://2013.igem.org/Team:Manchester/economytest" id="link4">Economical Impact</a></li> |
| - | <a href="https://2013.igem.org/Team:Manchester/managementtest" id="link4">Impact Management</a></li> | + | <li><a href="https://2013.igem.org/Team:Manchester/managementtest" id="link4">Impact Management</a></li> |
| - | <a href="https://2013.igem.org/Team:Manchester/conclusiontest" id="link4">Conclusion</a></li> | + | <li><a href="https://2013.igem.org/Team:Manchester/conclusiontest" id="link4">Conclusion</a></li> |
| | </ul> | | </ul> |
| | </li> | | </li> |
| Line 740: |
Line 711: |
| | </div> | | </div> |
| | | | |
| - | <div id="block"> | + | <div id="block5"> |
| | <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image5"/> | | <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image5"/> |
| | <a href="https://2013.igem.org/Team:Manchester/sponsorstest" id="link5">Sponsorship</a> | | <a href="https://2013.igem.org/Team:Manchester/sponsorstest" id="link5">Sponsorship</a> |
"
