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

Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
  <head>
−
<link href="css/bootstrap.min.css" rel="stylesheet">
+
    <link href="css/bootstrap.min.css" rel="stylesheet">
  
−
<style>
+
    <style>
−
.logo{
+
    .navbar {
−
    float:left;
+
      font-family: Arial;
−
    margin-left:9%;
+
      color: white;
−
    margin-top: 0%;
+
      margin-top: 20px;
−
}
+
    }
−
.navbar-header{
+
−
    margin-top:-20px;
+
  
−
}
+
    .drop-project:hover {
−
.navbar-default{
+
      background-color: gold;
−
  /** box-shadow: 0px 8px 6px -6px #999;**/
+
    }
  
−
}
+
     .drop-parts:hover {
−
.navbar-default .navbar-nav>li>a {
+
      background-color: cyan;
−
     color: white;
+
    }
−
    font-size: 16px;
+
−
    padding-top:2px;
+
−
    padding-top:2px;
+
−
    margin-top: 12px;
+
−
    text-decoration: none;
+
−
    font-family: Arial;
+
−
}
+
−
.navbar-collapse.collapse {
+
−
    padding-bottom: 6px;
+
−
    padding-top: 3px;
+
−
}
+
−
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
+
−
    color: #6d6875;
+
−
    background-color: transparent;
+
−
}
+
  
−
.removeNavBarColor{
+
    .drop-hp:hover {
−
    background-color: transparent;
+
      background-color: crimson;
 +
    }
  
−
}
+
    .drop-note:hover {
−
.makeNavBarColor{
+
      background-color: lightgreen;
−
  /** background-color: #CC141C ;*/
+
     }
−
     background-color: #6d6875 ;
+
  
 +
    .nav-safety:hover {
 +
      background-color: crimson;
 +
    }
  
−
}
+
    .nav-team:hover {
 +
      background-color: cyan;
 +
    }
  
−
.navbar-default .navbar-nav>li>a{
+
    .nav-igem:hover {
−
    padding-top: 30px;
+
      background-color: gold;
−
    margin-top: 0;
+
     }
−
    margin-bottom: 0%;
+
−
    padding-bottom: 15px;
+
−
    color:black;
+
−
}
+
−
.navbar-collapse.collapse{
+
−
     padding-top: 0;
+
−
    padding-bottom: 0;
+
−
}
+
  
−
.menuIcon{
+
    .navbar ul {
 +
      margin: 0px;
 +
      padding: 0px;
 +
      list-style-type: none;
 +
    }
  
−
}
+
    .navbar ul li {
−
.active{
+
      float: left;
−
    background-color: #6d6875;
+
      height: 40px;
−
    color: red !important;
+
      opacity: .9;
−
}
+
      background-color: black;
−
[class^="active"]:before, [class*="active"]:before, [class^="active"]:after, [class*="active"]:after {
+
      line-height: 40px;
−
    color: red;
+
      text-align: center;
−
}
+
      font-size: 20px
−
.menuIcon:before,
+
    }
−
.menuIcon:after {
+
  
−
        font-size: 20px;
+
    .navbar ul li a {
 +
      text-decoration: none;
 +
      color: white;
 +
      display: block;
 +
    }
  
−
}
+
    .navbar ul li a:hover {
−
.menuIcon2:after {
+
      text-decoration: none;
 +
    }
  
−
        font-size: 40px;
 
  
−
}
 
  
−
.dropdown:hover .dropdown-menu {
+
    .navbar ul li ul li {
−
display: block;
+
      display: none;
−
text-decoration: none;
+
    }
  
−
}
+
    .navbar ul li:hover ul li {
 +
      display: block;
 +
    }
  
−
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
+
    </style>
−
    color:red;
+
−
}
+
  
−
.button{
+
  </head>
−
    float: left;
+
−
    display: inline-block;
+
−
    border-radius: 30px;
+
−
    background-color: #ee4d4d;
+
−
    padding: 1.5% 2%;
+
−
    color: white;
+
−
    position: relative;
+
−
    text-align: center;
+
−
    margin-left: auto;
+
−
    margin-right: auto;
+
−
}
+
−
 
+
−
 
+
−
.menuitem{
+
−
    width: 100%;
+
−
    padding-right: 20px;
+
−
    padding-top: 8px;
+
−
}
+
−
.menuitem p{
+
−
float: right;
+
−
margin: 0;
+
−
    padding: 0;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
</style>
+
−
</head>
+
  
 
<body>
 
<body>
−
<nav class="navbar navbar-default navbar-fixed-top menu" style="border:none;">
 
−
          <div class="container-fluid" style="padding-left:10%; padding-right:10%;">
 
−
              <div class="navbar-header">
 
−
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1" aria-expanded="false">
 
−
                      <span class="sr-only">Toggle navgiation</span>
 
−
                      <span class="icon-bar"></span>
 
−
                      <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" style="color:#CC141C; margin-top:0%;"><img src="https://static.igem.org/mediawiki/igem.org/7/73/T--Lethbridge_HS--logo.jpg" height="115"></a>
 
−
              </div>
 
−
 
−
              <div class="collapse navbar-collapse" id="navbar1">
 
−
                  <ul class="nav navbar-nav navbar-right" >
 
−
 
−
 
−
                      <li class= "dropdown" >
 
−
                          <a href="#" class="dropdown-toggle" data-toggle = "dropdown">PROJECT<b class="caret"></b></a>
 
−
                          <ul class="dropdown-menu" >
 
−
                              <li>
 
−
                                  <a href="https://2017.igem.org/Team:Lethbridge_HS/Description">DESCRIPTION</a>
 
−
                                  <a href="https://2017.igem.org/Team:Lethbridge_HS/Design">DESIGN</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Prototype">PROTOTYPE</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Demonstrate">DEMONSTRATE</a>
 
−
                                  <a href="https://2017.igem.org/Team:Lethbridge_HS/Experiments">EXPERIMENTS</a>
 
−
                                  <a href="https://2017.igem.org/Team:Lethbridge_HS/Results">RESULTS</a>
 
−
                                  <a href="https://2017.igem.org/Team:Lethbridge_HS/Model">MODEL</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Achievements">ACHIEVEMENTS</a>
 
−
                              </li>
 
−
                          </ul>
 
−
                      </li>
 
−
                      <li class= "dropdown">
 
−
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">PARTS<b class="caret"></b></a>
 
−
                            <ul class="dropdown-menu">
 
−
                                <li>
 
−
                                    <a href="https://2017.igem.org/Team:Lethbridge_HS/Basic_Part">BASIC PARTS</a>
 
−
                                    <a href="https://2017.igem.org/Team:Lethbridge_HS/Composite_Part">COMPOSITE
 
−
PARTS</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/IMPROVE">IMPROVE</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Part_Collection">PART_COLLECTION</a>
 
−
                                </li>
 
−
                            </ul>
 
−
                        </li>
 
−
 
−
 
−
 
−
<li class= "dropdown">
 
−
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">HUMAN PRACTICES<b class="caret"></b></a>
 
−
                            <ul class="dropdown-menu">
 
−
                                <li>
 
−
                                    <a href="https://2017.igem.org/Team:Lethbridge_HS/Human_Practices">HUMAN PRACTICES</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/HP/Silver">SILVER</a>
 
−
  <a href="https://2017.igem.org/Team:Lethbridge_HS/HP/Gold">GOLD</a>
 
−
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Integrated_Practices">INTEGRATED HUMAN PRACTICES</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Engagement">ENGAGEMENT</a>
 
−
                                </li>
 
−
                            </ul>
 
−
                        </li>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<li class= "dropdown">
 
−
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">NOTEBOOK<b class="caret"></b></a>
 
−
                            <ul class="dropdown-menu">
 
−
                                <li>
 
−
                                    <a href="https://2017.igem.org/Team:Lethbridge_HS/Notebook">NOTEBOOK</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Methods">METHODS</a>
 
−
 
−
                                </li>
 
−
                            </ul>
 
−
                        </li>
 
−
 
−
 
−
 
−
                        <li><a href="https://2017.igem.org/Team:Lethbridge_HS/Safety" style="" class="menuitem" style="margin:0; padding:0; ">SAFETY</a></li>
 
−
                              <li class= "dropdown">
 
−
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">TEAM<b class="caret"></b></a>
 
−
                            <ul class="dropdown-menu">
 
−
                                <li>
 
−
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Team">TEAM</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Collaborations">COLLABORATIONS</a>
 
−
<a href="https://2017.igem.org/Team:Lethbridge_HS/Attributions">ATTRIBUTIONS</a>
 
−
 
−
                                </li>
 
−
                            </ul>
 
−
                        </li>
 
−
 
−
 
−
 
−
 
−
 
−
                                <li><a href="https://igem.org/Main_Page" style="" class="menuitem" style="margin:0; padding:0 ">IGEM</a></li>
 
−
                                                  </ul>
 
−
                                              </div>
 
−
                                          </div>
 
−
                                      </nav>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
</body>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
  
  
 +
<!-- Navigation Bar -->
 +
<div class="navbar">
 +
  <ul>
 +
    <!-- 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>
 
</html>
 
</html>

Revision as of 20:29, 13 July 2017