Team:Manchester/Notebooktest
From 2013.igem.org
(Difference between revisions)
Abramov denn (Talk | contribs) |
Abramov denn (Talk | contribs) |
||
Line 7: | Line 7: | ||
<script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | <script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | ||
- | <script type='text/javascript'> | + | <script type='text/javascript'> |
+ | function blocking(nr) | ||
+ | { | ||
+ | displayNew = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none'; | ||
+ | document.getElementById(nr).style.display = displayNew; | ||
+ | } | ||
+ | |||
function hoverLink1() | function hoverLink1() | ||
{ | { | ||
Line 202: | Line 208: | ||
} | } | ||
+ | .menu | ||
+ | { | ||
+ | margin:0 auto; | ||
+ | width:900px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .menu li | ||
+ | { | ||
+ | list-style:none; | ||
+ | |||
+ | } | ||
+ | |||
+ | .menu li a | ||
+ | { | ||
+ | |||
+ | display:block; | ||
+ | width:900px; | ||
+ | height:30px; | ||
+ | text-decoration:none; | ||
+ | text-align:center; | ||
+ | margin-bottom:5px; | ||
+ | font-family:Trebuchet MS; | ||
+ | font-weight:bold; | ||
+ | font-size:24px; | ||
+ | color:white; | ||
+ | background-color:#660099; | ||
+ | |||
+ | -webkit-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | |||
+ | -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); | ||
+ | -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); | ||
+ | box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); | ||
+ | |||
+ | } | ||
+ | |||
+ | #submenu li a, #submenu2 li a | ||
+ | { | ||
+ | display:block; | ||
+ | width:800px; | ||
+ | height:30px; | ||
+ | margin:0 auto; | ||
+ | margin-bottom:5px; | ||
+ | font-family:Trebuchet MS; | ||
+ | font-weight:bold; | ||
+ | font-size:18px; | ||
+ | color:white; | ||
+ | background-color:#FFCC33; | ||
+ | } | ||
+ | |||
+ | #text, #text1, #text2, #text3,#text4,#text5,#text6,#text7 | ||
+ | { | ||
+ | margin:0 auto; | ||
+ | margin-bottom:5px; | ||
+ | width:700px; | ||
+ | font-family:Trebuchet MS; | ||
+ | font-weight:bold; | ||
+ | font-size:14px; | ||
+ | color:white; | ||
+ | background-color:#BDBDBD; | ||
+ | |||
+ | -webkit-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | |||
+ | -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); | ||
+ | -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); | ||
+ | box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); | ||
+ | } | ||
.container | .container | ||
Line 315: | Line 391: | ||
<body onLoad="hoverLink1(); hoverLink2(); hoverLink3(); hoverImage1(); hoverImage2(); hoverImage3(); | <body onLoad="hoverLink1(); hoverLink2(); hoverLink3(); hoverImage1(); hoverImage2(); hoverImage3(); | ||
- | hoverLink4(); hoverImage4(); hoverLink5(); hoverImage5();"> | + | hoverLink4(); hoverImage4(); hoverLink5(); hoverImage5(); onload="blocking('submenu'); blocking('submenu2'); blocking('text'); blocking('text1'); blocking('text2'); blocking('text3'); |
+ | blocking('text4'); blocking('text5'); blocking('text6'); blocking('text7'); "> | ||
<div class="header"> | <div class="header"> | ||
Line 397: | Line 474: | ||
<div class="wrapper" > | <div class="wrapper" > | ||
- | + | <ul class="menu"> | |
+ | <li id="one"><a href="" onclick="blocking('submenu'); return false;">June</a> | ||
+ | <ul id="submenu"> | ||
+ | <li id="one"><a href="" onclick="blocking('text'); return false;">Week 1</a> | ||
+ | <div id="text"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut | ||
+ | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris | ||
+ | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
+ | esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt | ||
+ | in culpa qui officia deserunt mollit anim id est laborum | ||
+ | </div> | ||
+ | </li> | ||
+ | <li id="two"><a href="" onclick="blocking('text1'); return false;">Week 2</a> | ||
+ | <div id="text1"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut | ||
+ | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris | ||
+ | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
+ | esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt | ||
+ | in culpa qui officia deserunt mollit anim id est laborum | ||
+ | </div> | ||
+ | </li> | ||
+ | <li id="three"><a href="" onclick="blocking('text2'); return false;">Week 3</a> | ||
+ | <div id="text2"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut | ||
+ | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris | ||
+ | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
+ | esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt | ||
+ | in culpa qui officia deserunt mollit anim id est laborum | ||
+ | </div> | ||
+ | </li> | ||
+ | <li id="four"><a href="" onclick="blocking('text3'); return false;">Week 4</a> | ||
+ | <div id="text3"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut | ||
+ | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris | ||
+ | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
+ | esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt | ||
+ | in culpa qui officia deserunt mollit anim id est laborum | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li id="one"><a href="" onclick="blocking('submenu2'); return false;">July</a> | ||
+ | <ul id="submenu2"> | ||
+ | <li id="one"><a href="" onclick="blocking('text4'); return false;">Week 1</a> | ||
+ | <div id="text4"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut | ||
+ | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris | ||
+ | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
+ | esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt | ||
+ | in culpa qui officia deserunt mollit anim id est laborum | ||
+ | </div> | ||
+ | </li> | ||
+ | <li id="two"><a href="" onclick="blocking('text5'); return false;">Week 2</a> | ||
+ | <div id="text5"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut | ||
+ | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris | ||
+ | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
+ | esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt | ||
+ | in culpa qui officia deserunt mollit anim id est laborum | ||
+ | </div> | ||
+ | </li> | ||
+ | <li id="three"><a href="" onclick="blocking('text6'); return false;">Week 3</a> | ||
+ | <div id="text6"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut | ||
+ | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris | ||
+ | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
+ | esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt | ||
+ | in culpa qui officia deserunt mollit anim id est laborum | ||
+ | </div> | ||
+ | </li> | ||
+ | <li id="four"><a href="" onclick="blocking('text7'); return false;">Week 4</a> | ||
+ | <div id="text7"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut | ||
+ | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris | ||
+ | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
+ | esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt | ||
+ | in culpa qui officia deserunt mollit anim id est laborum | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li id="three"><a href="#three">August</a> | ||
+ | <!--<ul class="submenu"> | ||
+ | <li><a href="#one">Week 1</a></li> | ||
+ | <li><a href="#one">Week 2</a></li> | ||
+ | <li><a href="#one">Week 3</a></li> | ||
+ | <li><a href="#one">Week 4</a></li> | ||
+ | </ul>--> | ||
+ | </li> | ||
+ | <!-- <li id="four"><a href="#four">September</a> | ||
+ | <ul class="submenu"> | ||
+ | <li><a href="#one">Week 1</a></li> | ||
+ | <li><a href="#one">Week 2</a></li> | ||
+ | <li><a href="#one">Week 3</a></li> | ||
+ | <li><a href="#one">Week 4</a></li> | ||
+ | </ul> | ||
+ | </li>--> | ||
+ | </ul> | ||
</div> | </div> |
Revision as of 17:54, 23 July 2013