|
|
(266 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | <html xmlns="http://www.w3.org/1999/xhtml">
| + | {{NTU_SINGAPORE}} |
− | <head>
| + | |
− | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
| + | <html> |
− | <title>CSS Newbie Example: Show/Hide Content</title>
| + | |
− | <script language="javascript" type="text/javascript">
| + | |
− | function showHide(shID) {
| + | |
− | if (document.getElementById(shID)) {
| + | |
− | if (document.getElementById(shID+'-show').style.display != 'none') {
| + | |
− | document.getElementById(shID+'-show').style.display = 'none';
| + | |
− | document.getElementById(shID).style.display = 'block';
| + | |
− | }
| + | |
− | else {
| + | |
− | document.getElementById(shID+'-show').style.display = 'inline';
| + | |
− | document.getElementById(shID).style.display = 'none';
| + | |
− | }
| + | |
− | }
| + | |
− | }
| + | |
− | </script> | + | |
| <style> | | <style> |
− | | + | body { |
− | .more {
| + | background-color:white; |
− | display: none;
| + | |
− | border-top: 1px solid #666;
| + | |
− | border-bottom: 1px solid #666; }
| + | |
− | a.showLink, a.hideLink {
| + | |
− | text-decoration: none;
| + | |
− | color: #36f;
| + | |
− | padding-left: 8px;
| + | |
− | background: transparent url(down.gif) no-repeat left; }
| + | |
− | a.hideLink {
| + | |
− | background: transparent url(up.gif) no-repeat left; }
| + | |
− | a.showLink:hover, a.hideLink:hover {
| + | |
− | border-bottom: 1px dotted #36f; }
| + | |
− | | + | |
− | | + | |
− | .topmenu-container {
| + | |
− | overflow: hidden;
| + | |
− | background-color: #000; | + | |
− | font-family: Arial;
| + | |
− | padding-top:10px;
| + | |
| } | | } |
| | | |
− | .topmenu-container a { | + | div.ex {font-family: Papyrus, fantasy;} |
− | float: left;
| + | |
− | font-size: 16px;
| + | |
− | color: white;
| + | |
− | text-align: center;
| + | |
− | padding: 10px 16px;
| + | |
− | text-decoration: none;
| + | |
− | }
| + | |
− | | + | |
− | .dropdown {
| + | |
− | float: left;
| + | |
− | overflow: hidden;
| + | |
− | }
| + | |
− | | + | |
− | .dropdown .dropbtn {
| + | |
− | font-size: 16px;
| + | |
− | border: none;
| + | |
− | outline: none;
| + | |
− | color: white;
| + | |
− | padding: 14px 16px;
| + | |
− | background-color: inherit;
| + | |
− | }
| + | |
− | | + | |
− | .dropdown-content {
| + | |
− | display: none;
| + | |
− | position: absolute;
| + | |
− | background-color: #f9f9f9;
| + | |
− | min-width: 160px;
| + | |
− | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| + | |
− | z-index: 1;
| + | |
− | }
| + | |
− | | + | |
− | .dropdown-content a {
| + | |
− | float: none;
| + | |
− | color: black;
| + | |
− | padding: 12px 16px;
| + | |
− | text-decoration: none;
| + | |
− | display: block;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | .topmenucontainer a:hover, .dropdown:hover .dropbtn {
| + | |
− | background-color: red;
| + | |
− | }
| + | |
− | | + | |
− | .dropdown-content a:hover {
| + | |
− | background-color: #ddd;
| + | |
− | }
| + | |
− | | + | |
− | .dropdown:hover .dropdown-content {
| + | |
− | display: inline-block;
| + | |
− | } | + | |
| | | |
| </style> | | </style> |
− | </head>
| |
| | | |
| + | <div class="w3-display-container w3-text-black"> |
| + | <img src="https://static.igem.org/mediawiki/2017/3/3c/Coverpage.jpg" style="width:100%"> |
| | | |
− | <body> | + | <div class="ex w3-display-position w3-text-black" style="top:25px;left:230px"><font size="8">Join Us in the Exploration |
− | </br> | + | of Crispr/Cas Systems!</font></div> |
− | </br> | + | |
| | | |
− | <div class="topmenu-container">
| |
− |
| |
− | <div class="dropdown">
| |
− | <a href="#" id="NTUSingapore-show" class="showLink" onclick="showHide('NTUSingapore');return false;">NTU Singapore</a>
| |
− | </div>
| |
| </div> | | </div> |
− |
| |
− | <div class="topmenu-container">
| |
− | <div class="dropdown">
| |
− | <a href="#" id="Introduction-show" class="showLink" onclick="showHide('Introduction');return false;">Introduction</a></p>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="topmenu-container">
| |
− | <div class="dropdown">
| |
− | <button class="dropbtn">Projects</button>
| |
− | <div class="dropdown-content">
| |
− | <a href="https://2017.igem.org/Team:NTU_Singapore/Truncation" target="_self">Truncation</a>
| |
− | <a href="https://2017.igem.org/Team:NTU_Singapore/HDR" target="_self">Homology Directed Repair</a>
| |
− | <a href="https://2017.igem.org/Team:NTU_Singapore/Application" target="_self">Application</a>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− |
| |
− | <div class="topmenu-container">
| |
− | <div class="dropdown">
| |
− | <a href="https://2017.igem.org/Team:NTU_Singapore/collaboration" target="_self">Collaboration</a></button>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="topmenu-container">
| |
− | <div class="dropdown">
| |
− | <a href="#" id="Parts-show" class="showLink" onclick="showHide('Parts');return false;">Parts</a>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="topmenu-container">
| |
− | <div class="dropdown">
| |
− | <a href="#" id="HumanPractice-show" class="showLink" onclick="showHide('HumanPractice');return false;">Human Practice</a></p>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <br/>
| |
− | <br/>
| |
− |
| |
− | <div id="NTUSingapore" class="more">
| |
− | <h2><p><font face = "Georgia"><center>NTU Singapore</center></font></p></h2>
| |
− | <p>NTU</p>
| |
− | </p>
| |
− | <a href="#" id="NTUSingapore-hide" class="hideLink" onclick="showHide('NTUSingapore');return false;">Hide this content.</a></p>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− |
| |
− | <div id="Introduction" class="more">
| |
− | <h2><p><font face = "Georgia"><center>Introduction</center></font></p></h2>
| |
− | <p>Clustered regularly interspaced short palindromic repeats (CRISPR) are segments of prokaryotic DNA containing short, repetitive base sequences. These play a key role in a bacterial defence system, and form the basis of a genome editing technology known as CRISPR/Cas9 that allows permanent modification of genes within organisms.</p>
| |
− | <p>In a palindromic repeat, the sequence of nucleotides is the same in both directions. Each repetition is followed by short segments of spacer DNA from previous exposures to foreign DNA (e.g., a virus or plasmid). Small clusters of cas (CRISPR-associated system) genes are located next to CRISPR sequences.</p>
| |
− | </p>
| |
− | <a href="#" id="Introduction-hide" class="hideLink" onclick="showHide('Introduction');return false;">Hide this content.</a></p>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− |
| |
− | <div id="HumanPractice" class="more">
| |
− | <h2><p><font face = "Georgia"><center>Human Practice</center></font></p></h2>
| |
− | <p>This is where you type about Human Practice</p>
| |
− | <a href="#" id="HumanPractice-hide" class="hideLink" onclick="showHide('HumanPractice');return false;">Hide this content.</a></p>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div id="Parts" class="more">
| |
− | <h2><p><font face = "Georgia"><center>Parts</center></font></p></h2>
| |
− | <p>This is where you type about Parts</p>
| |
− | <a href="#" id="Parts-hide" class="hideLink" onclick="showHide('Parts');return false;">Hide this content.</a></p>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− |
| |
− | <br/>
| |
− |
| |
− |
| |
− | </body>
| |
| </html> | | </html> |