Difference between revisions of "Team:TUDelft/Header"

Line 32: Line 32:
 
             }
 
             }
  
 +
#myInput {
 +
  box-sizing: border-box;
 +
  background-image: url('searchicon.png');
 +
  background-position: 14px 12px;
 +
  background-repeat: no-repeat;
 +
  font-size: 16px;
 +
  padding: 14px 20px 12px 45px;
 +
  border: none;
 +
  border-bottom: 1px solid #ddd;
 +
}
 +
 +
#myInput:focus {outline: 3px solid #ddd;}
 
         </style>
 
         </style>
 
     </head>
 
     </head>
Line 134: Line 146:
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
 +
 +
<div class="dropdowntu">
 +
  <button onclick="myFunction()" class="dropbtn">Search!</button>
 +
  <div id="myDropdown" class="dropdown-content">
 +
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
 +
  <a href="https://2019.igem.org/Team:TUDelft">Home</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Description">Description</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Design">Design</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Results">Results</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Demonstrate">Demonstrate</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Experiments">Experiments Protocols</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Safety">Safety</a>
 +
  <a href="https://2019.igem.org/Team:TUDelft/Notebook">Notebook</a>
 +
    <a href="Modeling">Modeling</a>
 +
<a href="https://2019.igem.org/Team:TUDelft/Model#Kinetics">Reaction Kinetics</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Model#CodonUsage">Codon Harmonization</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Parts">Parts</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Human_Prediction">Human Practices</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Public_Engagement">Education & Engagement </a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Test">Team</a>
 +
  <a href="https://2019.igem.org/Team:TUDelft/Collaborations">Collaborations</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Attributions">Attributions</a>
 +
  <a href="https://2019.igem.org/Team:TUDelft/Sponsors">Sponsors</a>
 +
<a href="https://2019.igem.org/Team:TUDelft/">Judging Form</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Medals">Medal Requirements</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Public_Engagement">Foldscope Event</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Public_Engagement">Global Meeting Point</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Design#moclo">Modular Cloning (MoClo)</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Model">TALE</a>
 +
  <a href="https://2019.igem.org/Team:TUDelft/Design">phi29</a>
 +
    <a href="https://2019.igem.org/Team:TUDelft/Desgin">Orthogonality</a>
 +
  <a href="https://2019.igem.org/Team:TUDelft/Description">Inspiration</a>
 +
  </div>
 +
</div>
  
 
             <a class="social" href="mailto:igem@tudelft.nl"><img id="social" src="https://static.igem.org/mediawiki/2019/b/b4/T--TUDELFT--mailicon.png" alt="Email" /></a>
 
             <a class="social" href="mailto:igem@tudelft.nl"><img id="social" src="https://static.igem.org/mediawiki/2019/b/b4/T--TUDELFT--mailicon.png" alt="Email" /></a>
Line 149: Line 195:
 
         </div>
 
         </div>
  
 +
<script>
 +
<script>
 +
/* When the user clicks on the button,
 +
toggle between hiding and showing the dropdown content */
 +
function myFunction() {
 +
  document.getElementById("myDropdown").classList.toggle("show");
 +
}
 +
 +
function filterFunction() {
 +
  var input, filter, ul, li, a, i;
 +
  input = document.getElementById("myInput");
 +
  filter = input.value.toUpperCase();
 +
  div = document.getElementById("myDropdown");
 +
  a = div.getElementsByTagName("a");
 +
  for (i = 0; i < a.length; i++) {
 +
    txtValue = a[i].textContent || a[i].innerText;
 +
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
 +
      a[i].style.display = "";
 +
    } else {
 +
      a[i].style.display = "none";
 +
    }
 +
  }
 +
}
 +
</script>
 +
</script>
 
     </body>
 
     </body>
  
 
</html>
 
</html>

Revision as of 00:25, 22 October 2019