Template:Team:Northwestern/Template/nav

From 2014.igem.org

(Difference between revisions)
 
(54 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="navbar-wrapper">
+
<div class="container">
-
      <div class="container">
+
-
<a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width=55px;></a>
+
-
        <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=".navbar-collapse">
+
-
                <span class="sr-only">Toggle navigation</span>
+
-
                <span class="icon-bar"></span>
+
-
                <span class="icon-bar"></span>
+
-
                <span class="icon-bar"></span>
+
-
              </button>
+
-
              <a class="navbar-brand" href="https://2014.igem.org/Team:Northwestern/Home">Home</a>
+
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
-
            </div>
+
  <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>
 +
      </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><a href="https://2014.igem.org/Team:Northwestern/Project">Project</a></li>
+
 
-
                <li><a href="https://2014.igem.org/Team:Northwestern/Team">Team</a></li>
+
             
 +
            <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/Human_Practice">Human Practice</a></li>
+
                 <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 class="dropdown">
+
                  
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">To be fixed soon<span class="caret"></span></a>
+
                     <li><a href="https://2014.igem.org/Team:Northwestern/Human_Practice">Outreach Projects</a></li>
-
                  <ul class="dropdown-menu" role="menu">
+
 
-
                     <li><a href="#">Content</a></li>
+
-
                    <li><a href="#">More Content</a></li>
+
-
                    <li><a href="#">More Content</a></li>
+
-
                    <li class="divider"></li>
+
-
                    <li class="dropdown-header">More</li>
+
-
                    <li><a href="#">Separated link</a></li>
+
-
                    <li><a href="#">One more separated link</a></li>
+
-
                  </ul>
+
-
                </li>
+
               </ul>
               </ul>
Line 48: 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

Dropdown menu from bootstrap

Retrieved from "http://2014.igem.org/Template:Team:Northwestern/Template/nav"