Template:Team:Northwestern/Template/nav

From 2014.igem.org

(Difference between revisions)
 
(24 intermediate revisions not shown)
Line 4: Line 4:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<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>
Line 12: Line 13:
margin-right: 50px;
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;
}
}
Line 36: Line 59:
                
                
-
                <li><a href="https://2014.igem.org/Team:Northwestern/Project">Project</a></li>
+
            <li class="dropdown">
-
                <li><a href="https://2014.igem.org/Team:Northwestern/Team">Team</a></li>
+
          <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">Protocols</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">Human Practice<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="#">Outreach Project 1</a></li>
+
-
                    <li><a href="#">Outreach Project 2</a></li>
+
-
                    <li><a href="#">Survey Data</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 62: Line 86:
       </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">
-
<header id="myCarousel" class="carousel slide">
+
              <p>David loves to run gels!</p>
-
        <!-- 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>
+
-
 
+
-
        <!-- Wrapper for slides -->
+
-
        <div class="carousel-inner">
+
-
            <div class="item active">
+
-
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
+
-
                <div class="carousel-caption">
+
-
                    <h2>Caption 1</h2>
+
-
                </div>
+
             </div>
             </div>
-
            <div class="item">
+
          </div>
-
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
+
        </div>
-
                <div class="carousel-caption">
+
        <div class="item">
-
                    <h2>Caption 2</h2>
+
          <img src="https://static.igem.org/mediawiki/2014/6/6d/IMG_5400.jpg" alt="3">
-
                </div>
+
          <div class="container">
-
            </div>
+
            <div class="carousel-caption">
-
            <div class="item">
+
            <p>After another successful presentation session</p>
-
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
+
-
                <div class="carousel-caption">
+
-
                    <h2>Caption 3</h2>
+
-
                </div>
+
             </div>
             </div>
 +
          </div>
         </div>
         </div>
-
 
+
      </div>
-
        <!-- Controls -->
+
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
-
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
-
            <span class="icon-prev"></span>
+
     </div><!-- /.carousel -->
-
        </a>
+
-
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
+
-
            <span class="icon-next"></span>
+
-
        </a>
+
-
     </header>
+
</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"