Difference between revisions of "Template:Lethbridge HS/navbar"

 
(237 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{Lethbridge_HS/bootsrapcss}}
 +
{{Team:Lethbridge_HS/bootstrap_js}}
 +
 +
 +
 
<html>
 
<html>
 
   <head>
 
   <head>
−
    <link href="css/bootstrap.min.css" rel="stylesheet">
+
</head>
−
 
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
     <style>
 
     <style>
−
    .navbar {
+
.navbar{
−
      font-family: Arial;
+
margin-top: 9px;
−
      color: white;
+
opacity: .9;
−
      margin-top: 20px;
+
−
    }
+
−
 
+
−
    body {
+
−
      list-style-type: none;
+
 
}
 
}
  
−
    .home:hover {
+
.navbar-brand{
−
      background-color: lightgreen;
+
−
    }
+
  
−
    .drop-project:hover {
 
−
      background-color: gold;
 
−
    }
 
  
−
    .drop-parts:hover {
 
−
      background-color: cyan;
 
−
    }
 
  
−
    .drop-hp:hover {
+
}
−
      background-color: crimson;
+
−
    }
+
  
−
    .drop-note:hover {
+
.navbar-collapse collapse{
−
      background-color: lightgreen;
+
display:block;
−
    }
+
}
  
−
    .nav-safety:hover {
 
−
      background-color: crimson;
 
−
    }
 
  
−
    .nav-team:hover {
 
−
      background-color: cyan;
 
−
    }
 
  
−
    .nav-igem:hover {
 
−
      background-color: gold;
 
−
    }
 
  
−
    .navbar ul {
 
−
      margin: 0px;
 
−
      padding: 0px;
 
−
      list-style-type: none;
 
−
    }
 
  
−
    .navbar ul li {
+
</style>
−
      float: left;
+
−
      width: 167px;
+
−
      height: 45px;
+
−
      opacity: .9;
+
−
      background-color: black;
+
−
      line-height: 45px;
+
−
      text-align: center;
+
−
      font-size: 20px
+
−
    }
+
  
−
    .navbar ul li a {
 
−
      text-decoration: none;
 
−
      color: white;
 
−
      display: block;
 
−
    }
 
  
−
    .navbar ul li a:hover {
 
−
      text-decoration: none;
 
−
    }
 
  
 +
<body>
  
  
−
    .navbar ul li ul li {
+
  <nav class="navbar navbar-inverse navbar-fixed-top">
−
       display: none;
+
    <div class="container-fluid">
−
    }
+
       <div class="navbar-header">
 +
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
 +
          <span class="icon-bar"></span>
 +
          <span class="icon-bar"></span>
 +
          <span class="icon-bar"></span>
 +
        </button>
 +
        <a class="navbar-brand" href="https://2017.igem.org/Team:Lethbridge_HS "> Lethbridge HS  </a>
 +
      </div>
 +
      <div class="collapse navbar-collapse" id="myNavbar">
 +
        <ul class="nav navbar-nav navbar-right">
  
−
     .navbar ul li:hover ul li {
+
          <li class="dropdown">
−
      display: block;
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Project
−
    }
+
        <span class="caret"></span></a>
 +
        <ul class="dropdown-menu navbar-right">
 +
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Description">Project Description</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Design">Design</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Applied_Design">Applied Design</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Demonstrate ">Demonstrate</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Model ">Model</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Results ">Results</a></li>
 +
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Achievements ">Achievements</a></li>
 +
        </ul>
 +
      </li>
 +
      <li class="dropdown">
 +
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Parts
 +
    <span class="caret"></span></a>
 +
    <ul class="dropdown-menu navbar-right">
 +
      <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Basic_Part ">Basic Parts</a></li>
 +
      <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Composite_Part ">Composite Parts</a></li>
 +
      <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Improve ">Improved Parts</a></li>
 +
      <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Contribution ">Part Contributions</a></li>
 +
      <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Part_Collection ">Part Collection</a></li>
 +
    </ul>
 +
  </li>
 +
  <li class="dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices
 +
<span class="caret"></span></a>
 +
<ul class="dropdown-menu navbar-right">
 +
  <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Human_Practices ">Human Practices</a></li>
 +
  <li><a href="https://2017.igem.org/Team:Lethbridge_HS/HP/Silver ">Silver</a></li>
 +
  <li><a href="https://2017.igem.org/Team:Lethbridge_HS/HP/Gold_Integrated ">Gold</a></li>
 +
  <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Engagement ">Engagement</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Lab
 +
<span class="caret"></span></a>
 +
<ul class="dropdown-menu navbar-right">
 +
<li><a href="https://2017.igem.org/Team:Lethbridge_HS/Notebook">Notebook</a></li>
 +
<li><a href="https://2017.igem.org/Team:Lethbridge_HS/Experiments ">Experiments</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2017.igem.org/Team:Lethbridge_HS/Safety ">Safety</a></li>
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Team
 +
<span class="caret"></span></a>
 +
<ul class="dropdown-menu navbar-right">
 +
<li><a href="https://2017.igem.org/Team:Lethbridge_HS/Team ">Team</a></li>
 +
<li><a href="https://2017.igem.org/Team:Lethbridge_HS/Collaborations ">Collaborations</a></li>
 +
<li><a href="https://2017.igem.org/Team:Lethbridge_HS/Attributions ">Attributions</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://igem.org/Main_Page ">iGEM</a></li>
 +
        </ul>
  
−
     </style>
+
      </div>
 +
     </div>
 +
  </nav>
  
−
  </head>
 
  
−
<body>
 
−
 
−
 
−
 
−
<!-- Navigation Bar -->
 
−
<div class="navbar">
 
−
  <ul>
 
−
    <!-- Home -->
 
−
    <li><a class="home" href="https://2017.igem.org/Team:Lethbridge_HS">Home</a></li>
 
−
    <!-- Project -->
 
−
    <li><a class="drop-project" href="#">Project</a>
 
−
      <ul>
 
−
        <li><a class="drop-project" href="https://2017.igem.org/Team:Lethbridge_HS/Description">Description</a></li>
 
−
        <li><a class="drop-project" href="https://2017.igem.org/Team:Lethbridge_HS/Design">Design</a></li>
 
−
        <li><a class="drop-project" href="https://2017.igem.org/Team:Lethbridge_HS/Prototype">Prototype</a></li>
 
−
        <li><a class="drop-project" href="https://2017.igem.org/Team:Lethbridge_HS/Demonstrate">Proof Of Concept</a></li>
 
−
        <li><a class="drop-project" href="https://2017.igem.org/Team:Lethbridge_HS/Experiments">Experitments</a></li>
 
−
        <li><a class="drop-project" href="https://2017.igem.org/Team:Lethbridge_HS/Results">Results</a></li>
 
−
        <li><a class="drop-project" href="https://2017.igem.org/Team:Lethbridge_HS/Achievements">Achievements</a></li>
 
−
      </ul>
 
−
      </li>
 
−
    <!-- Parts -->
 
−
    <li><a class="drop-parts" href="#">Parts</a>
 
−
      <ul>
 
−
        <li><a class="drop-parts" href="https://2017.igem.org/Team:Lethbridge_HS/Basic_Part">Basic</a></li>
 
−
        <li><a class="drop-parts" href="https://2017.igem.org/Team:Lethbridge_HS/Composite_Part">Composite</a></li>
 
−
        <li><a class="drop-parts" href="https://2017.igem.org/Team:Lethbridge_HS/IMPROVE">Improve</a></li>
 
−
        <li><a class="drop-parts" href="https://2017.igem.org/Team:Lethbridge_HS/Part_Collection">Part Collection</a></li>
 
−
      </ul>
 
−
    </li>
 
−
    <!-- Human Practices -->
 
−
    <li><a class="drop-hp" href="#">Human Practices</a> <!-- Link to HP page -->
 
−
      <ul>
 
−
        <li><a class="drop-hp" href="https://2017.igem.org/Team:Lethbridge_HS/Human_Practices">Human Practices</a></li>
 
−
        <li><a class="drop-hp" href="https://2017.igem.org/Team:Lethbridge_HS/HP/Silver">Silver</a></li>
 
−
        <li><a class="drop-hp" href="https://2017.igem.org/Team:Lethbridge_HS/HP/Gold">Gold</a></li>
 
−
        <li><a class="drop-hp" href="https://2017.igem.org/Team:Lethbridge_HS/Integrated_Practices">Integrated Practices</a></li>
 
−
        <li><a class="drop-hp" href="https://2017.igem.org/Team:Lethbridge_HS/Engagement">Public Engagement</a></li>
 
−
      </ul>
 
−
    </li>
 
−
    <!-- Notebook -->
 
−
    <li><a class="drop-note" href="#">Notebook</a>
 
−
      <ul>
 
−
        <li><a class="drop-note" href="https://2017.igem.org/Team:Lethbridge_HS/Notebook">Lab Book</a></li>
 
−
        <li><a class="drop-note" href="https://2017.igem.org/Team:Lethbridge_HS/Methods">Methods</a></li>
 
−
      </ul>
 
−
    </li>
 
−
    <!-- Safety -->
 
−
    <li><a class="nav-safety" href="#">Safety</a></li>
 
−
    <!-- Team Bios -->
 
−
    <li><a class="nav-team" href="#">Team</a></li>
 
−
    <!-- iGEM Mainpage -->
 
−
    <li><a class="nav-igem" href="#">iGEM</a></li>
 
−
  </ul>
 
−
</div>
 
  
  
 
   </body>
 
   </body>
 
</html>
 
</html>

Latest revision as of 23:56, 30 October 2017