Difference between revisions of "Template:Team:William and Mary/HEADER3"

Line 1: Line 1:
−
<!----adapted from "https://2016.igem.org/Team:British_Columbia"---->
+
<!------Adapted from "https://red-team-design.com/css3-animated-dropdown-menu/"------->
−
 
+
−
<html lang="en">
+
−
<head>
+
−
  <title>Navbar CSS</title>
+
−
  <meta charset="utf-8">
+
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
−
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
  
 +
<html>
 +
    <script src="https://2017.igem.org/Team:William_and_Mary/jquery1-20?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
<style>
 
<style>
−
span.glyphicon-grain{
+
.dropdown {
−
     font-size: 2em;
+
     position: relative;
 +
    display: inline-block;
 +
  z-index:9999;
 
}
 
}
  
−
/************************************ Green Nav *****************************************************************************/
+
.dropdown-content {
−
.navbar-green {
+
    display: none;
−
  background-color: #0f9347;
+
    position: absolute;
−
  border-color: #0f9347;
+
    background-color: #f9f9f9;
−
  top: 14px;
+
    min-width: 160px;
−
  font-weight: bold; display: none;
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
}
+
    padding: 12px 16px;
−
.navbar-green .navbar-brand {
+
    z-index: 9999;
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-brand:hover,
+
−
.navbar-green .navbar-brand:focus {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-text {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-nav > li > a {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-nav > li > a:hover,
+
−
.navbar-green .navbar-nav > li > a:focus {
+
−
  color: #ffffff;
+
−
  background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-nav > .active > a,
+
−
.navbar-green .navbar-nav > .active > a:hover,
+
−
.navbar-green .navbar-nav > .active > a:focus {
+
−
  color: #ffffff;
+
−
  background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-nav > .open > a,
+
−
.navbar-green .navbar-nav > .open > a:hover,
+
−
.navbar-green .navbar-nav > .open > a:focus {
+
−
  color: #ffffff;
+
−
  background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-toggle {
+
−
  border-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-toggle:hover,
+
−
.navbar-green .navbar-toggle:focus {
+
−
  background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-toggle .icon-bar {
+
−
  background-color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-collapse,
+
−
.navbar-green .navbar-form {
+
−
  border-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-link {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-link:hover {
+
−
  color: #ffffff;
+
 
}
 
}
  
−
@media (max-width: 767px) {
+
.dropdown:hover .dropdown-content {
−
  .navbar-green .navbar-nav .open .dropdown-menu > li > a {
+
     display: block;
−
    color: #ffffff;
+
−
  }
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > li > a:hover,
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
+
−
     color: #ffffff;
+
−
    background-color: #8cc63f;
+
−
  }
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > .active > a,
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > .active > a:hover,
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > .active > a:focus {
+
−
    color: #ffffff;
+
−
    background-color: #0f9347;
+
−
  }
+
 
}
 
}
−
 
−
 
−
 
−
/************************************ Transparent Nav ***********************************************************************/
 
−
.navbar-clear {
 
−
  background-color: transparent;
 
−
  border-color: transparent;
 
−
  top: 14px;
 
−
  font-weight: bold;
 
−
}
 
−
.navbar-clear .navbar-brand {
 
−
  color: #ffffff;
 
−
}
 
−
.navbar-clear .navbar-brand:hover,
 
−
.navbar-clear .navbar-brand:focus {
 
−
  color: #ffffff;
 
−
}
 
−
.navbar-clear .navbar-text {
 
−
  color: #ffffff;
 
−
}
 
−
.navbar-clear .navbar-nav > li > a {
 
−
  color: #ffffff;
 
−
}
 
−
.navbar-clear .navbar-nav > li > a:hover,
 
−
.navbar-clear .navbar-nav > li > a:focus {
 
−
  color: #ffffff;
 
−
  background-color: transparent;
 
−
}
 
−
.navbar-clear .navbar-nav > .active > a,
 
−
.navbar-clear .navbar-nav > .active > a:hover,
 
−
.navbar-clear .navbar-nav > .active > a:focus {
 
−
  color: #ffffff;
 
−
  background-color: transparent;
 
−
}
 
−
.navbar-clear .navbar-nav > .open > a,
 
−
.navbar-clear .navbar-nav > .open > a:hover,
 
−
.navbar-clear .navbar-nav > .open > a:focus {
 
−
  color: #ffffff;
 
−
  background-color: transparent;
 
−
}
 
−
.navbar-clear .navbar-toggle {
 
−
  border-color: transparent;
 
−
}
 
−
.navbar-clear .navbar-toggle:hover,
 
−
.navbar-clear .navbar-toggle:focus {
 
−
  background-color: transparent;
 
−
}
 
−
.navbar-clear .navbar-toggle .icon-bar {
 
−
  background-color: #ffffff;
 
−
}
 
−
.navbar-clear .navbar-collapse,
 
−
.navbar-clear .navbar-form {
 
−
  border-color: #ffffff;
 
−
}
 
−
.navbar-clear .navbar-link {
 
−
  color: #ffffff;
 
−
}
 
−
.navbar-clear .navbar-link:hover {
 
−
  color: #ffffff;
 
−
}
 
−
 
−
@media (max-width: 767px) {
 
−
  .navbar-clear .navbar-nav .open .dropdown-menu > li > a {
 
−
    color: #ffffff;
 
−
  }
 
−
  .navbar-clear .navbar-nav .open .dropdown-menu > li > a:hover,
 
−
  .navbar-clear .navbar-nav .open .dropdown-menu > li > a:focus {
 
−
    color: #ffffff;
 
−
  }
 
−
  .navbar-clear .navbar-nav .open .dropdown-menu > .active > a,
 
−
  .navbar-clear .navbar-nav .open .dropdown-menu > .active > a:hover,
 
−
  .navbar-clear .navbar-nav .open .dropdown-menu > .active > a:focus {
 
−
    color: #ffffff;
 
−
    background-color: transparent;
 
−
  }
 
−
}
 
−
 
−
 
−
 
−
/*submenu styling for the navbars*/
 
−
.dropdown-submenu {
 
−
    position:relative;
 
−
}
 
−
.dropdown-submenu>.dropdown-menu {
 
−
    top:0;
 
−
    left:100%;
 
−
    margin-left:-1px;
 
−
    width: 100%;
 
−
 
−
-webkit-border-radius: 0px;
 
−
-moz-border-radius: 0px;
 
−
-o-border-radius: 0px;
 
−
border-radius: 0px;
 
−
}
 
−
 
−
 
−
.dropdown-submenu>a:after {
 
−
    display:block;
 
−
    content:" ";
 
−
    float:right;
 
−
    width:0;
 
−
    height:0;
 
−
    border-color:transparent;
 
−
    border-style:solid;
 
−
    border-width:5px 0 5px 5px;
 
−
    border-left-color:#cccccc;
 
−
    margin-top:5px;
 
−
    margin-right:-10px;
 
−
}
 
−
 
−
.dropdown-submenu.pull-left {
 
−
    float:none !important;
 
−
}
 
−
.dropdown-submenu.pull-left>.dropdown-menu {
 
−
    top: 0;
 
−
    left:-100%;
 
−
    margin-left:-1px;
 
−
    width: 100%;
 
−
}
 
−
@media (max-width: 767px) {
 
−
.dropdown-submenu>.dropdown-menu {margin-left: 15px;}
 
−
.dropdown-submenu.pull-left>.dropdown-menu {margin-left: 15px;}
 
−
 
−
.navbar-green .open>a{
 
−
  background-color: #8cc63f;
 
−
}
 
−
 
−
}
 
−
 
−
 
 
</style>
 
</style>
  
−
<script>
+
<div class="dropdown">
−
//script to swap the clear navbar with the green nav
+
  <span>Mouse over me</span>
−
$(document).ready(function(){
+
  <div class="dropdown-content">
−
var width = $(window).width();
+
    <p>Hello World!</p>
−
if(width < 768){
+
   </div>
−
   $(".navbar-clear").hide();
+
</div>
−
   $(".navbar-green").show();
+
<div class="dropdown">
−
}
+
   <span>Mouse over me</span>
 +
  <div class="dropdown-content">
 +
    <p>Hello World!</p>
 +
  </div>
 +
</div>
  
−
//dropdown menu items open onclick instead of hover (mobile-friendly)
 
−
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
 
−
event.preventDefault();
 
−
event.stopPropagation();
 
−
$(this).parent().siblings().removeClass('open');
 
−
$(this).parent().toggleClass('open');
 
−
});
 
−
 
−
});
 
−
 
−
$(window).on("scroll", function() {swapNavs()});
 
−
 
−
function swapNavs(){
 
−
var width = $(window).width();
 
−
    if($(window).scrollTop() > 100) {
 
−
        $(".navbar-clear").fadeOut();
 
−
        $(".navbar-green").fadeIn();
 
−
    } else if(width >= 768){
 
−
        $(".navbar-clear").fadeIn();
 
−
        $(".navbar-green").fadeOut();
 
−
    }
 
−
}
 
−
 
−
$(window).on("resize", function(){checkSize()});
 
−
 
−
function checkSize(){
 
−
var width = $(window).width();
 
−
    if(width < 768){
 
−
        $(".navbar-clear").fadeOut();
 
−
        $(".navbar-green").fadeIn();
 
−
    } else if(width >= 768){
 
−
        if($(window).scrollTop() >= 100){
 
−
            $(".navbar-clear").fadeOut();
 
−
            $(".navbar-green").fadeIn();
 
−
        }else if($(window).scrollTop() < 100) {
 
−
            $(".navbar-clear").fadeIn();
 
−
            $(".navbar-green").fadeOut();
 
−
        }
 
−
    }
 
−
}
 
−
</script>
 
−
 
−
</head>
 
−
 
−
<header>
 
−
  <nav class="navbar navbar-green navbar-fixed-top">
 
−
    <div class="container-fluid">
 
−
      <div class="navbar-header">
 
−
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
−
        <span class="icon-bar"></span>
 
−
        <span class="icon-bar"></span>
 
−
        <span class="icon-bar"></span>
 
−
      </button>
 
−
        <a class="navbar-brand page-scroll" href="https://2016.igem.org/Team:British_Columbia"><span class="glyphicon glyphicon-grain"></span></a>
 
−
      </div>
 
−
      <div class="collapse navbar-collapse">
 
−
        <ul class="nav navbar-nav navbar-right">
 
−
          <li class="dropdown">
 
−
            <a href="#"class="dropdown-toggle" data-toggle="dropdown">Project
 
−
        <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Description">Description</a></li>
 
−
              <li class="dropdown-submenu">
 
−
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">S-Layer</a>
 
−
                <ul class="dropdown-menu">
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Cellulases">Cellulases</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Laccases">Laccases</a></li>
 
−
                </ul>
 
−
              </li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Bio-Pathways">Biosynthetic Pathways</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Consortia">Consortia</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Proof">Proof</a></li>
 
−
            </ul>
 
−
          </li>
 
−
          <li><a href="https://2016.igem.org/Team:British_Columbia/Model">Modelling</a></li>
 
−
          <li class="dropdown">
 
−
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practices
 
−
        <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2016.igem.org/Team:British Columbia/HP/Gold">Introduction</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Infographic">Infographic</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Interview">Interview</a></li>
 
−
            </ul>
 
−
          </li>         
 
−
            <li class="dropdown">
 
−
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team
 
−
        <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Bios">Bios</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Attributions">Attributions</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Sponsors">Sponsors</a></li>
 
−
            </ul>
 
−
          </li>
 
−
          <li><a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></li>
 
−
          <li class="dropdown">
 
−
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievements
 
−
        <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Collaborations">Collaborations</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Medal_Criteria">Medal Criteria</a></li>
 
−
              <li class="dropdown-submenu pull-left">
 
−
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts</a>
 
−
                <ul class="dropdown-menu">
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Parts">Parts</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Basic_Part">Basic Part</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Composite_Part">Composite Part</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Part_Collection">Parts Collection</a></li>
 
−
                </ul>
 
−
              </li>
 
−
            </ul>
 
−
          </li>
 
−
        </ul>
 
−
      </div>
 
−
      <!--collapse navbar-collapse -->
 
−
    </div>
 
−
    <!-- container-fluid -->
 
−
  </nav>
 
−
 
−
  <nav class="navbar navbar-clear navbar-fixed-top">
 
−
    <div class="container-fluid">
 
−
      <div class="navbar-header">
 
−
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
−
        <span class="icon-bar"></span>
 
−
        <span class="icon-bar"></span>
 
−
        <span class="icon-bar"></span>
 
−
      </button>
 
−
        <a class="navbar-brand page-scroll" href="https://2016.igem.org/Team:British_Columbia"><span class="glyphicon glyphicon-grain"></span></a>
 
−
      </div>
 
−
      <div class="collapse navbar-collapse">
 
−
        <ul class="nav navbar-nav navbar-right">
 
−
          <li class="dropdown">
 
−
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project
 
−
        <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Description">Description</a></li>
 
−
              <li class="dropdown-submenu">
 
−
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">S-Layer</a>
 
−
                <ul class="dropdown-menu">
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Cellulases">Cellulases</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Laccases">Laccases</a></li>
 
−
                </ul>
 
−
              </li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Bio-Pathways">Biosynthetic Pathways</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Consortia">Consortia</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Proof">Proof</a></li>
 
−
            </ul>
 
−
          </li>
 
−
          <li><a href="https://2016.igem.org/Team:British_Columbia/Model">Modelling</a></li>
 
−
        <li class="dropdown">
 
−
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practices
 
−
        <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2016.igem.org/Team:British Columbia/HP/Gold">Introduction</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Infographic">Infographic</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Interview">Interview</a></li>
 
−
            </ul>
 
−
          </li>
 
−
          <li class="dropdown">
 
−
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team
 
−
        <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Bios">Bios</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Attributions">Attributions</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Sponsors">Sponsors</a></li>
 
−
            </ul>
 
−
          </li>
 
−
          <li><a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></li>
 
−
          <li class="dropdown">
 
−
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievements
 
−
        <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Collaborations">Collaborations</a></li>
 
−
              <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Medal_Criteria">Medal Criteria</a></li>
 
−
              <li class="dropdown-submenu pull-left">
 
−
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts</a>
 
−
                <ul class="dropdown-menu">
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Parts">Parts</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Basic_Part">Basic Part</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Composite_Part">Composite Part</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Part_Collection">Parts Collection</a></li>
 
−
                </ul>
 
−
              </li>
 
−
            </ul>
 
−
          </li>
 
−
        </ul>
 
−
      </div>
 
−
      <!--collapse navbar-collapse -->
 
−
    </div>
 
−
    <!-- container-fluid -->
 
−
  </nav>
 
−
</header>
 
−
    </nav>
 
−
</div>
 
−
</body>
 
 
</html>
 
</html>

Revision as of 17:36, 2 August 2017


Mouse over me

Hello World!

Mouse over me

Hello World!