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>
−
    body {
+
.logo{
−
      font-family: Arial;
+
    float:left;
−
      color: white;
+
    margin-left:9%;
−
      text-decoration: none;
+
    margin-top: 0%;
−
    }
+
}
 +
.navbar-header{
 +
    margin-top:-20px;
  
−
    .drop-project:hover {
+
}
−
      background-color: gold;
+
.navbar-default{
−
    }
+
  /** box-shadow: 0px 8px 6px -6px #999;**/
  
−
     .drop-parts:hover {
+
}
−
      background-color: cyan;
+
.navbar-default .navbar-nav>li>a {
−
    }
+
     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;
 +
}
  
−
    .drop-hp:hover {
+
.removeNavBarColor{
−
      background-color: crimson;
+
    background-color: transparent;
−
    }
+
  
−
    .drop-note:hover {
+
}
−
      background-color: lightgreen;
+
.makeNavBarColor{
−
     }
+
  /** background-color: #CC141C ;*/
 +
     background-color: #6d6875 ;
  
−
    .nav-safety:hover {
 
−
      background-color: crimson;
 
−
    }
 
  
−
    .nav-team:hover {
+
}
−
      background-color: cyan;
+
−
    }
+
  
−
    .nav-igem:hover {
+
.navbar-default .navbar-nav>li>a{
−
      background-color: gold;
+
    padding-top: 30px;
−
     }
+
    margin-top: 0;
 +
    margin-bottom: 0%;
 +
    padding-bottom: 15px;
 +
    color:black;
 +
}
 +
.navbar-collapse.collapse{
 +
     padding-top: 0;
 +
    padding-bottom: 0;
 +
}
  
−
    ul {
+
.menuIcon{
−
      margin: 0px;
+
−
      padding: 0px;
+
−
      list-style-type: none;
+
−
    }
+
  
−
    ul li {
+
}
−
      float: left;
+
.active{
−
      width: 194px;
+
    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 {
  
−
    ul li a {
+
        font-size: 20px;
−
      text-decoration: none;
+
−
      color: white;
+
−
      display: block;
+
−
    }
+
  
−
    ul li a:hover {
+
}
−
      background-color: orange;
+
.menuIcon2:after {
−
      text-decoration: none;
+
−
    }
+
  
 +
        font-size: 40px;
  
 +
}
  
−
    ul li ul li {
+
.dropdown:hover .dropdown-menu {
−
      display: none;
+
display: block;
−
    }
+
text-decoration: none;
  
−
    ul li:hover ul li {
+
}
−
      display: block;
+
−
    }
+
  
−
    </style>
+
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
 +
    color:red;
 +
}
  
−
  </head>
+
.button{
 +
    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:16, 13 July 2017