Template:Team:Northwestern/Template/nav
From 2014.igem.org
(Difference between revisions)
(59 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
+ | <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | ||
+ | <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | ||
+ | <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title>Dropdown menu from bootstrap</title> | <title>Dropdown menu from bootstrap</title> | ||
+ | <style> | ||
+ | .logo { | ||
+ | float: left; | ||
+ | margin-top: 10px; | ||
+ | margin-right: 50px; | ||
+ | } | ||
+ | /* Carousel base class */ | ||
+ | .carousel { | ||
+ | height: 600px; | ||
+ | margin-bottom: 60px; | ||
+ | } | ||
+ | /* Since positioning the image, we need to help out the caption */ | ||
+ | .carousel-caption { | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | /* Declare heights because of positioning of img element */ | ||
+ | .carousel .item { | ||
+ | height: 600px; | ||
+ | background-color: #777; | ||
+ | } | ||
+ | .carousel-inner > .item > img { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | min-width: 100%; | ||
+ | height: 600px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
- | + | <div class="container"> | |
- | + | ||
- | + | <div class="navbar navbar-default navbar-fixed-top" role="navigation"> | |
- | + | <div class="container"> | |
- | + | ||
- | + | <div class="navbar-header"> | |
- | + | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
- | + | <span class="sr-only">Toggle navigation</span> | |
- | + | <span class="icon-bar"></span> | |
- | + | <span class="icon-bar"></span> | |
- | + | <span class="icon-bar"></span> | |
- | <a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width= | + | </button> |
- | + | <a href="https://2014.igem.org/Main_Page"><img class="logo" src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width=40px;></a> | |
- | + | <a class="navbar-brand" href="https://2014.igem.org/Team:Northwestern/Home">Home</a></li> | |
+ | </div> | ||
<div class="navbar-collapse collapse"> | <div class="navbar-collapse collapse"> | ||
<ul class="nav navbar-nav"> | <ul class="nav navbar-nav"> | ||
- | + | ||
- | + | ||
+ | <li class="dropdown"> | ||
+ | <a href="https://2014.igem.org/Team:Northwestern/Project" class="dropdown-toggle" data-toggle="dropdown">Project <span class="caret"></span></a> | ||
+ | |||
+ | <ul class="dropdown-menu" role="menu"> | ||
+ | <li><a href="https://2014.igem.org/Team:Northwestern/Project">Overview</a></li> | ||
+ | <li class="divider"></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Northwestern/Growth">Cultures</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Northwestern/CFPS">CFPS</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Northwestern/parts">Part submitted</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Northwestern/Team">Team</a></li> | ||
<li><a href="https://2014.igem.org/Team:Northwestern/Safety">Safety</a></li> | <li><a href="https://2014.igem.org/Team:Northwestern/Safety">Safety</a></li> | ||
<li><a href="https://2014.igem.org/Team:Northwestern/Notebook">Notebook</a></li> | <li><a href="https://2014.igem.org/Team:Northwestern/Notebook">Notebook</a></li> | ||
- | <li><a href="https://2014.igem.org/Team:Northwestern/ | + | <li><a href="https://2014.igem.org/Team:Northwestern/Protocols">Protocols</a></li> |
<li><a href="https://2014.igem.org/Team:Northwestern/Modeling">Modeling</a></li> | <li><a href="https://2014.igem.org/Team:Northwestern/Modeling">Modeling</a></li> | ||
- | + | ||
- | + | <li><a href="https://2014.igem.org/Team:Northwestern/Human_Practice">Outreach Projects</a></li> | |
- | + | ||
- | <li><a href=" | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</ul> | </ul> | ||
</div> | </div> | ||
Line 47: | Line 85: | ||
</div> | </div> | ||
- | </div> | + | |
+ | <!-- Carousel | ||
+ | ================================================== --> | ||
+ | <div id="myCarousel" class="carousel slide" data-ride="carousel"> | ||
+ | <!-- Indicators --> | ||
+ | <ol class="carousel-indicators"> | ||
+ | <li data-target="#myCarousel" data-slide-to="0" class="active"></li> | ||
+ | <li data-target="#myCarousel" data-slide-to="1"></li> | ||
+ | <li data-target="#myCarousel" data-slide-to="2"></li> | ||
+ | </ol> | ||
+ | <div class="carousel-inner"> | ||
+ | <div class="item active"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/8/82/IMG_5365.jpg" alt="First slide"> | ||
+ | <div class="container"> | ||
+ | <div class="carousel-caption"> | ||
+ | <p>Outreach: teaching high schoolers about synthetic biology</p> | ||
+ | <p><a class="btn btn-sm btn-primary" href="https://2014.igem.org/Team:Northwestern/Human_Practice" role="button">More on this...</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/f/f1/IMG_5391.jpg" alt="Second slide"> | ||
+ | <div class="container"> | ||
+ | <div class="carousel-caption"> | ||
+ | <p>David loves to run gels!</p> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/6/6d/IMG_5400.jpg" alt="3"> | ||
+ | <div class="container"> | ||
+ | <div class="carousel-caption"> | ||
+ | <p>After another successful presentation session</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> | ||
+ | <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> | ||
+ | </div><!-- /.carousel --> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 23:35, 17 October 2014