Difference between revisions of "Team:Bielefeld-CeBiTec/TEMPLATE"

 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html>
+
<html lang="en">
−
<style>
+
<head>
−
 
+
  <title>Bootstrap Example</title>
−
.firstHeading {
+
  <meta charset="utf-8">
−
display: none;
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
}
+
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
−
 
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
−
.mw-content-text {
+
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
display: none;
+
−
}
+
−
 
+
−
.logo_2018 {
+
−
display: none;
+
−
}
+
−
 
+
−
.content {
+
−
padding: 0px;
+
−
width: 100%;
+
−
margin: 0px;
+
−
border: none;
+
−
}
+
−
 
+
−
.globalWrapper {
+
−
padding: 0px;
+
−
}
+
−
 
+
−
 
+
−
body {
+
−
    font-family: "Lato", sans-serif;
+
−
}
+
−
 
+
−
/* Fixed sidenav, full height */
+
−
.sidenav {
+
−
    height: 100%;
+
−
    width: 200px;
+
−
    position: fixed;
+
−
    z-index: 1;
+
−
    top: 0;
+
−
    left: 0;
+
−
    background-color: #111;
+
−
    overflow-x: hidden;
+
−
    padding-top: 20px;
+
−
}
+
−
 
+
−
/* Style the sidenav links and the dropdown button */
+
−
.sidenav a, .dropdown-btn {
+
−
    padding: 6px 8px 6px 16px;
+
−
    text-decoration: none;
+
−
    font-size: 20px;
+
−
    color: #818181;
+
−
    display: block;
+
−
    border: none;
+
−
    background: none;
+
−
    width: 100%;
+
−
    text-align: left;
+
−
    cursor: pointer;
+
−
    outline: none;
+
−
}
+
−
 
+
−
/* On mouse-over */
+
−
.sidenav a:hover, .dropdown-btn:hover {
+
−
    color: #f1f1f1;
+
−
}
+
−
 
+
−
/* Main content */
+
−
.main {
+
−
    margin-left: 200px; /* Same as the width of the sidenav */
+
−
    font-size: 20px; /* Increased text to enable scrolling */
+
−
    padding: 0px 10px;
+
−
}
+
−
 
+
−
/* Add an active class to the active dropdown button */
+
−
.active {
+
−
    background-color:#002a5c ;
+
−
    color: white;
+
−
}
+
−
 
+
−
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
+
−
.dropdown-container {
+
−
    display: none;
+
−
    background-color: #262626;
+
−
    padding-left: 8px;
+
−
}
+
−
 
+
−
 
+
−
/* Some media queries for responsiveness */
+
−
@media screen and (max-height: 450px) {
+
−
    .sidenav {padding-top: 15px;}
+
−
    .sidenav a {font-size: 18px;}
+
−
}
+
−
 
+
−
.logo-img {
+
−
align: top;
+
−
    padding-right: 2px;
+
−
    padding-bottom: 2px;
+
−
    padding-left: 5px;
+
−
}
+
−
</style>
+
−
 
+
−
<head>  
+
−
 
+
−
<!-- This tells the browser that your page is responsive -->
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
 
+
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
<div class="sidenav">
 
−
<div class="logo">
 
−
<img class="logo-img" src="https://static.igem.org/mediawiki/2018/a/ad/T--Bielefeld-CeBiTec--Logo_invertiert.jpg" width="180">
 
−
</div>
 
−
  <a href="https://2018.igem.org/Team:Bielefeld-CeBiTec">Home</a>
 
−
  <button class="dropdown-btn">Team ▼ </button>
 
−
  <div class="dropdown-container">
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Team">Team Members</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Collaborations">Collaborations</a>
 
−
  </div>
 
−
  <button class="dropdown-btn">Project ▼ </button>
 
−
  <div class="dropdown-container">
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Description">Description</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Design">Design</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Experiments">Experiments</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Notebook">Notebook</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/InterLab">InterLab</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Model">Model</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Results">Results</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Demonstrate">Demonstrate</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Improve">Improve</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Attributions">Attributions</a>
 
−
  </div>
 
−
  <button class="dropdown-btn">Parts ▼ </button>
 
−
  <div class="dropdown-container">
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Parts">Parts Overview</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Basic_Part">Basic Parts</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Composite_Part">Composite Parts</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Part_Collection">Part Collection</a>
 
−
  </div>
 
−
  <a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Safety">Safety</a>
 
−
  <button class="dropdown-btn">Human Practices ▼ </button>
 
−
  <div class="dropdown-container">
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Human_Practices">Human Practices</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Public_Engagement">Education and Engagement</a>
 
−
  </div>
 
−
  <button class="dropdown-btn">Awards ▼ </button>
 
−
  <div class="dropdown-container">
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Applied_Design">Applied Design</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Entrepreneurship">Entrepreneurship</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Hardware">Hardware</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Measurement">Measurement</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Model">Model</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Plant">Plant</a>
 
−
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Software">Software</a>
 
−
  </div>
 
−
  <a href="https://igem.org/2018_Judging_Form?team=Bielefeld-CeBiTec">Judging Form ⇗</a>
 
−
                  </div>
 
−
 
−
 
−
<div class="column full_size" >
 
−
                  <h1> Welcome to iGEM Bielefeld-CeBiTec 2018! </h1>
 
−
                      <p>Project description is coming soon!</p>
 
−
         
 
−
 
−
 
−
<script>
 
−
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
 
−
var dropdown = document.getElementsByClassName("dropdown-btn");
 
−
var i;
 
  
−
for (i = 0; i < dropdown.length; i++) {
+
<nav class="navbar navbar-inverse">
−
  dropdown[i].addEventListener("click", function() {
+
  <div class="container-fluid">
−
this.classList.toggle("active");
+
    <div class="navbar-header">
−
var dropdownContent = this.nextElementSibling;
+
      <a class="navbar-brand" href="#">WebSiteName</a>
−
if (dropdownContent.style.display === "block") {
+
    </div>
−
  dropdownContent.style.display = "none";
+
    <ul class="nav navbar-nav">
−
} else {
+
      <li class="active"><a href="#">Home</a></li>
−
  dropdownContent.style.display = "block";
+
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
−
}
+
        <ul class="dropdown-menu">
−
  });
+
          <li><a href="#">Page 1-1</a></li>
−
}
+
          <li><a href="#">Page 1-2</a></li>
−
</script>
+
          <li><a href="#">Page 1-3</a></li>
 +
        </ul>
 +
      </li>
 +
      <li><a href="#">Page 2</a></li>
 +
      <li><a href="#">Page 3</a></li>
 +
    </ul>
 +
  </div>
 +
</nav>
 +
 
 +
<div class="container">
 +
  <h3>Navbar With Dropdown</h3>
 +
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
 +
</div>
  
−
<body/>
+
</body>
−
<html/>
+
</html>

Latest revision as of 12:29, 26 May 2018

Bootstrap Example

Navbar With Dropdown

This example adds a dropdown menu for the "Page 1" button in the navigation bar.