Difference between revisions of "Template:WLC-Milwaukee/header"

Line 1: Line 1:
−
 
+
<html lang="en">
−
<style>
+
<head>
 +
  <meta charset="utf-8">
 +
  <meta http-equiv="x-ua-compatible" content="IE=edge; chrome=1"> <!-- Render Chrome if available or using latest version of Internet Explorer (Recommended). -->
 +
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
  <link href="https://static.igem.org/mediawiki/2018/5/5b/T--WLC-Milwaukee--fonts.css.txt" rel="stylesheet">
 +
  <script src="https://static.igem.org/mediawiki/2018/c/c8/T--WLC-Milwaukee--main.txt"></script>
 +
  <link href="https://static.igem.org/mediawiki/2018/e/e3/T--WLC-Milwaukee--header.css.txt" rel="stylesheet">
 +
  <title>PLACEHOLDER</title>
 +
  <!--HEADER STYLE-->
 +
  <style>
 
#home_logo, #sideMenu, #top_title, .patrollink  {display:none;}
 
#home_logo, #sideMenu, #top_title, .patrollink  {display:none;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
body {background-color:white; }
 
body {background-color:white; }
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
−
</style>
+
  .navbar {
 +
      overflow: hidden;
 +
      background-color: var(--primary-color);
 +
      font-family: 'Arimo';
 +
      font-style: normal;
 +
      font-weight: bold;
 +
      z-index: 2;
 +
 
 +
      position: fixed;
 +
      top: 0;
 +
      width: 100%;
 +
      transition: top 0.3s;
 +
  }
 +
 
 +
.m-facebook
 +
{
 +
 +
}
 +
  a::-moz-focus-inner {
 +
    border: 0;
 +
  }
 +
 
 +
  .shadow
 +
  {
 +
    -webkit-box-shadow: 0px -31px 12px 33px rgba(0,0,0,0.58);
 +
    -moz-box-shadow: 0px -31px 12px 33px rgba(0,0,0,0.58);
 +
    box-shadow: 0px -31px 12px 33px rgba(0,0,0,0.58);
 +
  }
 +
 
 +
  .navbar a {
 +
      float: left;
 +
      font-size: 1em;
 +
      color: white;
 +
      text-align: center;
 +
      padding: 1.5em 2em;
 +
      text-decoration: none;
 +
      display: inline-block;
 +
  }
 +
 
 +
  .navbar a.right{
 +
    float: right;
 +
  }
 +
 
 +
  .dropdown {
 +
      float: left;
 +
      overflow: hidden;
 +
  }
 +
 
 +
  .navbar a:hover, .dropdown:hover {
 +
      background-color: var(--primary-light);
 +
      transition: .23s ease-out all;
 +
  }
 +
 
 +
  .dropdown-content {
 +
      display: none;
 +
      position: fixed;
 +
      top: 4em;
 +
      background-color: var(--primary-color);
 +
      min-width: 160px;
 +
      border-radius:0px 0px 5px 5px;
 +
      -moz-border-radius:0px 0px 5px 5px;
 +
      -webkit-border-radius:0px 0px 5px 5px;
 +
  }
 +
  .dropdown-content::after
 +
  {
 +
      content: '';
 +
      width: 100%;
 +
      height: 100%;
 +
      top: 0;
 +
      left: 0;
 +
      -webkit-box-shadow:0px 13px 18px -8px rgba(0,0,0,0.75);
 +
      -moz-box-shadow: 0px 13px 18px -8px rgba(0,0,0,0.75);
 +
      box-shadow: 0px 13px 18px -8px rgba(0,0,0,0.75);
 +
      z-index: -1;
 +
      position: absolute;
 +
      border-radius:0px 0px 5px 5px;
 +
      -moz-border-radius:0px 0px 5px 5px;
 +
      -webkit-border-radius:0px 0px 5px 5px;
 +
    }
 +
  .dropdown-content a {
 +
      float: none;
 +
      color: white;
 +
      padding: 1em;
 +
      min-width: 15em;
 +
      text-decoration: none;
 +
      display: block;
 +
      text-align: left;
 +
 
 +
      border-radius:5px 5px 5px 5px;
 +
      -moz-border-radius:5px 5px 5px 5px;
 +
      -webkit-border-radius:5px 5px 5px 5px;
 +
  }
 +
 
 +
  .dropdown-content > a:hover{
 +
    background-color: var(--primary-dark);
 +
  }
 +
 
 +
  .dropdown:hover .dropdown-content {
 +
      display: block;   
 +
  }
 +
  .unselectable {
 +
    -moz-user-select: none;
 +
    -webkit-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
  }
 +
  body{
 +
    margin: 0;
 +
  }
 +
  .navigation { display: none; }
 +
 
 +
  /* Use a media query to add a breakpoint at 836px: */
 +
  @media only screen and (max-width:836px) {
 +
    /* For mobile phones: */
 +
    .navbar a, .navbar .dropdown, .dropdown-content{
 +
      width: 100%;
 +
    }
 +
    .dropdown{display:none;}
 +
    .navbar a { max-width: 40px;}
 +
    .navigation { display: block; visibility: visible;}
 +
  }
 +
 
 +
  </style>
 +
  <!--END HEADER STYLE-->
 +
 
 +
<script>
 +
$(function($)
 +
{
 +
    $(".hamburger").click(function()
 +
    {
 +
        $(".navigation").toggleClass("open");
 +
    });
 +
 
 +
    $(".m-dropdown a").click(function(event)
 +
    {
 +
      var target = $(event.target);
 +
      if(!target.siblings().hasClass('show'))
 +
      {
 +
        $(".m-dropdown-content").removeClass('show');
 +
        target.siblings().addClass('show');
 +
      }
 +
      else
 +
      {
 +
        $(".m-dropdown-content").removeClass('show');
 +
      }
 +
     
 +
    });
 +
 
 +
    //Navbar Behavior
 +
    var prevScrollpos = window.pageYOffset;
 +
    window.onscroll = function() {
 +
      var currentScrollPos = window.pageYOffset;
 +
      if (prevScrollpos > currentScrollPos) {
 +
        document.getElementById("navbar").style.top = "0";
 +
        $(".dropdown").removeClass("nomouse");
 +
        if(!$(".dropdown").is(":visible"))
 +
        {
 +
 
 +
          $(".navigation").show();
 +
        }
 +
        else { $(".navigation").css("display", "");}
 +
      } else {
 +
        if($(".navigation").hasClass("open") && !$(".dropdown").is(":visible")){return;}
 +
        document.getElementById("navbar").style.top = "-60px";
 +
        $(".dropdown").addClass("nomouse");
 +
        $(".navigation").hide();
 +
 
 +
        if($(".dropdown").is(":visible"))
 +
        {
 +
          $(".navigation").css("display", "");
 +
        }
 +
 
 +
      }
 +
      prevScrollpos = currentScrollPos;
 +
    }   
 +
});
 +
</script>
 +
 
 +
 
 +
</head>
 +
<body>
 +
<!--Desktop Navbar-->
 +
<div id="navbar" class="navbar unselectable shadow">
 +
    <a href="index">
 +
    <img height="40" title="WLC-Milwaukee iGEM Home" class="header-logo" src="wlcMilwaukeeIgemLogo.png" alt="WLC-Milwaukee">
 +
    </a>
 +
 
 +
    <!--PROJECT DROPDOWN-->
 +
    <div class="dropdown">
 +
      <a href="Description">PROJECT</a>
 +
      <div class="dropdown-content">
 +
<a href="Description">Overview</a>
 +
<a href="Background">Background</a>
 +
<a href="Applied_Design">System Design</a>
 +
<a href="Experiments">Wetlab</a>
 +
<a href="Demonstrate">Results</a>
 +
<a href="Improve">Parts</a>
 +
      </div>
 +
    </div>
 +
 
 +
    <!--DOCUMENTATION DROPDOWN-->
 +
    <div class="dropdown">
 +
      <a href="Judging">DOCUMENTATION</a>
 +
      <div class="dropdown-content">
 +
<a href="Safety">Safety</a>
 +
<a href="Notebook">Timeline</a>
 +
<a href="Judging">Judging</a>
 +
      </div>
 +
    </div>
 +
 
 +
    <!--HUMAN PRACTICES DROPDOWN-->
 +
    <div class="dropdown">
 +
      <a href="HP">HUMAN PRACTICES</a>
 +
      <div class="dropdown-content">
 +
<a href="HP">Overview</a>
 +
<a href="Human_Practices">Investigations and Impact</a>
 +
<a href="Public_Engagement">Outreach</a>
 +
<a href="Collaborations">Collaborations</a>
 +
      </div>
 +
    </div>
 +
 
 +
    <!--TEAM DROPDOWN-->
 +
    <div class="dropdown">
 +
      <a href="Team">TEAM</a>
 +
      <div class="dropdown-content">
 +
<a href="Team">Members</a>
 +
<a href="Attributions">Attributions</a>
 +
      </div>
 +
    </div>
 +
 
 +
 
 +
</div>
 +
<!--Mobile Navbar-->
 +
<nav class="navigation">
 +
    <div class="hamburger">
 +
      <span class="bars"></span>
 +
    </div>
 +
    <div class="menu">
 +
    <div class="menu-header">
 +
    <a href="index">
 +
    <p>
 +
<img height="40" title="WLC-Milwaukee iGEM Home"  src="wlcMilwaukeeIgemLogo.png" alt="WLC-Milwaukee">
 +
WLC-Milwaukee iGEM
 +
</p>
 +
</a>
 +
    </div>
 +
 
 +
    <div class="menu-content">
 +
        <div class="menu-links">
 +
          <!--PROJECT DROPDOWN-->
 +
            <div class="m-dropdown">
 +
              <a href="#">
 +
                <i class="material-icons">insert_chart</i>
 +
                PROJECT
 +
              </a>
 +
              <div class="m-dropdown-content">
 +
<a href="Description">Overview</a>
 +
<a href="Background">Background</a>
 +
<a href="Applied_Design">System Design</a>
 +
<a href="Experiments">Wetlab</a>
 +
<a href="Demonstrate">Results</a>
 +
<a href="Improve">Parts</a>
 +
                  </div>
 +
                </div>
 +
 
 +
            <!--DOCUMENTATION DROPDOWN-->
 +
                <div class="m-dropdown">
 +
                  <a href="#">
 +
                    <i class="material-icons">developer_board</i>
 +
                    DOCUMENTATION
 +
                  </a>
 +
                  <div class="m-dropdown-content">
 +
<a href="">Overview</a>
 +
<a href="Safety">Safety</a>
 +
<a href="Notebook">Timeline</a>
 +
<a href="Judging">Judging</a>
 +
                  </div>
 +
                </div>
 +
            <!--HUMAN PRACTICES DROPDOWN-->
 +
                <div class="m-dropdown">
 +
                  <a href="#">
 +
                    <i class="material-icons">nature_people</i>
 +
                    HUMAN PRACTICES
 +
                  </a>
 +
                  <div class="m-dropdown-content">
 +
<a href="HP">Overview</a>
 +
<a href="Human_Practices">Investigations and Impact</a>
 +
<a href="Public_Engagement">Outreach</a>
 +
<a href="Collaborations">Collaborations</a>
 +
                  </div>
 +
                </div>
 +
 
 +
            <!--TEAM DROPDOWN-->
 +
                <div class="m-dropdown">
 +
                  <a href="#">
 +
                    <i class="material-icons">people</i>
 +
                    TEAM
 +
                  </a>
 +
                  <div class="m-dropdown-content">
 +
<a href="Team">Members</a>
 +
<a href="Attributions">Attributions</a>
 +
                  </div>
 +
                </div>
 +
 
 +
                </div>
 +
              <div class="menu-footer">
 +
              <a href="https://www.facebook.com/WLCiGEM">
 +
                <img class="m-facebook" alt="Facebook" src="facebook.png" width="30"/>
 +
              </a>
 +
              </div>  
 +
          </div>
 +
 
 +
        </div>
 +
</nav>
 +
</body>
 +
</html>

Revision as of 05:30, 13 October 2018

PLACEHOLDER