Difference between revisions of "Template:Team:Harvard BioDesign/Templates:header"

 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
+
<html lang="en">
 +
<head>
 +
  <title>Bootstrap Collapsable Header</title>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 +
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 +
</head>
 +
<body>
  
<style type="text/css">
+
<nav class="navbar navbar-inverse">
 +
  <div class="container-fluid">
 +
    <div class="navbar-header">
 +
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>                       
 +
      </button>
 +
      <a class="navbar-brand" href="#">Harvard BioDesign 2015</a>
 +
    </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav">
 +
            <li><a href="https://2015.igem.org/Team:Harvard_BioDesign">Home</a></li>
 +
            <li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Team">Team</a></li>
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Project">Project</a></li>
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Results">Results</a></li>
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Notebook">Notebook</a></li>
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Parts">Parts</a></li>
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Collaborations">Collaborations</a></li>
 +
     
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Attributions">Attributions</a></li>
  
.dropdown:hover .dropdown-menu {
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Practices">Practices</a></li>
display: block;
+
}
+
  
/* Resizes the menubar to fit the links (default is 400px) */
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Safety">Safety</a></li>
#top_menu_14 {
+
      </ul>
  position: fixed;
+
    </div>
  width: 100%;
+
   </div>
  top: 0px;
+
</nav>
   left: 0px;
+
<div id="bannerContainer"></div>
  height: 16px;
+
  background-color: transparent;
+
  color: transparent;
+
  border-bottom: none;
+
  z-index: 9999;
+
}
+
  
#top_menu_14:hover {
+
</html>
  position: fixed;
+
  width: 100%;
+
  top: 0px;
+
  left: 0px;
+
  height: 16px;
+
  background-color: #383838;
+
  border-bottom: 2px solid black;
+
  z-index: 9999;
+
}
+
  
#top_menu_inside {
+
<!--
  display: block;
+
 
  position: relative;
+
<html>
  width: 75%;
+
 
  height: 100%;
+
<style type="text/css">
  margin: 0px auto;
+
 
  padding: 0 10px;
+
.dropdown:hover .dropdown-menu {
  border-left: none;
+
display: block;
  border-right: none;
+
}
  font-family: 'helvetica', sans-serif;
+
  font-size: 12px;
+
  font-weight: 400;
+
  color: transparent;
+
}
+
  
  
#top_menu_inside:hover {
 
  display: block;
 
  position: relative;
 
  width: 75%;
 
  height: 100%;
 
  margin: 0px auto;
 
  padding: 0 10px;
 
  border-left: 1px solid #c8c8c8;
 
  border-right: 1px solid #c8c8c8;
 
  font-family: 'helvetica', sans-serif;
 
  font-size: 12px;
 
  font-weight: 400;
 
  color: #ffffff;
 
}
 
 
</style>
 
</style>
  
Line 67: Line 60:
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  
<nav class="navbar navbar-inverse navbar-fixed-top">
+
<nav class="navbar navbar-inverse navbar-fixed-top">
  
 
   <div class="container-fluid">
 
   <div class="container-fluid">
Line 83: Line 76:
 
</ul>
 
</ul>
 
</li>
 
</li>
 +
        <li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Results">Results</a></li>
 
<li class = "dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://2015.igem.org/Team:Harvard_BioDesign/Parts">Parts <span class="caret"></span></a>
 
<li class = "dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://2015.igem.org/Team:Harvard_BioDesign/Parts">Parts <span class="caret"></span></a>
 
<ul class="dropdown-menu">
 
<ul class="dropdown-menu">
Line 90: Line 84:
 
</ul>
 
</ul>
 
</li>
 
</li>
 
        <li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Results">Results</a></li>
 
  
 
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Notebook">Notebook</a></li>
 
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Notebook">Notebook</a></li>
 +
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Collaborations">Collaborations</a></li>
 
        
 
        
 
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Attributions">Attributions</a></li>
 
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Attributions">Attributions</a></li>
Line 105: Line 99:
 
</nav>
 
</nav>
  
<div id="bannerContainer">
+
<div id="bannerContainer"></div>
<br><br>
+
<h2> Add a banner to your wiki! </h2>
+
+
<p>You can make the image 980px  by  200px</p>
+
<p> Remember to call the file: "<i>Team_Example_banner.jpg</i>" </p>
+
</div>
+
  
 +
</html>
  
</html>
+
-->

Latest revision as of 16:22, 13 July 2015

Bootstrap Collapsable Header