Template:Team:Northwestern/Template/nav

From 2014.igem.org

(Difference between revisions)
 
(40 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>
<style>
.logo {
.logo {
-
display: block;
 
-
position: relative;
 
float: left;
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;
}
}
Line 32: 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">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 57: Line 85:
       </div>
       </div>
-
     </div>
+
 
-
</nav>
+
<!-- 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"