Difference between revisions of "Template:BU17 template menubar"

Line 1: Line 1:
 +
{{BU17_template_global}}
 
<html>
 
<html>
−
<head>  
+
<head>
−
      <style>
+
<style>
−
      .custom-wrapper {
+
.logo { /* WORDMARK CONTAINER */
−
          background-color: #ffd390;
+
width: 30%;
−
          margin-bottom: 1em;
+
float: left;
−
          margin-top: -30px;
+
        padding-left: 5%;
−
          -webkit-font-smoothing: antialiased;
+
padding-top: 20px;
−
          height: 60px;
+
−
          overflow: hidden;
+
−
          -webkit-transition: height 0.5s;
+
−
          -moz-transition: height 0.5s;
+
−
          -ms-transition: height 0.5s;
+
−
          transition: height 0.5s;
+
−
          width: 100%;
+
−
      }
+
−
     
+
−
      .custom-wrapper.open {
+
−
          height: 14em;
+
−
      }
+
−
     
+
−
      .custom-menu-3 {
+
−
          text-align: right;
+
−
      }
+
−
     
+
−
      .custom-toggle {
+
−
          width: 34px;
+
−
          height: 34px;
+
−
          position: absolute;
+
−
          top: 0;
+
−
          right: 0;
+
−
          display: none;
+
−
      }
+
−
     
+
−
      .custom-toggle .bar {
+
−
          background-color: #777;
+
−
          display: block;
+
−
          width: 20px;
+
−
          height: 2px;
+
−
          border-radius: 100px;
+
−
          white-space: nowrap;
+
−
          position: absolute;
+
−
          top: 18px;
+
−
          right: 7px;
+
−
          -webkit-transition: all 0.5s;
+
−
          -moz-transition: all 0.5s;
+
−
          -ms-transition: all 0.5s;
+
−
          transition: all 0.5s;
+
−
      }
+
−
     
+
−
      .custom-toggle .bar:first-child {
+
−
          -webkit-transform: translateY(-6px);
+
−
          -moz-transform: translateY(-6px);
+
−
          -ms-transform: translateY(-6px);
+
−
          transform: translateY(-6px);
+
−
      }
+
−
     
+
−
      .custom-toggle.x .bar {
+
−
          -webkit-transform: rotate(45deg);
+
−
          -moz-transform: rotate(45deg);
+
−
          -ms-transform: rotate(45deg);
+
−
          transform: rotate(45deg);
+
−
      }
+
−
     
+
−
      .custom-toggle.x .bar:first-child {
+
−
          -webkit-transform: rotate(-45deg);
+
−
          -moz-transform: rotate(-45deg);
+
−
          -ms-transform: rotate(-45deg);
+
−
          transform: rotate(-45deg);
+
−
      }
+
−
     
+
−
      @media (max-width: 47.999em) {
+
−
     
+
−
          .custom-menu-3 {
+
−
              text-align: left;
+
−
          }
+
−
     
+
−
          .custom-toggle {
+
−
              display: block;
+
−
          }
+
−
     
+
−
      }
+
−
      .logo img {
+
−
      width: 100px;
+
 
}
 
}
−
      </style>
+
.logo img {
 +
width: 350px;
 +
}
 +
#mainwrap {
 +
margin: 0 auto;
 +
max-width: 1600px;
 +
min-width: 320px;
 +
}
 +
#menubar { /* MASTER MENU TABLE */
 +
border: 0;
 +
height: 30px;
 +
margin-top: 35px;
 +
padding-left: 10%;
 +
        padding-right: 5%;
 +
white-space: nowrap;
 +
        float: right;
 +
}
 +
.menuitem, .dropbtn { /* MAIN MENU BUTTONS */
 +
-webkit-transition:2s;
 +
color: #f8f9f9 !important;
 +
font-family: Arial, sans-serif;
 +
font-size: 120%;
 +
text-decoration: none !important;
 +
padding: 20px 5%;
 +
}
 +
.dropdown {
 +
display: block;
 +
width: 20%;
 +
        float: right;
 +
}
 +
.dropdown-content { /* DROP DOWN MENU CONTAINERS */
 +
display: none;
 +
min-width: 160px;
 +
position: absolute;
 +
z-index: 1;
 +
}
 +
.dropdown-content .menuitem { /* RAIN DROP ... DROP DOWN */
 +
display: block;
 +
text-decoration: none;
 +
padding: 20px 5%;
 +
}
 +
.dropdown:hover .dropdown-content {display: block;}
 +
div .menuitem:hover, .dropdown:hover .dropbtn {color: #cc0000 !important; -webkit-transition:0.25s;}
 +
</style>
 
</head>
 
</head>
−
<body>    
+
 
−
<div class="custom-wrapper pure-g" id="menu">
+
<body>
−
          <div class="pure-u-1 pure-u-md-1-3">
+
<div id="mainwrap">
−
              <div class="pure-menu">
+
<a href="https://2017.igem.org/Team:BostonU" class="logo"><img src="https://static.igem.org/mediawiki/2017/d/de/T--BostonU--LandingPageLogo1.svg"></img></a>
−
                  <a href="#" class="logo"><img src="https://static.igem.org/mediawiki/2017/d/de/T--BostonU--LandingPageLogo1.svg"></a>
+
<div id="menubar">
−
                  <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
+
<div class="dropdown">
−
              </div>
+
<a href="https://2017.igem.org/Team:BostonU/Overview" class="dropbtn">Research</a>
−
          </div>
+
<div class="dropdown-content">
−
          <div class="pure-u-1 pure-u-md-1-3">
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Overview">Overview</a>
−
              <div class="pure-menu pure-menu-horizontal custom-can-transform">
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Project Description</a>
−
                  <ul class="pure-menu-list">
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a>
−
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modelling</a>
−
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a>
−
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a>
−
                  </ul>
+
</div>
−
              </div>
+
</div>
−
          </div>
+
<div class="dropdown">
−
          <div class="pure-u-1 pure-u-md-1-3">
+
<a href="https://2017.igem.org/Team:BostonU/Achievements" class="dropbtn">Achievements</a>
−
              <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
+
<div class="dropdown-content">
−
                  <ul class="pure-menu-list">
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Achievements">Overview</a>
−
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Demonstrate">Demonstration</a>
−
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a>
−
                  </ul>
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a>
−
              </div>
+
</div>
−
          </div>
+
</div>
−
      </div>
+
<div class="dropdown">
−
      <script>
+
<a href="https://2017.igem.org/Team:BostonU/BTB" class="dropbtn">Beyond the Bench</a>
−
      (function (window, document) {
+
<div class="dropdown-content">
−
      var menu = document.getElementById('menu'),
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/BTB">Overview</a>
−
          WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP">Human Practices</a>
−
     
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a>
−
      function toggleHorizontal() {
+
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Contribution">Contribution</a>
−
          [].forEach.call(
+
</div>
−
              document.getElementById('menu').querySelectorAll('.custom-can-transform'),
+
</div>
−
              function(el){
+
</div>
−
                  el.classList.toggle('pure-menu-horizontal');
+
</div>
−
              }
+
−
          );
+
−
      };
+
−
     
+
−
      function toggleMenu() {
+
−
          // set timeout so that the panel has a chance to roll up
+
−
          // before the menu switches states
+
−
          if (menu.classList.contains('open')) {
+
−
              setTimeout(toggleHorizontal, 500);
+
−
          }
+
−
          else {
+
−
              toggleHorizontal();
+
−
          }
+
−
          menu.classList.toggle('open');
+
−
          document.getElementById('toggle').classList.toggle('x');
+
−
      };
+
−
     
+
−
      function closeMenu() {
+
−
          if (menu.classList.contains('open')) {
+
−
              toggleMenu();
+
−
          }
+
−
      }
+
−
     
+
−
      document.getElementById('toggle').addEventListener('click', function (e) {
+
−
          toggleMenu();
+
−
          e.preventDefault();
+
−
      });
+
−
     
+
−
      window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
+
−
      })(this, this.document);
+
−
</script>    
+
 
</body>
 
</body>
−
</html>
 

Revision as of 17:33, 2 August 2017