|
|
| Line 4: |
Line 4: |
| | <head> | | <head> |
| | <title> Safety </title> | | <title> Safety </title> |
| - | <script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
| |
| - | <script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
| |
| - |
| |
| - | <script type='text/javascript'>
| |
| - | function blocking(nr)
| |
| - | {
| |
| - | displayNew = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
| |
| - | document.getElementById(nr).style.display = displayNew;
| |
| - | }
| |
| - |
| |
| - | function hoverLink1()
| |
| - | {
| |
| - | $("#block #link1").hover(function() {
| |
| - | $("#block #image1").toggleClass("expand");
| |
| - | });
| |
| - | $("#block #link1").mouseenter(function() {
| |
| - | $("#block #image1").css({marginLeft: "17px"});
| |
| - | });
| |
| - | $("#block #link1").mouseleave(function() {
| |
| - | $("#block #image1").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverImage1()
| |
| - | {
| |
| - | $("#block #image1").mouseenter(function() {
| |
| - | $("#block #image1").css({marginLeft: "17px"});
| |
| - | });
| |
| - | $("#block #image1").mouseleave(function() {
| |
| - | $("#block #image1").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverLink2()
| |
| - | {
| |
| - | $("#block #link2").hover(function() {
| |
| - | $("#block #image2").toggleClass("expand");
| |
| - | });
| |
| - | $("#block #link2").mouseenter(function() {
| |
| - | $("#block #image2").css({marginLeft: "17px"});
| |
| - | });
| |
| - | $("#block #link2").mouseleave(function() {
| |
| - | $("#block #image2").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverImage2()
| |
| - | {
| |
| - | $("#block #image2").mouseenter(function() {
| |
| - | $("#block #image2").css({marginLeft: "17px"});
| |
| - | });
| |
| - | $("#block #image2").mouseleave(function() {
| |
| - | $("#block #image2").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverLink3()
| |
| - | {
| |
| - | $("#block #link3").hover(function() {
| |
| - | $("#block #image3").toggleClass("expand");
| |
| - | });
| |
| - | $("#block #link3").mouseenter(function() {
| |
| - | $("#block #image3").css({marginLeft: "15px"});
| |
| - | });
| |
| - | $("#block #link3").mouseleave(function() {
| |
| - | $("#block #image3").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverImage3()
| |
| - | {
| |
| - | $("#block #image3").mouseenter(function() {
| |
| - | $("#block #image3").css({marginLeft: "15px"});
| |
| - | });
| |
| - | $("#block #image3").mouseleave(function() {
| |
| - | $("#block #image3").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverLink4()
| |
| - | {
| |
| - | $("#block #link4").hover(function() {
| |
| - | $("#block #image4").toggleClass("expand");
| |
| - | });
| |
| - | $("#block #link4").mouseenter(function() {
| |
| - | $("#block #image4").css({marginLeft: "15px"});
| |
| - | });
| |
| - | $("#block #link4").mouseleave(function() {
| |
| - | $("#block #image4").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverImage4()
| |
| - | {
| |
| - | $("#block #image4").mouseenter(function() {
| |
| - | $("#block #image4").css({marginLeft: "15px"});
| |
| - | });
| |
| - | $("#block #image4").mouseleave(function() {
| |
| - | $("#block #image4").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverLink5()
| |
| - | {
| |
| - | $("#block #link5").hover(function() {
| |
| - | $("#block #image5").toggleClass("expand");
| |
| - | });
| |
| - | $("#block #link5").mouseenter(function() {
| |
| - | $("#block #image5").css({marginLeft: "17px"});
| |
| - | });
| |
| - | $("#block #link5").mouseleave(function() {
| |
| - | $("#block #image5").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | function hoverImage5()
| |
| - | {
| |
| - | $("#block #image5").mouseenter(function() {
| |
| - | $("#block #image5").css({marginLeft: "17px"});
| |
| - | });
| |
| - | $("#block #image5").mouseleave(function() {
| |
| - | $("#block #image5").css({marginLeft: "25px"});
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | </script>
| |
| - |
| |
| | <style type="text/css"> | | <style type="text/css"> |
| | * | | * |
| Line 241: |
Line 114: |
| | font-family:Trebuchet MS; | | font-family:Trebuchet MS; |
| | font-size:14px; | | font-size:14px; |
| - | }
| |
| - |
| |
| - | .container
| |
| - | {
| |
| - | height:90px;
| |
| - | width:560px;
| |
| - | margin:0 auto;
| |
| - | position:absolute;
| |
| - | top:5px;
| |
| - | left:200px;
| |
| - | z-index:100;
| |
| - | background:#F2F2F2;
| |
| - | }
| |
| - |
| |
| - | #block
| |
| - | {
| |
| - | float:left;
| |
| - | width:100px;
| |
| - | margin:5px;
| |
| - | }
| |
| - |
| |
| - | #block a
| |
| - | {
| |
| - | display:block;
| |
| - | text-decoration: none;
| |
| - | background-color: #660099;
| |
| - | color:white;
| |
| - | font-size: 14px;
| |
| - | font-family: Trebuchet MS;
| |
| - | font-weight: bold;
| |
| - | border-radius: 5px;
| |
| - | width: 60px;
| |
| - | margin:0 auto;
| |
| - | text-align: center;
| |
| - | padding: 3px;
| |
| - | color:#F2F2F2;
| |
| - |
| |
| - | transition-duration:0.1s;
| |
| - | transition-timing-function:linear;
| |
| - | }
| |
| - |
| |
| - | #block img
| |
| - | {
| |
| - | transition-duration:0.1s;
| |
| - | transition-timing-function:linear;
| |
| - | margin:0 25px;
| |
| - | display:block;
| |
| - | }
| |
| - |
| |
| - | #block img:hover
| |
| - | {
| |
| - | width:65px;
| |
| - | height:65px;
| |
| - | }
| |
| - |
| |
| - | #block .list
| |
| - | {
| |
| - | margin:0;
| |
| - | }
| |
| - |
| |
| - | #block .list li
| |
| - | {
| |
| - | display:block;
| |
| - | list-style:none;
| |
| - | }
| |
| - |
| |
| - | #block .list .submenu
| |
| - | {
| |
| - | 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:90px;
| |
| - | }
| |
| - |
| |
| - | #block .list li:hover .submenu
| |
| - | {
| |
| - | display:block;
| |
| - | }
| |
| - |
| |
| - | .expand
| |
| - | {
| |
| - | width:65px;
| |
| - | height:65px;
| |
| - | }
| |
| - |
| |
| - | .global
| |
| - | {
| |
| - | position:relative;
| |
| - | width:950px;
| |
| - | height:1600px;
| |
| - |
| |
| | } | | } |
| | | | |
| Line 354: |
Line 119: |
| | </head> | | </head> |
| | | | |
| - | <body onLoad="blocking('submenu'); blocking('submenu2'); blocking('submenu3'); blocking('submenu4'); | + | <body> |
| - | 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();">
| + | |
| | | | |
| | <div class="header"> | | <div class="header"> |
| Line 380: |
Line 144: |
| | </div> | | </div> |
| | | | |
| - | <div class="global"> | + | <div class="global"> |
| - | <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">Modelling</a></li>
| + | |
| - | <li><a href="#" id="link3">Notebook</a></li>
| + | |
| - | <li><a href="#" id="link3">Contributions</a></li>
| + | |
| - | <li><a href="#" id="link3">Safety</a></li>
| + | |
| - | <li><a href="#" id="link3">Human Proctices</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/5/5b/Outreach.gif" width="50" height="50" id="image4"/>
| + | |
| - | <ul class="list">
| + | |
| - | <li><a href="#" onclick="javascript:openMenu('sub3')" id="link4">Outreach</a>
| + | |
| - | <ul class="submenu" id="sub3">
| + | |
| - | <li><a href="#" id="link4">Event 1</a></li>
| + | |
| - | <li><a href="#" id="link4">Event 2</a></li>
| + | |
| - | <li><a href="#" id="link4">Event 3</a></li>
| + | |
| - | <li><a href="#" id="link4">Event 4</a></li>
| + | |
| - | </ul>
| + | |
| - | </li>
| + | |
| - | </ul>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="block">
| + | |
| - | <img src="https://static.igem.org/mediawiki/2013/c/cb/Sponsors.gif" width="50" height="50" id="image5"/>
| + | |
| - | <a href="#" id="link5">Sponsors</a>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - |
| + | |
| | <div class="wrapper"> | | <div class="wrapper"> |
| | <div class="text"> | | <div class="text"> |
"
