|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| | | | |
| − | <script>
| |
| − |
| |
| − | /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
| |
| − | function myFunction() {
| |
| − | var x = document.getElementById("barrasuperior");
| |
| − | if (x.className === "topnav") {
| |
| − | x.className += " responsive";
| |
| − | } else {
| |
| − | x.className = "topnav";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var acc = document.getElementsByClassName("accordion");
| |
| − | var i;
| |
| − |
| |
| − | for (i = 0; i < acc.length; i++) {
| |
| − | acc[i].onclick = function(){
| |
| − | /* Toggle between adding and removing the "active" class,
| |
| − | to highlight the button that controls the panel */
| |
| − | this.classList.toggle("active");
| |
| − |
| |
| − | /* Toggle between hiding and showing the active panel */
| |
| − | var panel = this.nextElementSibling;
| |
| − | if (panel.style.display === "block") {
| |
| − | panel.style.display = "none";
| |
| − | } else {
| |
| − | panel.style.display = "block";
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* 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>
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/
| |
| − |
| |
| − | /* Clear the default wiki settings */
| |
| − |
| |
| − | #home_logo, #sideMenu { display:none; }
| |
| − | #sideMenu, #top_title, .patrollink {display:none;}
| |
| − | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
| |
| − | body {background-color:white; }
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| − |
| |
| − | /**************************************************************** MENU ***************************************************************/
| |
| − |
| |
| − | /* Add a black background color to the top navigation */
| |
| − | .topnav {
| |
| − | width:100%;
| |
| − | height:10%;
| |
| − | background-color: #333;
| |
| − | overflow: hidden;
| |
| − | position: fixed;
| |
| − | top:2%
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | /* Style the links inside the navigation bar */
| |
| − | .topnav a {
| |
| − | float: left;
| |
| − | top:2%;
| |
| − | display: block;
| |
| − | color: #f2f2f2;
| |
| − | text-align: center;
| |
| − | padding: 2% 16px;
| |
| − | text-decoration: none;
| |
| − | font-size: 17px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* styling for the images in the menu */
| |
| − | .topnav img {
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | /* Change the color of links on hover */
| |
| − | .topnav a:hover {
| |
| − | background-color: #ddd;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | /* Hide the link that should open and close the topnav on small screens */
| |
| − | .topnav .icon {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Style the buttons that are used to open and close the accordion panel */
| |
| − | button.accordion {
| |
| − | background-color: #eee;
| |
| − | color: #444;
| |
| − | cursor: pointer;
| |
| − | padding: 18px;
| |
| − | width: 100%;
| |
| − | text-align: left;
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | transition: 0.4s;
| |
| − | }
| |
| − |
| |
| − | /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
| |
| − | button.accordion.active, button.accordion:hover {
| |
| − | background-color: #ddd;
| |
| − | }
| |
| − |
| |
| − | /* Style the accordion panel. Note: hidden by default */
| |
| − | div.panel {
| |
| − | padding: 0 18px;
| |
| − | background-color: white;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .container {
| |
| − | overflow: hidden;
| |
| − | background-color: #333;
| |
| − | font-family: Arial;
| |
| − | }
| |
| − |
| |
| − | .container a {
| |
| − | float: left;
| |
| − | font-size: 16px;
| |
| − | color: white;
| |
| − | text-align: center;
| |
| − | padding: 14px 16px;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .dropdown {
| |
| − | float: left;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .dropdown .dropbtn {
| |
| − | cursor: pointer;
| |
| − | font-size: 16px;
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | color: white;
| |
| − | padding: 14px 16px;
| |
| − | background-color: inherit;
| |
| − | }
| |
| − |
| |
| − | .topnav a:hover, .dropdown:hover .dropbtn {
| |
| − | background-color: red;
| |
| − | }
| |
| − |
| |
| − | .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 { | | .dropdown-content a { |
| Line 187: |
Line 17: |
| | display: block; | | display: block; |
| | } | | } |
| − |
| |
| − | /***************************************************** CONTENT OF THE PAGE ****************************************************/
| |
| − |
| |
| − | /* Wrapper for the content */
| |
| − | .igem_2017_content_wrapper {
| |
| − | width: 97%;
| |
| − | padding-top:7%;
| |
| − | padding-left:3%;
| |
| − | display:block;
| |
| − | float:left;
| |
| − | background-color:white;
| |
| − | overflow-y:hidden;
| |
| − | font-family:Tahoma, Geneva, sans-serif;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /********************************* HTML STYLING *********************************/
| |
| − |
| |
| − | /* styling for the titles h1 h2 */
| |
| − | .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
| |
| − | padding:5px 15px;
| |
| − | border-bottom: 0px;
| |
| − | color: #3399ff;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* styling for the titles h3 h4 h5 h6*/
| |
| − | .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
| |
| − | padding:5px 15px;
| |
| − | border-bottom:0px;
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* font and text */
| |
| − | .igem_2017_content_wrapper p {
| |
| − | padding: 0px 15px;
| |
| − | font-size: 13px;
| |
| − | }
| |
| − |
| |
| − | /* Links */
| |
| − | .igem_2017_content_wrapper a {
| |
| − | font-weight: bold;
| |
| − | text-decoration: underline;
| |
| − | text-decoration-color: #3399ff;
| |
| − | color: #3399ff;
| |
| − | -webkit-transition: all 0.4s ease;
| |
| − | -moz-transition: all 0.4s ease;
| |
| − | -ms-transition: all 0.4s ease;
| |
| − | -o-transition: all 0.4s ease;
| |
| − | transition: all 0.4s ease;
| |
| − | }
| |
| − |
| |
| − | /* hover for the links */
| |
| − | .igem_2017_content_wrapper a:hover {
| |
| − | text-decoration:none;
| |
| − | color:#000000;
| |
| − | }
| |
| − |
| |
| − | /* non numbered lists */
| |
| − | .igem_2017_content_wrapper ul {
| |
| − | padding:0px 20px;
| |
| − | font-size: 13px;
| |
| − | font-family:Tahoma, Geneva, sans-serif;
| |
| − | }
| |
| − |
| |
| − | /* numbered lists */
| |
| − | .igem_2017_content_wrapper ol {
| |
| − | padding:0px;
| |
| − | font-size: 13px;
| |
| − | font-family:Tahoma, Geneva, sans-serif;
| |
| − | }
| |
| − |
| |
| − | /* Table */
| |
| − | .igem_2017_content_wrapper table {
| |
| − | width: 97%;
| |
| − | margin:15px 10px;
| |
| − | border: 1px solid #d3d3d3;
| |
| − | border-collapse: collapse;
| |
| − | }
| |
| − |
| |
| − | /* table cells */
| |
| − | .igem_2017_content_wrapper td {
| |
| − | padding: 10px;
| |
| − | vertical-align: text-top;
| |
| − | border: 1px solid #d3d3d3;
| |
| − | border-collapse: collapse;
| |
| − | }
| |
| − |
| |
| − | /* table headers */
| |
| − | .igem_2017_content_wrapper th {
| |
| − | padding: 10px;
| |
| − | vertical-align: text-top;
| |
| − | border: 1px solid #d3d3d3;
| |
| − | border-collapse: collapse;
| |
| − | background-color:#f2f2f2;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /**********************************LAYOUT CLASSES **********************************/
| |
| − |
| |
| − | /* general class for column divs */
| |
| − | .igem_2017_content_wrapper .column {
| |
| − | padding: 10px 0px;
| |
| − | float:left;
| |
| − | }
| |
| − |
| |
| − | /* class for a full width column */
| |
| − | .column .full_size {
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | /* styling for images in a full width column*/
| |
| − | .column.full_size img {
| |
| − | width:97%;
| |
| − | padding: 10px 15px;
| |
| − | }
| |
| − |
| |
| − | /* class for a half width column */
| |
| − | .column.half_size {
| |
| − | width: 50%;
| |
| − | }
| |
| − | /* styling for images in a half width column*/
| |
| − | .column.half_size img {
| |
| − | width: 94.5%;
| |
| − | padding: 10px 15px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /********************************* SUPPORT CLASSES ********************************/
| |
| − |
| |
| − | /* class that clears content below*/
| |
| − | .igem_2017_content_wrapper .clear {
| |
| − | clear:both;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* adds extra spacing when clearing content */
| |
| − | .igem_2017_content_wrapper .clear.extra_space {
| |
| − | height: 30px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* highlight class, makes content slightly smaller */
| |
| − | .igem_2017_content_wrapper .highlight {
| |
| − | margin: 0px 15px;
| |
| − | padding: 15px 0px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* highlight class, adds a gray background */
| |
| − | .igem_2017_content_wrapper .highlight.gray {
| |
| − | background-color: #f2f2f2;
| |
| − | }
| |
| − |
| |
| − | /* highlight with decoration blue line on top */
| |
| − | .igem_2017_content_wrapper .highlight.blue_top {
| |
| − | border-top: 4px solid #3399ff;
| |
| − | }
| |
| − |
| |
| − | /* highlight with a full blue border decoration */
| |
| − | .igem_2017_content_wrapper .highlight.blue_border {
| |
| − | border: 4px solid #3399ff;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* button class */
| |
| − | .igem_2017_content_wrapper .button{
| |
| − | max-width: 35%;
| |
| − | margin: 30px auto;
| |
| − | padding: 12px 10px;
| |
| − | background-color: #3399ff;
| |
| − | text-align: center;
| |
| − | color: #ffffff;
| |
| − | -webkit-transition: all 0.4s ease;
| |
| − | -moz-transition: all 0.4s ease;
| |
| − | -ms-transition: all 0.4s ease;
| |
| − | -o-transition: all 0.4s ease; transition: all 0.4s ease;
| |
| − | }
| |
| − |
| |
| − | /* styling for button on hover */
| |
| − | .igem_2017_content_wrapper .button:hover{
| |
| − | background-color: #3399ff;
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /***************************************************** RESPONSIVE STYLING ****************************************************/
| |
| − |
| |
| − | /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
| |
| − | @media screen and (max-width: 600px) {
| |
| − | .topnav a:not(:first-child) {display: none;}
| |
| − | .topnav a.icon {
| |
| − | float: right;
| |
| − | display: block;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
| |
| − | @media screen and (max-width: 600px) {
| |
| − | .topnav.responsive {position: relative;}
| |
| − | .topnav.responsive a.icon {
| |
| − | position: absolute;
| |
| − | right: 0;
| |
| − | top: 0;
| |
| − | }
| |
| − | .topnav.responsive a {
| |
| − | float: none;
| |
| − | display: block;
| |
| − | text-align: left;
| |
| − | }
| |
| − | }
| |
| − |
| |
| | </style> | | </style> |
| − |
| |
| − |
| |
| − | <!--- THIS IS WHERE THE HTML BEGINS --->
| |
| − |
| |
| − |
| |
| − |
| |
| − | <head>
| |
| − |
| |
| − | <!-- This tells the browser that your page is responsive -->
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − |
| |
| | </head> | | </head> |
| | + | <body> |
| | | | |
| − | <div class="topnav" id="barrasuperior"> | + | <div class="navbar"> |
| − | <a href="https://2017.igem.org/Team:UChile_Biotec">Home</a> | + | <a href="#home">Home</a> |
| | + | <a href="#news">News</a> |
| | <div class="dropdown"> | | <div class="dropdown"> |
| − | <button class="dropbtn" onclick="myFunction()">Dropdown</button> | + | <button class="dropbtn" onclick="myFunction()">Dropdown |
| | + | <i class="fa fa-caret-down"></i> |
| | + | </button> |
| | <div class="dropdown-content" id="myDropdown"> | | <div class="dropdown-content" id="myDropdown"> |
| | <a href="#">Link 1</a> | | <a href="#">Link 1</a> |
| Line 428: |
Line 34: |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <a href="https://2017.igem.org/Team:UChile_Biotec/Team">Team</a>
| |
| − | <a href="https://2017.igem.org/Team:UChile_Biotec/Proyect">Project</a>
| |
| − | <a href="https://2017.igem.org/Team:UChile_Biotec/Parts">Parts</a>
| |
| − | <a href="https://2017.igem.org/Team:UChile_Biotec/Safety">Safety</a>
| |
| − | <a href="https://2017.igem.org/Team:UChile_Biotec/Human_Practices">Human Practices</a>
| |
| − | <a href="https://2017.igem.org/Team:UChile_Biotec/Awards">Awards</a>
| |
| − | <a href="https://2017.igem.org/Team:UChile_Biotec/Judging_Form">Judging Form</a>
| |
| − | <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
| |
| | </div> | | </div> |
| | | | |
| | + | <h3>Dropdown Menu inside a Navigation Bar</h3> |
| | + | <p>Click on the "Dropdown" link to see the dropdown menu.</p> |
| | | | |
| − | <!-- start of content --> | + | <script> |
| − | <div class="igem_2017_content_wrapper">
| + | /* When the user clicks on the button, |
| − | <h1>UChile_Biotec</h1> | + | 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> |
| | + | </body> |
| | + | </html> |
Click on the "Dropdown" link to see the dropdown menu.
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
