Difference between revisions of "Template:Northwestern Page Head"
| Line 311: | Line 311: | ||
| − | </body> | + | <!-- Navbar code (sits on top) --> |
| + | |||
| + | <div class="w3-top"> | ||
| + | <div class="w3-bar" "w3-white" "w3-right" "w3-hide-small" id="myNavbar"> | ||
| + | <a class="w3-bar-item w3-button w3-hover-purple w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu"> | ||
| + | <i class="fa fa-bars"></i> | ||
| + | </a> | ||
| + | |||
| + | <a href="https://2017.igem.org/Team:Northwestern#contact" class= "w3-bar-item w3-button w3-hide-small w3-right nav-link"> Contact </a> | ||
| + | <div class="dropdown"> | ||
| + | <button class="dropbtn" onclick="myFunction()">Dropdown</button> | ||
| + | <div class="dropdown-content" id="myDropdown"> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#humanpractices" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Human Practices </a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#parts" class= "w3-bar-item w3-button w3-hide-small w3-right nav-link"> Parts </a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern/lab" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Lab </a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#team" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Team </a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#project" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Project </a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#home" class="w3-bar-item w3-button w3-hide-small w3-right nav-link">HOME</a> | ||
| + | </div> | ||
| + | |||
| + | <!-- Navbar on small screens --> | ||
| + | <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium"> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#home" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Home</a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#project" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Project</a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#team" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Team</a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern/lab" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()"> Lab </a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#parts" class= "w3-bar-item w3-button nav-link" onclick="toggleFunction()"> Parts </a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#humanpractices" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Human Practices</a> | ||
| + | <a href="https://2017.igem.org/Team:Northwestern#contact" class= "w3-bar-item w3-button nav-link" onclick="toggleFunction()"> Contact </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | </body> | ||
| + | |||
| + | <script> | ||
| + | |||
| + | /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ | ||
| + | function myFunction() { | ||
| + | var x = document.getElementById("myTopnav"); | ||
| + | if (x.className === "topnav") { | ||
| + | x.className += " responsive"; | ||
| + | } else { | ||
| + | x.className = "topnav"; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* When the user clicks on the button, | ||
| + | toggle between hiding and showing the dropdown content */ | ||
| + | function myFunction() { | ||
| + | document.getElementById("myDropdown").classList.toggle("show"); | ||
| + | } | ||
| + | |||
| + | // Close the dropdown if the user clicks outside of it | ||
| + | window.onclick = function(e) { | ||
| + | if (!e.target.matches('.dropbtn')) { | ||
| + | var myDropdown = document.getElementById("myDropdown"); | ||
| + | if (myDropdown.classList.contains('show')) { | ||
| + | myDropdown.classList.remove('show'); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | </script> | ||
| + | |||
</html> | </html> | ||
Revision as of 20:33, 28 July 2017
