|
|
Line 140: |
Line 140: |
| | | |
| | | |
− | <!-------------------------------------------------------------NAVBAR-----------------------------------------------------------------------------> | + | <!-------------------------------------------------------------NAVBARSTICKY-----------------------------------------------------------------------------> |
| | | |
| <style> | | <style> |
Line 199: |
Line 199: |
| | | |
| | | |
− | <!------------------------------------------------------------------------------- OLDNavbar --------------------------------------------------------------------------> | + | <!-------------------------------------------------------------------------------OLD Navbar --------------------------------------------------------------------------> |
| + | <style> |
| + | /* Dropdown Button */ |
| + | .dropbtn { |
| + | background-color: #4CAF50; |
| + | color: white; |
| + | padding: 16px; |
| + | font-size: 16px; |
| + | border: none; |
| + | cursor: pointer; |
| + | } |
| | | |
− | <div class="container-fluid">
| + | /* Dropdown button on hover & focus */ |
− |
| + | .dropbtn:hover, .dropbtn:focus { |
− | <ul class="nav navbar-nav navbar-center"> | + | background-color: #3e8e41; |
− | <li class="active"><a href="https://2017.igem.org/Team:Dalhousie/test3">Home</a></li>
| + | } |
− |
| + | |
| | | |
− | <li class="dropdown"> | + | /* The container <div> - needed to position the dropdown content */ |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="#">The Project
| + | .dropdown { |
− | <span class="caret"></span></a>
| + | position: absolute; |
− | <ul class="dropdown-menu">
| + | display: inline-block; |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Description">Description</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Design">Design</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Experiments">Experiments</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Notebook">Notebook</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Interlab">Interlab</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Contribution">Contribution</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Model">Model</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Results">Results</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Demonstrate">Demonstrate</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Improve">Improve</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Attributions">Attributions</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
| | | |
− |
| + | } |
− | <li class="dropdown">
| + | |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Our Team
| + | |
− | <span class="caret"></span></a>
| + | |
− | <ul class="dropdown-menu">
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Team">Team</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Collaborations">Collaborations</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
| | | |
− | <li class="dropdown">
| + | /* Dropdown Content (Hidden by DefaultCHANGED THIS CHANGED THIS) */ |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Parts
| + | .dropdown-content { |
− | <span class="caret"></span></a>
| + | display: none; |
− | <ul class="dropdown-menu">
| + | position: absolute; |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Parts">Parts</a></li>
| + | background-color: #f9f9f9; |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Basic_Parts">Basic Parts</a></li>
| + | min-width: 160px; |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Composite_Parts">Composite Parts</a></li>
| + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Part_Collection">Part Collections</a></li>
| + | z-index: 1; |
− | </ul>
| + | bottom: 100%; |
− | </li>
| + | } |
| | | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Safety">Safety</a></li>
| + | /* Links inside the dropdown */ |
| + | .dropdown-content a { |
| + | color: black; |
| + | padding: 12px 16px; |
| + | text-decoration: none; |
| + | display: block; |
| + | } |
| | | |
− | <li class="dropdown">
| + | /* Change color of dropdown links on hover */ |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices
| + | .dropdown-content a:hover {background-color: #f1f1f1} |
− | <span class="caret"></span></a>
| + | |
− | <ul class="dropdown-menu">
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Human_Practices">Summary</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Silver_Integrated">Silver HP</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Gold_Integrated">Integrated and Gold</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Public_Engagement">Public Engagement</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Part_Collection">Part Collections</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
| | | |
− | <li class="dropdown">
| + | /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ |
− | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Awards
| + | .show {display:block;} |
− | <span class="caret"></span></a>
| + | </style> |
− | <ul class="dropdown-menu">
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Applied_Design">Applied Design</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Entrepreneurship">Entrepreneurship</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
| | | |
| | | |
− | </ul>
| + | <script> |
| + | /* 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 menu if the user clicks outside of it |
| + | window.onclick = function(event) { |
| + | if (!event.target.matches('.dropbtn')) { |
| | | |
− | <!--------------------------contact us------------------------------------------>
| + | var dropdowns = document.getElementsByClassName("dropdown-content"); |
− | <ul class="nav navbar-nav navbar-right">
| + | var i; |
− | <div class="navbar-header"> | + | for (i = 0; i < dropdowns.length; i++) { |
− | <a class="navbar-brand" >Contact us today </a> | + | var openDropdown = dropdowns[i]; |
− | </div> | + | if (openDropdown.classList.contains('show')) { |
− | <li>
| + | openDropdown.classList.remove('show'); |
− | <a href="mailto:igemdalhousie@gmail.com" ><i class="fa fa-envelope-o fa-fw"></i> <span class="network-name"></span></a>
| + | } |
− | </li>
| + | } |
− | <li>
| + | } |
− | <a target="_blank" href="https://twitter.com/dalhousie_igem?lang=en" ><i class="fa fa-twitter fa-fw"></i> <span class="network-name"></span></a>
| + | } |
− | </li>
| + | </script> |
− | <li>
| + | |
− | <a target="_blank" href="https://www.facebook.com/Dalhousie.iGEM/" ><i class="fa fa-facebook fa-fw"></i> <span class="network-name"></span></a>
| + | <div class="dropdown"> |
− | </li>
| + | <button onclick="myFunction()" class="dropbtn">Dropdown</button> |
− | </ul>
| + | <div id="myDropdown" class="dropdown-content"> |
| + | <a href="#">Link 1</a> |
| + | <a href="#">Link 2</a> |
| + | <a href="#">Link 3</a> |
| </div> | | </div> |
| + | </div> |
| + | |
| + | |
| + | |
| | | |
| <!------------------------------------------------------------------------------- OLDNavbarEND --------------------------------------------------------------------------> | | <!------------------------------------------------------------------------------- OLDNavbarEND --------------------------------------------------------------------------> |