Team:Manchester/Outreachtest

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team:Manchester/layout/noheader}}
{{:Team:Manchester/layout/noheader}}
-
{{:Team:Manchester/Navbartest}}
 
<html>
<html>
Line 26: Line 25:
   },3000);
   },3000);
  }
  }
 +
 +
function hoverLink1()
 +
{
 +
  $("#block #link1").hover(function() {
 +
      $("#block #image1").toggleClass("expand");
 +
  });
 +
  $("#block #link1").mouseenter(function() {
 +
    $("#block #image1").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link1").mouseleave(function() {
 +
    $("#block #image1").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverImage1()
 +
{
 +
  $("#block #image1").mouseenter(function() {
 +
    $("#block #image1").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image1").mouseleave(function() {
 +
    $("#block #image1").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverLink2()
 +
{
 +
  $("#block #link2").hover(function() {
 +
  $("#block #image2").toggleClass("expand");
 +
  });
 +
  $("#block #link2").mouseenter(function() {
 +
    $("#block #image2").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link2").mouseleave(function() {
 +
    $("#block #image2").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverImage2()
 +
{
 +
  $("#block #image2").mouseenter(function() {
 +
    $("#block #image2").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #image2").mouseleave(function() {
 +
    $("#block #image2").css({marginLeft: "50px"});
 +
          });
 +
}
 +
 +
function hoverLink3()
 +
{
 +
  $("#block #link3").hover(function() {
 +
  $("#block #image3").toggleClass("expand");
 +
  });
 +
  $("#block #link3").mouseenter(function() {
 +
    $("#block #image3").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link3").mouseleave(function() {
 +
    $("#block #image3").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverImage3()
 +
{
 +
  $("#block #image3").mouseenter(function() {
 +
    $("#block #image3").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image3").mouseleave(function() {
 +
    $("#block #image3").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverLink4()
 +
{
 +
  $("#block #link4").hover(function() {
 +
  $("#block #image4").toggleClass("expand");
 +
  });
 +
  $("#block #link4").mouseenter(function() {
 +
    $("#block #image4").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link4").mouseleave(function() {
 +
    $("#block #image4").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverImage4()
 +
{
 +
  $("#block #image4").mouseenter(function() {
 +
    $("#block #image4").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image4").mouseleave(function() {
 +
    $("#block #image4").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverLink5()
 +
{
 +
  $("#block #link5").hover(function() {
 +
  $("#block #image5").toggleClass("expand");
 +
  });
 +
  $("#block #link5").mouseenter(function() {
 +
    $("#block #image5").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link5").mouseleave(function() {
 +
    $("#block #image5").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverImage5()
 +
{
 +
  $("#block #image5").mouseenter(function() {
 +
    $("#block #image5").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image5").mouseleave(function() {
 +
    $("#block #image5").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverLink6()
 +
{
 +
  $("#block #link6").hover(function() {
 +
  $("#block #image6").toggleClass("expand");
 +
  });
 +
  $("#block #link6").mouseenter(function() {
 +
    $("#block #image6").css({marginLeft: "40px"});
 +
  });
 +
  $("#block #link6").mouseleave(function() {
 +
    $("#block #image6").css({marginLeft: "50px"});
 +
  });
 +
}
 +
 +
function hoverImage6()
 +
{
 +
  $("#block #image6").mouseenter(function() {
 +
    $("#block #image6").css({marginLeft: "40px"});
 +
  });
 +
    $("#block #image6").mouseleave(function() {
 +
    $("#block #image6").css({marginLeft: "50px"});
 +
  });
 +
}
</script>
</script>
Line 95: Line 232:
width:950px;
width:950px;
height:1600px;
height:1600px;
 +
}
 +
 +
.container
 +
{
 +
height:90px;
 +
width:980px;
 +
margin:0 auto;
 +
background-color:#F2F2F2;
 +
position:absolute;
 +
top:130px;
 +
left:0;
 +
z-index:100;
 +
 +
}
 +
 +
#block
 +
{
 +
float:left;
 +
width:150px;
 +
margin:0 6px;
 +
 +
}
 +
 +
#block a
 +
{
 +
display:block;
 +
text-decoration: none;
 +
background-color: #660099;
 +
color:white;
 +
font-size: 17px;
 +
font-family: Trebuchet MS;
 +
font-weight: bold;
 +
border-radius: 5px;
 +
width: 140px;
 +
margin:0 auto;
 +
text-align: center;
 +
padding: 3px;
 +
color:#F2F2F2;
 +
border:1px solid #4C0082;
 +
 +
transition-duration:0.1s;
 +
transition-timing-function:linear;
 +
}
 +
 +
#block img
 +
{
 +
transition-duration:0.1s;
 +
transition-timing-function:linear;
 +
margin:0 50px;
 +
display:block;
 +
}
 +
 +
#block img:hover
 +
{
 +
width:65px;
 +
height:65px;
 +
}
 +
 +
#block .list
 +
{
 +
margin:0;
 +
}
 +
 +
#block .list li
 +
{
 +
display:block;
 +
list-style:none;
 +
}
 +
 +
#block .list .submenu, .submenu1, .submenu2
 +
{
 +
position:relative;
 +
display:none;
 +
clear: both;
 +
margin:0;
 +
display: none;
 +
}
 +
 +
#block .list .submenu li
 +
{
 +
list-style:none;
 +
display: block;
 +
margin:0;
 +
float: none;
 +
}
 +
 +
#block .list .submenu li a
 +
{
 +
clear:both;
 +
display:block;
 +
border:1px solid #4C0082;
 +
margin:0 auto;
 +
width:130px;
 +
font-size: 13px;
 +
font-family: Trebuchet MS;
 +
font-weight: bold;
 +
color:#f2f2f2;
 +
}
 +
 +
#block .list li .submenu li:hover .submenu1 a
 +
{
 +
clear:both;
 +
display:block;
 +
border:1px solid #4C0082;
 +
margin:0 auto;
 +
width:100px;
 +
font-size: 12px;
 +
font-family: Trebuchet MS;
 +
font-weight: bold;
 +
color:black;
 +
background:#ffcc33;
 +
}
 +
 +
#block .list .submenu a:hover
 +
{
 +
display:block;
 +
background:#A901DB;
 +
}
 +
 +
#block .list li:hover .submenu
 +
{
 +
display:block;
 +
}
 +
 +
.submenu li:hover .submenu1
 +
{
 +
display:block;
 +
position:absolute;
 +
left:145px;
 +
top:0;
 +
}
 +
 +
.submenu li:hover .submenu2
 +
{
 +
display:block;
 +
position:absolute;
 +
left:145px;
 +
top:28px;
 +
}
 +
 +
#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;
 +
height:65px;
}
}
Line 137: Line 432:
</head>
</head>
-
<body onLoad="showImage();">
+
<body onLoad="showImage(); hoverLink1(); hoverLink2(); hoverLink3(); hoverImage1(); hoverImage2(); hoverImage3();
 +
              hoverLink4(); hoverImage4(); hoverLink5(); hoverImage5(); hoverLink6(); hoverImage6();">
<div class="header">
<div class="header">
Line 163: Line 459:
<div class="global">
<div class="global">
 +
<div class="wrapper">
 +
<div class="container">
 +
        <div id="block">
 +
              <img src="https://static.igem.org/mediawiki/2013/7/74/Home.gif" width="50" height="50" id="image1"/>
 +
      <a href="#" id="link1">Home</a>
 +
        </div>
 +
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/e/e6/Group.gif" width="50" height="50" id="image2"/>
 +
                  <ul class="list">
 +
                    <li><a href="#" id="link2">About</a>
 +
                  <ul class="submenu" id="sub1">
 +
        <li><a href="#" id="link2">Our Team</a></li>
 +
                        <li><a href="#" id="link2">Team Profile</a></li>
 +
  </ul>
 +
                    </li>
 +
                  </ul>
 +
        </div>
 +
       
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image3"/>
 +
              <ul class="list">
 +
                  <li><a href="#" id="link3">Project</a>
 +
                <ul class="submenu">
 +
    <li><a href="#" id="link3">Aim</a></li>
 +
    <li><a href="#" id="link3">Notebook</a></li>
 +
                            <li><a href="#" id="link3">Lab Book</a></li>
 +
                    <li><a href="#" id="link3">Contributions</a></li>
 +
    <li><a href="#" id="link3">Safety</a></li>
 +
                            <li><a href="#" id="link3">Judging</a></li>                    
 +
    <li><a href="#" id="link3">Attributions</a></li>
 +
        </ul>
 +
                </li>
 +
              </ul>
 +
        </div>
 +
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/a/a8/Project.gif" width="50" height="50" id="image6"/>
 +
              <ul class="list">
 +
                  <li><a href="#" id="link6">Modelling</a>
 +
                <ul class="submenu">
 +
    <li><a href="#" id="link6">Fatty Acid Production</a></li>
 +
    <li><a href="#" id="link6">Parameter Estimation</a></li>
 +
                            <li><a href="#" id="link6">Modelling Collaboration</a></li>
 +
        </ul>
 +
                </li>
 +
              </ul>
 +
        </div>
 +
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image4"/>
 +
            <ul class="list">
 +
                  <li><a href="#" onclick="javascript:openMenu('sub3')" id="link4">Human Practices</a>
 +
                <ul class="submenu" id="sub3">
 +
    <li><a href="#" id="link4">Public Outreach</a>
 +
<ul class="submenu1" >
 +
  <a href="#" id="link4">Science Stars</a></li>
 +
  <a href="#" id="link4">Open day</a></li>
 +
</ul>
 +
    </li>
 +
                    <li><a href="#" id="link4">Ethics</a>
 +
<ul class="submenu2" id="sub3">
 +
    <a href="#" id="link4">Environmental Impact</a></li>
 +
    <a href="#" id="link4">Economical Impact</a></li>
 +
    <a href="#" id="link4">Impact Management</a></li>
 +
    <a href="#" id="link4">Conclusion</a></li>
 +
</ul>
 +
    </li>
 +
    <li><a href="#" id="link4">Business Plan</a></li>
 +
                    <li><a href="#" id="link4">Knowledge Deficit Assumption</a></li>
 +
                            <li><a href="#" id="link4">Conferences and Discussions</a></li>
 +
                            <li><a href="#" id="link4">Social Media</a></li>
 +
                </ul>
 +
                  </li>
 +
            </ul>
 +
        </div>
 +
 +
        <div id="block">
 +
            <img src="https://static.igem.org/mediawiki/2013/5/5b/Outreach.gif" width="50" height="50" id="image5"/>
 +
            <a href="#" id="link5">Sponsorship</a>
 +
        </div>
 +
 +
</div>
             <div class="slider">
             <div class="slider">
Line 172: Line 551:
                   <img src="https://static.igem.org/mediawiki/2013/b/bb/Attributions1.jpg" id="6"/>
                   <img src="https://static.igem.org/mediawiki/2013/b/bb/Attributions1.jpg" id="6"/>
           </div>
           </div>
-
 
+
</div>
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 02:30, 29 July 2013

Retrieved from "http://2013.igem.org/Team:Manchester/Outreachtest"