Difference between revisions of "Team:Bielefeld-CeBiTec/Basic Navbar"

(Created page with "<html> <style> .firstHeading { display: none; } #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%; } .mw-content-tex...")
 
Line 1: Line 1:
−
<html>
+
<!DOCTYPE html>
−
<style>
+
<html lang="en">
−
 
+
<head>
−
.firstHeading {
+
  <title>Bootstrap Example</title>
 +
  <meta charset="utf-8">
 +
  <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>
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
 
 +
  <style>
 +
 +
.firstHeading {
 
display: none;
 
display: none;
−
}
+
}
  
−
#content {  
+
#content {  
−
        margin-left:0px;  
+
margin-left:0px;  
−
        margin-top:-7px;  
+
margin-top:-7px;  
−
        padding:0px;  
+
padding:0px;  
−
        width:100%;
+
width:100%;
−
}
+
}
  
−
.mw-content-text {
+
.mw-content-text {
−
display: none;
+
display: none;
−
}
+
}
  
−
.logo_2018 {
+
.logo_2018 {
−
display: none;
+
display: none;
−
}
+
}
  
−
.content {
+
.content {
−
padding: 0px;
+
padding: 0px;
−
width: 100%;
+
width: 100%;
−
margin: 0px;
+
margin: 0px;
−
border: none;
+
border: none;
−
}
+
}
  
−
.globalWrapper {
+
.globalWrapper {
−
padding: 0px;
+
padding: 0px;
−
}
+
}
  
  
−
body {
+
body {
−
    font-family: "Lato", sans-serif;
+
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">
+
  
 +
 +
/* navbar */
 +
.navbar{
 +
background-color: #000000;
 +
border-color: #000000;
 +
}
 +
 +
.navbar.center .navbar-inner {
 +
    text-align: center;
 +
}
 +
 +
.navbar.center .navbar-inner .nav {
 +
float: none;
 +
display:inline-block;
 +
vertical-align: middle;
 +
}
 +
 +
/* Title */
 +
.navbar .navbar-brand {
 +
color: #777;
 +
}
 +
.navbar .navbar-brand:hover,
 +
.navbar .navbar-brand:focus {
 +
color: #5E5E5E;
 +
}
 +
/* Link */
 +
.navbar .navbar-nav > li > a {
 +
color: #ffffff;
 +
 +
}
 +
.navbar .navbar-nav > li > a:hover,
 +
.navbar .navbar-nav > li > a:focus {
 +
color: #0067e6;
 +
}
 +
.navbar .navbar-nav > .active > a,
 +
.navbar .navbar-nav > .active > a:hover,
 +
.navbar .navbar-nav > .active > a:focus {
 +
color: #ffffff;
 +
background-color:  #002a5c;
 +
}
 +
.navbar .navbar-nav > .open > a,
 +
.navbar .navbar-nav > .open > a:hover,
 +
.navbar .navbar-nav > .open > a:focus {
 +
color: #ffffff;
 +
background-color: #002a5c;
 +
}
 +
/* Caret */
 +
.navbar .navbar-nav > .dropdown > a .caret {
 +
border-top-color: #ffffff;
 +
border-bottom-color: #ffffff;
 +
}
 +
.navbar .navbar-nav > .dropdown > a:hover .caret,
 +
.navbar .navbar-nav > .dropdown > a:focus .caret {
 +
border-top-color: #5E5E5E;
 +
border-bottom-color: #5E5E5E;
 +
}
 +
.navbar .navbar-nav > .open > a .caret,
 +
.navbar .navbar-nav > .open > a:hover .caret,
 +
.navbar .navbar-nav > .open > a:focus .caret {
 +
border-top-color: #ffffff;
 +
border-bottom-color: #ffffff;
 +
}
 +
 +
.navbar .navbar-nav .dropdown-toggle{
 +
color: #ffffff;
 +
background-color: #000000;
 +
}
 +
 +
.navbar .navbar-nav .dropdown-menu {
 +
color: #ffffff;
 +
background-color: #000000;
 +
}
 +
 +
.navbar .navbar-nav .dropdown-menu > li > a{
 +
color: #ffffff;
 +
background-color: #000000;
 +
}
 +
 +
/* Mobile version */
 +
.navbar .navbar-toggle {
 +
border-color: #DDD;
 +
}
 +
.navbar .navbar-toggle:hover,
 +
.navbar .navbar-toggle:focus {
 +
background-color: #DDD;
 +
}
 +
.navbar .navbar-toggle .icon-bar {
 +
background-color: #CCC;
 +
}
 +
@media (max-width: 767px) {
 +
.navbar .navbar-nav .open .dropdown-menu > li > a {
 +
color: #777;
 +
}
 +
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
 +
.navbar .navbar-nav .open .dropdown-menu > li > a:focus {
 +
  color: #333;
 +
}
 +
}
 +
 +
.logo-img{
 +
width: 65px;
 +
}
 +
  </style>
 +
 
 
</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" >
+
<nav class="navbar navbar-inverse center">
−
                  <h1> Welcome to iGEM Bielefeld-CeBiTec 2018! </h1>
+
  <div class="container-fluid">
−
                      <p>Project description is coming soon!</p>
+
    <div class="navbar-header">
−
         
+
<img class="logo-img" src="https://static.igem.org/mediawiki/2018/a/ad/T--Bielefeld-CeBiTec--Logo_invertiert.jpg" width="180">
 +
    </div>
 +
<div class="navbar-inner">
 +
<ul class="nav navbar-nav">
 +
<li class="active">
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec">Home</a>
 +
</li>
  
 +
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Project <span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Description">Overview</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Design">Design</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Experiments">Experiments</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/InterLab">InterLab</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Demonstrate">Demonstrate</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Improve">Improve</a>
 +
</li>
 +
</ul>
 +
</li>
 +
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Model">Modelling</a>
 +
</li>  
 +
 +
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Results">Results Overview</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Parts">Parts Overview</a>
 +
</li>
 +
<li>
 +
  <a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Basic_Part">Basic Parts</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Composite_Part">Composite Parts</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Part_Collection">Part Collection</a>
 +
</li>
 +
</ul>
 +
</li>
 +
 +
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices <span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Human_Practices">Human Practices</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Public_Engagement">Education and Engagement</a>
 +
</li>
 +
</ul>
 +
</li>
 +
 +
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Awards <span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Applied_Design">Applied Design</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Entrepreneurship">Entrepreneurship</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Hardware">Hardware</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Measurement">Measurement</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Model">Model</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Plant">Plant</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Software">Software</a>
 +
</li>
 +
</ul>
 +
</li>
 +
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Notebook">Notebook</a>
 +
</li>
 +
 +
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Team <span class="caret"></span></a>
 +
<ul class="dropdown-menu">
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Team">Team Members</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Collaborations">Collaborations</a>
 +
</li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Bielefeld-CeBiTec/Attributions">Attributions</a>
 +
</li>
 +
</ul>
 +
</li>
 +
 +
<li>
 +
<a href="https://igem.org/2018_Judging_Form?team=Bielefeld-CeBiTec">Judging Form ⇗</a>
 +
</li>
 +
 +
</ul>
 +
</div>
 +
  </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>
  
−
<script>
+
</body>
−
/* 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 */
+
</html>
−
var dropdown = document.getElementsByClassName("dropdown-btn");
+
−
var i;
+
−
 
+
−
for (i = 0; i < dropdown.length; i++) {
+
−
  dropdown[i].addEventListener("click", function() {
+
−
this.classList.toggle("active");
+
−
var dropdownContent = this.nextElementSibling;
+
−
if (dropdownContent.style.display === "block") {
+
−
  dropdownContent.style.display = "none";
+
−
} else {
+
−
  dropdownContent.style.display = "block";
+
−
}
+
−
  });
+
−
}
+
−
</script>
+
−
 
+
−
<body/>
+
−
<html/>
+

Revision as of 13:38, 26 May 2018

<!DOCTYPE html> Bootstrap Example

Navbar With Dropdown

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