Difference between revisions of "Template:BU17 template menubar"

Line 1: Line 1:
−
{{BU17_template_global}}
+
<!--[if lte IE 8]>
−
<html>
+
          <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
−
<head>
+
      <![endif]-->
−
<style>
+
      <!--[if gt IE 8]><!-->
−
.logo { /* WORDMARK CONTAINER */
+
          <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
−
width: 30%;
+
      <!--<![endif]-->
−
float: left;
+
     
−
        padding-left: 5%;
+
      <style>
−
padding-top: 20px;
+
      .custom-wrapper {
−
        background-color: yellow;
+
          background-color: #ffd390;
−
}
+
          margin-bottom: 1em;
−
.logo img {
+
          -webkit-font-smoothing: antialiased;
−
width: 350px;
+
          height: 2.1em;
−
}
+
          overflow: hidden;
−
#mainwrap {
+
          -webkit-transition: height 0.5s;
−
margin: 0 auto;
+
          -moz-transition: height 0.5s;
−
max-width: 1600px;
+
          -ms-transition: height 0.5s;
−
min-width: 320px;
+
          transition: height 0.5s;
−
}
+
      }
−
#menubar { /* MASTER MENU TABLE */
+
     
−
height: 30px;
+
      .custom-wrapper.open {
−
margin-top: 35px;
+
          height: 14em;
−
        float: right;
+
      }
−
        white-space: nowrap;
+
     
−
padding-left: 20%;
+
      .custom-menu-3 {
−
        padding-right: 5%;
+
          text-align: right;
−
        width: 40%
+
      }
−
        background-color: blue;
+
     
−
}
+
      .custom-toggle {
−
.menuitem, .dropbtn { /* MAIN MENU BUTTONS */
+
          width: 34px;
−
display: block;
+
          height: 34px;
−
-webkit-transition:2s;
+
          position: absolute;
−
color: #f8f9f9 !important;
+
          top: 0;
−
font-family: Arial, sans-serif;
+
          right: 0;
−
font-size: 120%;
+
          display: none;
−
text-decoration: none !important;
+
      }
−
        float: right;
+
     
−
}
+
      .custom-toggle .bar {
−
.dropdown, .dropbtn {
+
          background-color: #777;
−
width: 10%;
+
          display: block;
−
}
+
          width: 20px;
−
.dropdown-content { /* DROP DOWN MENU CONTAINERS */
+
          height: 2px;
−
display: none;
+
          border-radius: 100px;
−
min-width: 160px;
+
          position: absolute;
−
position: absolute;
+
          top: 18px;
−
z-index: 1;
+
          right: 7px;
−
}
+
          -webkit-transition: all 0.5s;
−
.dropdown-content .menuitem { /* RAIN DROP ... DROP DOWN */
+
          -moz-transition: all 0.5s;
−
text-decoration: none;
+
          -ms-transition: all 0.5s;
−
padding: 20px 5%;
+
          transition: all 0.5s;
−
}
+
      }
−
.dropdown:hover .dropdown-content {display: block;}
+
     
−
div .menuitem:hover, .dropdown:hover .dropbtn {color: #cc0000 !important; -webkit-transition:0.25s;}
+
      .custom-toggle .bar:first-child {
−
</style>
+
          -webkit-transform: translateY(-6px);
−
</head>
+
          -moz-transform: translateY(-6px);
−
 
+
          -ms-transform: translateY(-6px);
−
<body>
+
          transform: translateY(-6px);
−
<div id="mainwrap">
+
      }
−
<div id="menubar">
+
     
−
<div class="dropdown">
+
      .custom-toggle.x .bar {
−
<a href="https://2017.igem.org/Team:BostonU/Overview" class="dropbtn">Research</a>
+
          -webkit-transform: rotate(45deg);
−
<div class="dropdown-content">
+
          -moz-transform: rotate(45deg);
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Overview">Overview</a>
+
          -ms-transform: rotate(45deg);
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Project Description</a>
+
          transform: rotate(45deg);
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a>
+
      }
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modelling</a>
+
     
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a>
+
      .custom-toggle.x .bar:first-child {
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a>
+
          -webkit-transform: rotate(-45deg);
−
</div>
+
          -moz-transform: rotate(-45deg);
−
</div>
+
          -ms-transform: rotate(-45deg);
−
<div class="dropdown">
+
          transform: rotate(-45deg);
−
<a href="https://2017.igem.org/Team:BostonU/Achievements" class="dropbtn">Achievements</a>
+
      }
−
<div class="dropdown-content">
+
     
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Achievements">Overview</a>
+
      @media (max-width: 47.999em) {
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Demonstrate">Demonstration</a>
+
     
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a>
+
          .custom-menu-3 {
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a>
+
              text-align: left;
−
</div>
+
          }
−
</div>
+
     
−
<div class="dropdown">
+
          .custom-toggle {
−
<a href="https://2017.igem.org/Team:BostonU/BTB" class="dropbtn">Beyond the Bench</a>
+
              display: block;
−
<div class="dropdown-content">
+
          }
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/BTB">Overview</a>
+
     
−
<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>
+
      </style>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Contribution">Contribution</a>
+
      <div class="custom-wrapper pure-g" id="menu">
−
</div>
+
          <div class="pure-u-1 pure-u-md-1-3">
−
</div>
+
              <div class="pure-menu">
−
</div>
+
                  <a href="#" class="pure-menu-heading custom-brand">Brand</a>
−
<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="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
−
</div>
+
              </div>
−
</body>
+
          </div>
 +
          <div class="pure-u-1 pure-u-md-1-3">
 +
              <div class="pure-menu pure-menu-horizontal custom-can-transform">
 +
                  <ul class="pure-menu-list">
 +
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
 +
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
 +
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
 +
                  </ul>
 +
              </div>
 +
          </div>
 +
          <div class="pure-u-1 pure-u-md-1-3">
 +
              <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
 +
                  <ul class="pure-menu-list">
 +
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
 +
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
 +
                  </ul>
 +
              </div>
 +
          </div>
 +
      </div>
 +
      <script>
 +
      (function (window, document) {
 +
      var menu = document.getElementById('menu'),
 +
          WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
 +
     
 +
      function toggleHorizontal() {
 +
          [].forEach.call(
 +
              document.getElementById('menu').querySelectorAll('.custom-can-transform'),
 +
              function(el){
 +
                  el.classList.toggle('pure-menu-horizontal');
 +
              }
 +
          );
 +
      };
 +
     
 +
      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>

Revision as of 16:48, 2 August 2017

         <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
     
     <style>
     .custom-wrapper {
         background-color: #ffd390;
         margin-bottom: 1em;
         -webkit-font-smoothing: antialiased;
         height: 2.1em;
         overflow: hidden;
         -webkit-transition: height 0.5s;
         -moz-transition: height 0.5s;
         -ms-transition: height 0.5s;
         transition: height 0.5s;
     }
     
     .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;
         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;
         }
     
     }
     </style>

     <script>
     (function (window, document) {
     var menu = document.getElementById('menu'),
         WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
     
     function toggleHorizontal() {
         [].forEach.call(
             document.getElementById('menu').querySelectorAll('.custom-can-transform'),
             function(el){
                 el.classList.toggle('pure-menu-horizontal');
             }
         );
     };
     
     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>