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

(Created page with "<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link hr...")
 
 
(318 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
<html>
+
{{Lethbridge_HS/bootsrapcss}}
−
<head>
+
{{Team:Lethbridge_HS/bootstrap_js}}
−
  <meta charset="utf-8">
+
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
  
−
<link href="css/bootstrap.min.css" rel="stylesheet">
 
  
−
<style>
 
−
#navbar{
 
  
−
 
+
<html>
−
 
+
  <head>
−
ul {
+
</head>
−
    position: fixed;
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
     top: 0;
+
     <style>
−
    width: 100%;
+
.navbar{
−
}
+
margin-top: 9px;
−
  ul {
+
opacity: .9;
−
  list-style-type: none;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
}
+
 
}
 
}
  
−
ul {
+
.navbar-brand{
−
    list-style-type: none;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    overflow: hidden;
+
−
    background-color: #6c5662;
+
−
}
+
  
−
li {
 
−
    float: right;
 
−
}
 
  
  
−
 
−
 
−
 
−
 
−
li a, .dropbtn {
 
−
    display: inline-block;
 
−
    color: white;
 
−
    text-align: center;
 
−
    padding: 14px 16px;
 
−
    text-decoration: none;
 
−
}
 
−
li a:hover, .dropdown:hover .dropbtn {
 
−
    background-color: #ce7798;
 
 
}
 
}
  
−
li.dropdown {
+
.navbar-collapse collapse{
−
    display: inline-block;
+
display:block;
 
}
 
}
  
−
.dropdown-content {
 
−
    display: none;
 
−
    position: absolute;
 
−
    background-color:#ce7798;
 
−
    min-width: 160px;
 
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
−
    z-index: 1;
 
−
}
 
  
−
.dropdown-content a {
 
−
    color: black;
 
−
    padding: 12px 16px;
 
−
    text-decoration: none;
 
−
    display: block;
 
−
    text-align: left;
 
−
}
 
  
−
.dropdown-content a:hover {background-color: #ce7798}
 
  
−
.dropdown:hover .dropdown-content {
 
−
    display: block;
 
−
}
 
  
 +
</style>
  
  
  
−
 
−
</style>
 
−
</head>
 
 
<body>
 
<body>
  
−
<ul id="navbar">
 
−
  <li><a href="https://igem.org/Main_Page">iGEM</a></li>
 
−
  <li><a href="#">SAFETY</a></li>
 
−
  <li class="dropdown">
 
−
    <a href="#" class="dropbtn" data-toggle="dropdown">NOTEBOOK</a>
 
−
    <ul class="dropdown-content">
 
−
      <li>
 
−
      <a href="#">Description</a>
 
−
      <a href="#">header</a>
 
−
      <a href="#">header</a>
 
−
      <a href="#">header</a>
 
−
      <a href="#">header</a>
 
−
    </li>
 
−
    </ul>
 
−
  </li>
 
  
−
    <li><a href="#">TEAM</a></li>
+
  <nav class="navbar navbar-inverse navbar-fixed-top">
−
  <li class="dropdown">
+
    <div class="container-fluid">
−
    <a href="javascript:void(0)" class="dropbtn">PARTS</a>
+
      <div class="navbar-header">
−
    <ul class="dropdown-content">
+
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
−
        <a href="#">Description</a>
+
          <span class="icon-bar"></span>
−
        <a href="#">header</a>
+
          <span class="icon-bar"></span>
−
        <a href="#">header</a>
+
          <span class="icon-bar"></span>
−
         <a href="#">header</a>
+
         </button>
−
         <a href="#">header</a>
+
         <a class="navbar-brand" href="https://2017.igem.org/Team:Lethbridge_HS "> Lethbridge HS  </a>
−
       </ul>
+
       </div>
−
    </li>
+
      <div class="collapse navbar-collapse" id="myNavbar">
−
    <li class="dropdown">
+
        <ul class="nav navbar-nav navbar-right">
−
      <a href="javascript:void(0)" class="dropbtn">HUMAN PRACTICES</a>
+
 
−
      <ul class="dropdown-content">
+
          <li class="dropdown">
−
        <a href="#">Description</a>
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Project
−
        <a href="#">header</a>
+
        <span class="caret"></span></a>
−
        <a href="#">header</a>
+
        <ul class="dropdown-menu navbar-right">
−
        <a href="#">header</a>
+
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Description">Project Description</a></li>
−
        <a href="#">header</a>
+
          <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Design">Design</a></li>
−
      </ul>
+
           <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Applied_Design">Applied Design</a></li>
−
    </li>
+
           <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Demonstrate ">Demonstrate</a></li>
−
    <li class="dropdown">
+
           <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Model ">Model</a></li>
−
      <a href="javascript:void(0)" class="dropbtn">PROJECT</a>
+
           <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Results ">Results</a></li>
−
      <ul class="dropdown-content">
+
           <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Achievements ">Achievements</a></li>
−
           <a href="#">Description</a>
+
−
           <a href="#">header</a>
+
−
           <a href="#">header</a>
+
−
           <a href="#">header</a>
+
−
           <a href="#">header</a>
+
 
         </ul>
 
         </ul>
 
       </li>
 
       </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>
 
</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>
  
 +
      </div>
 +
    </div>
 +
  </nav>
  
  
  
  
−
 
+
  </body>
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
</body>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
 
</html>
 
</html>

Latest revision as of 23:56, 30 October 2017