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

 
(67 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<html>
+
<html lang="en">
−
<!-- Start of CSS-->
+
<head>
−
<style type="text/css">
+
  <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>
  
−
/* Creates the container for the menu */
+
<nav class="navbar navbar-inverse">
−
#menuContainer  {
+
  <div class="container-fluid">
−
float:left;
+
    <div class="navbar-header">
−
width: 960px;
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
background-color: #000000;
+
        <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>
  
−
/*MENU STYLING */
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Practices">Practices</a></li>
  
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Safety">Safety</a></li>
 +
      </ul>
 +
    </div>
 +
  </div>
 +
</nav>
 +
<div id="bannerContainer"></div>
  
−
/*Styling for the links in the menu */
+
</html>
−
#menuContainer a {
+
−
color: #FFFFFF;
+
−
text-decoration:none;
+
−
font-weight: bold;
+
−
}
+
  
−
/* Sets the style for lists inside menuContainer  */
+
<!--
−
#menuContainer ul {
+
−
list-style: none;
+
−
margin-left:0px;
+
−
}
+
  
−
/*Styles the list items to become menu buttons */
+
<html>
−
#menuContainer ul li {
+
−
text-align: center;
+
−
display: inline;
+
−
width: 100%;
+
−
height:30px;
+
−
padding-top:10px;
+
−
padding-right:16px;
+
−
padding-left:16px;
+
−
font-size:16px;
+
−
}
+
  
 +
<style type="text/css">
  
−
/*For the menu buttons, changes the color when hovering*/
+
.dropdown:hover .dropdown-menu {
−
#menuContainer li:hover {
+
display: block;
−
color: #FFF;
+
}
−
background-color: #24B694;
+
−
}
+
  
−
/*Submenus are not displayed as default*/
 
−
#menuContainer li ul {
 
−
display: none;
 
−
padding-top:15px;
 
−
margin-left: -19px;
 
−
}
 
  
−
/*Submenus are displayed when hovering the menu button */
+
</style>
−
#menuContainer li:hover ul {
+
−
/*display: inline-block; */
+
−
display: block;
+
−
position: absolute;
+
−
float: right;
+
−
margin-left: 134px;
+
−
margin-top:-12px;
+
−
}
+
  
−
/*Style the submenu buttons*/
+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
−
#menuContainer li ul li{
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
−
display: block;
+
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
−
background-color: #59BF92;
+
−
padding-left:20px;
+
−
padding-right:20px;
+
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
−
}
+
  
−
</style>
+
<nav class="navbar navbar-inverse navbar-fixed-top">
−
<!-- End of CSS -->
+
  
−
 
+
  <div class="container-fluid">
−
<div id="bannerContainer">
+
    <div class="navbar-header">
−
<br><br>
+
    </div>
−
<h2> Add a banner to your wiki! </h2>
+
  <div>
−
+
      <ul class="nav navbar-nav">
−
<p>You can make the image 980px  by  200px</p>
+
        <li class="active"><a href="https://2015.igem.org/Team:Harvard_BioDesign">Home</a></li>
−
<p> Remember to call the file: "<i>Team_Example_banner.jpg</i>" </p>
+
        <li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Team">Team</a></li>
−
</div>
+
<li class = "dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://2015.igem.org/Team:Harvard_BioDesign/Project">Project <span class="caret"></span></a>
−
 
+
<ul class="dropdown-menu">
−
<!-- Start of menu -->
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Description">Description</a></li>
−
<div id="menuContainer">
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Experiments">Experiments &amp; Protocols</a></li>  
−
 
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Design">Design</a></li>
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
−
<ul>
+
−
<a href="https://2015.igem.org/Team:Example"><li>Home</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Team"><li>Team</li></a>
+
−
 
+
−
<a href="#"><li>Project
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Example/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Experiments"><li>Experiments &amp; Protocols</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Results"><li>Results</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Design"><li>Design</li></a>
+
 
</ul>
 
</ul>
−
</li></a>
+
</li>
−
 
+
        <li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Results">Results</a></li>
−
<a href="#"><li>Parts
+
<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>
+
<ul class="dropdown-menu">
−
<a href="https://2015.igem.org/Team:Example/Parts"><li>Team Parts</li></a>
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Basic_Part">Basic Parts</a></li>  
−
<a href="https://2015.igem.org/Team:Example/Basic_Part"><li>Basic Parts</li></a>
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Composite_Part">Composite Parts</a></li>  
−
<a href="https://2015.igem.org/Team:Example/Composite_Part"><li>Composite Parts</li></a>
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Part_Collection">Part Collection</a></li>
−
<a href="https://2015.igem.org/Team:Example/Part_Collection"><li>Part Collection</li></a>
+
 
</ul>
 
</ul>
−
</li></a>
+
</li>
  
−
<a href="https://2015.igem.org/Team:Example/Notebook"><li>Notebook</li></a>
+
<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>
 
        
 
        
−
<a href="https://2015.igem.org/Team:Example/Attributions"><li>Attributions</li></a>
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Attributions">Attributions</a></li>
  
−
<a href="https://2015.igem.org/Team:Example/Practices"><li>Collaborations</li></a>
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Practices">Practices</a></li>
  
−
<a href="https://2015.igem.org/Team:Example/Practices"><li>Human Practices</li></a>
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Safety">Safety</a></li>      
 +
      </ul>
 +
  </div>
 +
  </div>
 +
</nav>
  
−
<a href="https://2015.igem.org/Team:Example/Safety"><li>Safety</li></a>
+
<div id="bannerContainer"></div>
  
 +
</html>
  
−
 
+
-->
−
</ul>
+
−
</div>
+
−
<!-- End of menu  -->
+
−
</html>
+

Latest revision as of 16:22, 13 July 2015

Bootstrap Collapsable Header