Team:Manchester/Notebooktest2

From 2013.igem.org

(Difference between revisions)
Line 12: Line 12:
         document.getElementById(nr).style.display = displayNew;
         document.getElementById(nr).style.display = displayNew;
       }   
       }   
-
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 240: Line 220:
background-color:#F2F2F2;
background-color:#F2F2F2;
position:absolute;
position:absolute;
-
top:15px;
+
top:10px;
left:0;
left:0;
z-index:100;
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 271: Line 250:
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 283: Line 267:
}
}
-
#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 289: Line 273:
}
}
-
#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 317: Line 302:
}
}
-
#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 330: Line 315:
}
}
-
#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 395: Line 365:
margin:5px auto;
margin:5px auto;
width:900px;
width:900px;
-
 
-
 
}
}
Line 402: Line 370:
{
{
list-style:none;
list-style:none;
-
 
}
}
Line 568: Line 535:
<body onLoad="blocking('submenu'); blocking('submenu2'); blocking('submenu3'); blocking('submenu4'); blocking('submenu101'); blocking('text101'); blocking('text102'); blocking('text103');
<body onLoad="blocking('submenu'); blocking('submenu2'); blocking('submenu3'); blocking('submenu4'); blocking('submenu101'); blocking('text101'); blocking('text102'); blocking('text103');
-
blocking('text'); blocking('text1'); blocking('text2'); blocking('text3');blocking('text4'); blocking('text5'); blocking('text6'); blocking('text7'); blocking('text8'); blocking('text9'); blocking('text10'); blocking('text11'); blocking('text12'); blocking('text13'); blocking('text14');blocking('text15'); hoverLink1(); hoverLink2(); hoverLink3(); hoverImage1(); hoverImage2(); hoverImage3();hoverLink4(); hoverImage4(); hoverLink5(); hoverImage5();">
+
blocking('text'); blocking('text1'); blocking('text2'); blocking('text3');blocking('text4'); blocking('text5'); blocking('text6'); blocking('text7'); blocking('text8'); blocking('text9'); blocking('text10'); blocking('text11'); blocking('text12'); blocking('text13'); blocking('text14');blocking('text15'); hover1(); hover2(); hover3(); hover4(); hover5(); hover6(); hover7();">
<div class="header">
<div class="header">
Line 595: Line 562:
<div class="global">
<div class="global">
         <div class="container">
         <div class="container">
-
        <div id="block">
+
        <div id="block">
               <img src="https://static.igem.org/mediawiki/2013/7/74/Home.gif" width="50" height="50" id="image1"/>
               <img src="https://static.igem.org/mediawiki/2013/7/74/Home.gif" width="50" height="50" id="image1"/>
      <a href="https://2013.igem.org/Team:Manchester/Hometest" id="link1">Home</a>
      <a href="https://2013.igem.org/Team:Manchester/Hometest" id="link1">Home</a>
         </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 612: Line 578:
         </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 629: Line 595:
         </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 642: Line 608:
         </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 654: Line 620:
    </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 670: Line 636:
         </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>

Revision as of 17:56, 22 August 2013

Top

Safety