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

 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<style type="text/css">
+
<html lang="en">
−
/*Strip the ul of padding and list styling*/
+
<head>
−
ul {
+
  <title>Bootstrap Collapsable Header</title>
−
list-style:none;
+
  <meta charset="utf-8">
−
margin:0;
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
padding:0;
+
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
−
position: absolute;
+
  <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>
  
−
/*Create a horizontal list with spacing*/
+
<nav class="navbar navbar-inverse">
−
li {
+
  <div class="container-fluid">
−
display:inline-block;
+
    <div class="navbar-header">
−
float: left;
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
margin-right: 1px;
+
        <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>
  
−
/*Style for menu links*/
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Practices">Practices</a></li>
−
li a {
+
−
display:block;
+
−
min-width:140px;
+
−
height: 50px;
+
−
text-align: center;
+
−
line-height: 50px;
+
−
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
−
color: #fff;
+
−
background: #2f3036;
+
−
text-decoration: none;
+
−
}
+
  
−
/*Hover state for top level links*/
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Safety">Safety</a></li>
−
li:hover a {
+
      </ul>
−
background: #19c589;
+
    </div>
−
}
+
  </div>
 +
</nav>
 +
<div id="bannerContainer"></div>
  
−
/*Style for dropdown links*/
+
</html>
−
li:hover ul a {
+
−
background: #f3f3f3;
+
−
color: #2f3036;
+
−
height: 40px;
+
−
line-height: 40px;
+
−
}
+
  
−
/*Hover state for dropdown links*/
+
<!--
−
li:hover ul a:hover {
+
−
background: #19c589;
+
−
color: #fff;
+
−
}
+
  
−
/*Hide dropdown links until they are needed*/
+
<html>
−
li ul {
+
−
display: none;
+
−
}
+
  
−
/*Make dropdown links vertical*/
+
<style type="text/css">
−
li ul li {
+
−
display: block;
+
−
float: none;
+
−
}
+
  
−
/*Prevent text wrapping*/
+
.dropdown:hover .dropdown-menu {
−
li ul li a {
+
display: block;
−
width: auto;
+
}
−
min-width: 100px;
+
−
padding: 0 20px;
+
−
}
+
  
−
/*Display the dropdown on hover*/
 
−
ul li a:hover + .hidden, .hidden:hover {
 
−
display: block;
 
−
}
 
  
−
/*Style 'show menu' label button and hide it by default*/
+
</style>
−
.show-menu {
+
−
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
−
text-decoration: none;
+
−
color: #fff;
+
−
background: #19c589;
+
−
text-align: center;
+
−
padding: 10px 0;
+
−
display: none;
+
−
}
+
  
−
/*Hide checkbox*/
+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
−
input[type=checkbox]{
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
−
    display: none;
+
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
−
}
+
  
−
/*Show menu when invisible checkbox is checked*/
+
<nav class="navbar navbar-inverse navbar-fixed-top">
−
input[type=checkbox]:checked ~ #menu{
+
−
    display: block;
+
−
}
+
  
 +
  <div class="container-fluid">
 +
    <div class="navbar-header">
 +
    </div>
 +
  <div>
 +
      <ul class="nav navbar-nav">
 +
        <li class="active"><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 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">
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Description">Description</a></li>
 +
<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>
 +
</ul>
 +
</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>
 +
<ul class="dropdown-menu">
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Basic_Part">Basic Parts</a></li>
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Composite_Part">Composite Parts</a></li>
 +
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Part_Collection">Part Collection</a></li>
 +
</ul>
 +
</li>
  
−
/*Responsive Styles*/
+
<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>
  
−
@media screen and (max-width : 760px){
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Practices">Practices</a></li>
−
/*Make dropdown links appear inline*/
+
 
−
ul {
+
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Safety">Safety</a></li>       
−
position: static;
+
      </ul>
−
display: none;
+
  </div>
−
}
+
  </div>
−
/*Create vertical spacing*/
+
</nav>
−
li {
+
 
−
margin-bottom: 1px;
+
<div id="bannerContainer"></div>
−
}
+
−
/*Make all menu links full width*/
+
−
ul li, li a {
+
−
width: 100%;
+
−
}
+
−
/*Display 'show menu' link*/
+
−
.show-menu {
+
−
display:block;
+
−
}
+
−
}
+
−
</style>
+
−
/***************************/
+
  
−
<head>
 
−
<meta charset="UTF-8">
 
−
<title>CSS Only Navigation Menu</title>
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
<link rel="stylesheet" href="style.css">
 
−
</head>
 
−
<body>
 
−
<label for="show-menu" class="show-menu">Show Menu</label>
 
−
<input type="checkbox" id="show-menu" role="button">
 
−
<ul id="menu">
 
−
<li><a href="#">Home</a></li>
 
−
<li>
 
−
<a href="#">About ￬</a>
 
−
<ul class="hidden">
 
−
<li><a href="#">Who We Are</a></li>
 
−
<li><a href="#">What We Do</a></li>
 
−
</ul>
 
−
</li>
 
−
<li>
 
−
<a href="#">Portfolio ￬</a>
 
−
<ul class="hidden">
 
−
<li><a href="#">Photography</a></li>
 
−
<li><a href="#">Web & User Interface Design</a></li>
 
−
<li><a href="#">Illustration</a></li>
 
−
</ul>
 
−
</li>
 
−
<li><a href="#">News</a></li>
 
−
<li><a href="#">Contact</a></li>
 
−
</ul>
 
−
</body>
 
 
</html>
 
</html>
 +
 +
-->

Latest revision as of 16:22, 13 July 2015

Bootstrap Collapsable Header