Difference between revisions of "Template:William and Mary/NAV BAR"

 
(146 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html lang='en'>   
 
<html lang='en'>   
−
<head>
+
 
−
<script>
+
−
$(document).ready(function() {
+
−
        // Transition effect for navbar
+
−
        $(window).scroll(function() {
+
−
          // checks if window is scrolled more than 500px, adds/removes solid class
+
−
          if($(this).scrollTop() > 100) {
+
−
              $('.navbar').addClass('solid');
+
−
          } else {
+
−
              $('.navbar').removeClass('solid');
+
−
          }
+
−
        });
+
−
});
+
−
</script>
+
  
 
<style>
 
<style>
−
.navbar {
+
 
−
  height: 80px;
+
.dropdown {
−
  background-color: transparent;
+
   z-index: 9999;
−
  border: none;
+
    
−
  color: white;
+
−
   z-index: 100;
+
−
   transition: background-color 1s ease 0s;
+
 
}
 
}
  
 +
#wnm-top-nav ul {
 +
  margin: 0 0 0 0;
 +
} 
 +
#wnm-top-nav li {
 +
  margin: 0 0 0 0;
 +
}
  
−
.navbar-default {
+
#wnm-top-nav li {
 +
  display: inline-block;
 +
}
 +
#wnm-top-nav li:hover {
 +
  background: #ECECEC;
 +
}
 +
#wnm-top-nav li:hover ul {
 +
  display: block;
 +
}
 +
#wnm-top-nav li ul {
 +
  position: absolute;
 +
  width: 150px;
 +
  display: none;
 +
font-size: 15px;
 +
}
 +
#wnm-top-nav li ul li {  
 +
background: #ECECEC;
 
    
 
    
−
  .navbar-brand {
+
  display: block;  
−
    margin-top: 10px;
+
}
−
    color: white;
+
#wnm-top-nav li ul li a {display:block !important;}  
−
       
+
#wnm-top-nav li ul li:hover {background: #D0D0D0;}
−
      &:hover {
+
−
        color: #C57ED3;
+
−
        border: 1px solid #C57ED3;
+
−
      }
+
−
  }
+
−
 
+
−
  .navbar-nav {
+
−
   
+
−
    > li {
+
−
     
+
−
      > a {
+
−
        color: white;
+
−
        margin: 10px 5px 5px 5px;
+
−
       
+
−
      }
+
−
      > a:hover, > a:active, > a:focus {
+
−
        color: #C57ED3;
+
−
        border: 1px solid #C57ED3;
+
−
      }
+
−
      > a:visited {
+
−
        color: #C57ED3;
+
−
        text-decoration: none;
+
−
      }
+
  
−
     } //end li
+
.nav.navbar-nav.navbar-right li a {
 +
     color: black;
 +
}
 +
.dropdown-content ul li a {
 +
    color: black;
 +
    padding: 10px 13px;
 +
    text-decoration: none;
 +
    display: block;
 +
    font-size: 13px;
 +
}
  
−
    > .active {
+
</style>
  
−
      > a, > a:hover, > a:focus {
 
−
        background-color: transparent;
 
−
        color: #C57ED3;
 
−
      }
 
  
−
     }
+
<div class="dropdown">
 +
  <nav style="background-color: #FFFFFF" class="navbar navbar-default navbar-fixed-top" role="navigation">
 +
     <!-- navbar adjusted to fix full-screen issue on auxillary pages resulting in whitespace at top of screen. -->
 +
    <div class="container">
 +
      <div class="navbar-header"style='float: left;'>
 +
        <button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
 +
          <span class="sr-only">Toggle navigation</span>
 +
          <span class="icon-bar bar1"></span>
 +
          <span class="icon-bar bar2"></span>
 +
          <span class="icon-bar bar3"></span>
 +
        </button>
 +
        <a href='https://2018.igem.org/Team:William_and_Mary' class="navbar-brand">
 +
<div style='padding-top: 3px; padding-left: -10px;'>
 +
          <img src="https://static.igem.org/mediawiki/2018/e/ec/T--William_and_Mary--DecodeLogo1.jpg" height = "30px"/></div>
 +
        </a>
 +
      </div>
 +
   
 +
      <div class="collapse navbar-collapse">
 +
        <ul id = "wnm-top-nav" class="nav navbar-nav navbar-left navbar-uppercase dropdown">
 +
  
−
  } //end .navbar-nav
+
            <li>
 +
              <a href="https://2018.igem.org/Team:William_and_Mary/Description">
 +
                Project
 +
              </a>
  
−
  //Collapsed styles
 
−
  .navbar-toggle {
 
−
    border-color: #C57ED3;
 
  
−
      &:hover, &:focus {
+
<ul class="dropdown-content">
−
        background-color: #490D40;
+
             
−
      }
+
                <li> <center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Description">
 +
                Background
 +
                </a></center></li>
  
 +
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Results">
 +
                Results
 +
                </a></center></li>
  
  
−
      .icon-bar {
+
                </a></center></li>
−
        color: #C57ED3;
+
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Heat">
−
        background-color: #C57ED3;
+
                Temperature Systems
 +
                </a></center></li>
  
−
      }
+
                </a></center></li>
−
  }
+
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Experiments">
 +
                Methods and Data
 +
                </a></center></li>
  
−
  .navbar-collapse.collapse.in ul {
 
−
    background-color: #490D40;
 
−
  }
 
−
   
 
−
} //end .navbar-default
 
  
−
.navbar-normal{
+
</ul>
−
text-color: green;
+
</li>
−
background-color: white;
+
−
text-size: 15 px;
+
−
}
+
−
/* Solid class attached on scroll past first sectiont*/
+
  
−
.navbar.solid {
+
       
−
  background-color: #490D40;
+
          <li>
−
  transition: background-color 1s ease 0s;
+
            <a href="https://2018.igem.org/Team:William_and_Mary/3G">
−
  box-shadow: 0 0 4px grey;
+
              3G Assembly
 +
            </a>
 +
            <ul class="dropdown-content">
 +
             
 +
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/3G">
 +
                Method Overview
 +
                </a></center></li>
  
−
    .navbar-brand {
+
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Collaborations">
−
      color: #C57ED3;
+
                Collaborations
−
      transition: color 1s ease 0s;
+
                </a></center></li>
−
    }
+
  
−
    .navbar-nav {
+
                </a></center></li>
 +
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/3G_Mixed">
 +
                Parallel Circuit Testing
 +
                </a></center></li>
  
−
      > li {
+
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Part_Collection">
 +
                3G Parts
 +
                </a></center></li>
  
−
          > a {
+
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/3GProtocols">
−
            color: #C57ED3;
+
                Protocol
−
            transition: color 1s ease 0s;
+
                </a></center></li>
−
          }
+
  
−
      } //end li
 
  
−
    } //end .navbar-nav
+
               
 +
              </ul>
 +
            </li>
  
−
}
 
  
−
.dropdown {
+
            <li>
−
    position: relative;
+
              <a href="https://2018.igem.org/Team:William_and_Mary/Model">
−
    display: inline-block;
+
                Modeling
 +
              </a>
 +
            </li>
  
−
}
+
          <li>
−
.dropdown-content a {
+
            <a href="https://2018.igem.org/Team:William_and_Mary/Public_Engagement">
−
    color: black;
+
              Human Practices
−
    padding: 10px 13px;
+
            </a>
−
    text-decoration: none;
+
            <ul class="dropdown-content">
−
    display: block;
+
             
−
    font-size: 13px;
+
−
}
+
−
.dropdown-content {
+
−
    display: none;
+
−
    position: absolute;
+
−
    background-color: #f9f9f9;
+
−
    min-width: 160px;
+
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
    padding: 10px 16px;
+
−
    z-index: 1;
+
−
}
+
−
.dropdown-content a:hover {
+
−
background-color: #C0C0C0;
+
−
}
+
  
−
.dropdown:hover .dropdown-content {
+
                <li><center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Public_Engagement">
−
    display: block;
+
                  Overview
−
}
+
                </a></center></li>
−
.nav.navbar-nav.navbar-right li a {
+
                <li><center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Human_Practices/Incorporating_new_communities">
−
    color: #f6f6f7;
+
                  Incorporating New Communities
−
font-family:Helvetica;
+
                </a></center></li>
−
}
+
                <li><center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Human_Practices/A_Statewide_Standard">
 +
                  A Statewide Standard
 +
                </a></center></li>
 +
                <li><center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Human_Practices/Continuing_the_Conversation">
 +
                  Continuing the Conversation
 +
                </a></center></li>
 +
                <li><center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Human_Practices">
 +
                  IHP/Silver
 +
                </a></center></li>
  
−
.nav.navbar-nav.navbar-right li a:hover {
+
               
−
    text-decoration: underline;
+
              </ul>
−
    color: black;
+
            </li>
−
}
+
−
</style>
+
  
−
</head>
 
  
−
<body> 
+
<!--->
−
  <nav class="navbar navbar-default navbar-transparent navbar-fixed-top" role="navigation">
+
 
−
<!--"navbar-burger" will create an invisible navbar like the one in our 2015 page-->
+
<li>
−
<div class="container">
+
            <a href="https://2018.igem.org/Team:William_and_Mary/Database">  
−
<div class="navbar-header">
+
              Database
−
<button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
+
            </a>
−
<span class="sr-only">Toggle navigation</span>
+
            <ul class="dropdown-content">
−
<span class="icon-bar bar1"></span>
+
             
−
<span class="icon-bar bar2"></span>
+
 
−
<span class="icon-bar bar3"></span>
+
                <li><center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Database_Overview">
−
</button>
+
                  Database Overview
−
<a href='https://2018.igem.org/Team:William_and_Mary' class="navbar-brand">
+
                </a></center></li>
−
W&M
+
                <li><center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Database">
−
</a>
+
                  Database
−
</div>
+
                </a></center></li>
−
<div id="navbar" class="collapse navbar-collapse">
+
               
−
<ul class="nav navbar-nav navbar-right navbar-uppercase">
+
               
−
<!--li class="social-links">
+
              </ul>
−
<a href="https://www.facebook.com/WMiGEM16/?fref=ts">  
+
            </li>
−
<i class="fa fa-facebook"></i>
+
 
−
</a>
+
 
−
<a href="https://twitter.com/wmigem">  
+
 
−
<i class="fa fa-twitter"></i>
+
<!---->
−
</a-->
+
 
−
<!--
+
<!-- <li>
−
<a href="#">
+
            <a href="https://2018.igem.org/Team:William_and_Mary/Protocols">  
−
<i class="fa fa-instagram"></i>
+
              Protocols
−
</a>
+
            </a>
−
-->
+
            <ul class="dropdown-content">
−
<!--/li-->
+
             
−
<li>
+
 
−
<a href="https://2018.igem.org/Team:William_and_Mary">  
+
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Protocols">  
−
Home
+
                Protocols
−
</a>
+
                </a></center></li>    
−
</li>
+
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/3GProtocols">  
−
                                 
+
                3G Assembly
−
<li class="dropdown"><a id = "wnm-top-nav" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Project<span class="caret"></span></a>
+
                </a></center></li>
−
                                              <ul style="right: -15px; top: 55px;" class="dropdown-content">
+
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Flow_Protocol">  
−
                                                    <a href="#">Freezing Cells</a>
+
              Sample Preservation
−
                                                    <a href="#">3G Assembly</a>  
+
                </a></center></li>
−
                                              </ul>
+
              </ul>
−
</li>
+
            </li>-->
−
<li>
+
 
−
<a href="#">  
+
         
−
Results
+
            <li>
−
</a>
+
              <a href="#">  
−
</li>
+
                Judging
−
<li>
+
              </a>
−
<a href="#">  
+
            <ul class="dropdown-content">
−
Modeling
+
             
−
</a>
+
              <!--<li style='font-family: "Optima";'>
−
</li>
+
<center>
−
<li>
+
                <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Achievements">  
−
<a href="#">  
+
                  Achievements
−
Human practices
+
                </a></center> </li>-->
−
</a>
+
               
−
</li>
+
                <li style='font-family: "Optima";'> <center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Medal Requirements">  
−
<li>
+
                  Medal Requirements
−
+
                </a></center></li>
−
<a href="#">  
+
 
−
Database
+
                <li> <center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Measurement">  
−
</a>
+
                  Measurement
−
</li>
+
                </a></center></li>
−
                                        <li>
+
               
−
<a href="#">
+
                <li><center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Demonstrate">  
−
Judging
+
                  Demonstrate
−
</a>
+
                </a></center> </li>
−
</li>
+
 
−
<li>
+
 
−
<a href="https://2018.igem.org/Team:William_and_Mary/Team">  
+
                <li> <center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Part_Collection">
−
Team
+
                  Best Part Collection
−
</a>
+
                </a></center></li>
−
</li>
+
 
−
</ul>
+
                <li> <center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Parts">  
−
</div>
+
                  Parts
−
</div>
+
                </a></center></li>
 +
 
 +
                <li> <center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Improve">  
 +
                Improve
 +
                </a></center></li>
 +
 
 +
                <li> <center><a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/InterLab">  
 +
                  Interlab
 +
                </a> </center></li>
 +
 
 +
              </ul>
 +
 
 +
 
 +
            </li>
 +
 
 +
 
 +
 
 +
                <li>
 +
            <a href="https://2018.igem.org/Team:William_and_Mary/Team">  
 +
              Team
 +
            </a>
 +
            <ul class="dropdown-content">
 +
             
 +
 
 +
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Team">  
 +
                  Meet the Team
 +
                </a></center></li>
 +
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Attributions">  
 +
                  Attributions
 +
                </a></center></li>
 +
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Notebook">  
 +
                  Notebook
 +
                </a></center></li>
 +
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Protocols">  
 +
                Protocols
 +
                </a></center></li>
 +
                <li> <center> <a style="color: black" href="https://2018.igem.org/Team:William_and_Mary/Safety">  
 +
                  Safety
 +
                </a></center></li>
 +
 
 +
 
 +
               
 +
              </ul>
 +
            </li>
 +
   
 +
 
 +
                     
 +
          </ul>
 +
        </div>
 +
      </div>
 
     </nav>
 
     </nav>
−
</body>
+
  </div>
−
</html>
+
  </html>

Latest revision as of 02:43, 18 October 2018