Difference between revisions of "Template:BU17 template menubar"

 
(167 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<!--[if lte IE 8]>
+
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
−
          <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
+
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet">
−
      <![endif]-->
+
<style>
−
      <!--[if gt IE 8]><!-->
+
<style>
−
          <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
+
#top_menu_inside ul li > a { /* RECOLORS IGEM MENU */
−
      <!--<![endif]-->
+
color: #a9a9a9 !important;
−
     
+
}
−
      <style>
+
.menu-type {
−
      .custom-wrapper {
+
font-family: 'Roboto Condensed', sans-serif !important;
−
          background-color: #ffd390;
+
letter-spacing: 5pt !important;
−
          margin-bottom: 1em;
+
font-size: 12pt;
−
          -webkit-font-smoothing: antialiased;
+
text-align: center;
−
          height: 2.1em;
+
text-decoration: none !important;
−
          overflow: hidden;
+
text-transform: uppercase;
−
          -webkit-transition: height 0.5s;
+
font-weight: 700;
−
          -moz-transition: height 0.5s;
+
-webkit-font-smoothing: antialiased;
−
          -ms-transition: height 0.5s;
+
font-smoothing: antialiased;
−
          transition: height 0.5s;
+
}
−
      }
+
.wordmark img {
−
     
+
vertical-align: sub;
−
      .custom-wrapper.open {
+
width: 200px;
−
          height: 14em;
+
margin-left: 5%;
−
      }
+
margin-right: 50px;
−
     
+
}
−
      .custom-menu-3 {
+
#menuwrap {
−
          text-align: right;
+
margin: 0 auto;
−
      }
+
max-width: 960px;
−
     
+
height: 100px;
−
      .custom-toggle {
+
}
−
          width: 34px;
+
.dropbtn {
−
          height: 34px;
+
text-decoration: none !important;
−
          position: absolute;
+
}
−
          top: 0;
+
#menubartable {
−
          right: 0;
+
border: 0;
−
          display: none;
+
background: #F8F9F9;
−
      }
+
list-style-type: none;
−
     
+
white-space: nowrap;
−
      .custom-toggle .bar {
+
z-index: 10;
−
          background-color: #777;
+
position: fixed;
−
          display: block;
+
width: 100%;
−
          width: 20px;
+
padding-top: 100px;
−
          height: 2px;
+
margin-top: -80px;
−
          border-radius: 100px;
+
padding-left: 3000px;
−
          position: absolute;
+
margin-left: -3000px;
−
          top: 18px;
+
padding-right: 3000px;
−
          right: 7px;
+
margin-right: -3000px;
−
          -webkit-transition: all 0.5s;
+
}
−
          -moz-transition: all 0.5s;
+
#menubartable li {
−
          -ms-transition: all 0.5s;
+
display: table-cell;
−
          transition: all 0.5s;
+
}
−
      }
+
li .menuitem, .dropbtn {
−
     
+
color: #a9a9a9 !important;
−
      .custom-toggle .bar:first-child {
+
background: #F8F9F9;
−
          -webkit-transform: translateY(-6px);
+
display: table-cell;
−
          -moz-transform: translateY(-6px);
+
vertical-align: middle;
−
          -ms-transform: translateY(-6px);
+
padding: 20px 15px;
−
          transform: translateY(-6px);
+
}
−
      }
+
.dropdown-content {
−
     
+
display: none;
−
      .custom-toggle.x .bar {
+
position: absolute;
−
          -webkit-transform: rotate(45deg);
+
z-index: 10;
−
          -moz-transform: rotate(45deg);
+
}
−
          -ms-transform: rotate(45deg);
+
.dropdown-content .menuitem {
−
          transform: rotate(45deg);
+
display: block;
−
      }
+
text-align: left;
−
     
+
text-decoration: none;
−
      .custom-toggle.x .bar:first-child {
+
}
−
          -webkit-transform: rotate(-45deg);
+
.menu-column:hover .dropdown-content {
−
          -moz-transform: rotate(-45deg);
+
display: block;
−
          -ms-transform: rotate(-45deg);
+
}
−
          transform: rotate(-45deg);
+
li .menuitem:hover, li .dropbtn:hover {
−
      }
+
background: #f4f4f4;
−
     
+
}
−
      @media (max-width: 47.999em) {
+
#masterfooter {
−
     
+
position: absolute;
−
          .custom-menu-3 {
+
border: 0;
−
              text-align: left;
+
background: #f8f9f9;
−
          }
+
list-style-type: none;
−
     
+
white-space: nowrap;
−
          .custom-toggle {
+
z-index: 10;
−
              display: block;
+
width: 100%;
−
          }
+
bottom: 0;
−
     
+
padding-left: 3000px;
−
      }
+
margin-left: -3000px;
−
      </style>
+
padding-right: 3000px;
 +
margin-right: -3000px;
 +
}
 +
</style>
 
</head>
 
</head>
−
<body>    
+
<body>
−
<div class="custom-wrapper pure-g" id="menu">
+
<div id="menuwrap">
−
          <div class="pure-u-1 pure-u-md-1-3">
+
  <ul id="menubartable" class="menu-type">
−
              <div class="pure-menu">
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU" class="wordmark"><img src="https://static.igem.org/mediawiki/2017/f/f2/T--BostonU--RedGrey.svg"></img></a> </li>
−
                  <a href="#" class="pure-menu-heading custom-brand">Brand</a>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Team" class="dropbtn">People</a>
−
                  <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Team">Team</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Attributions">Attributions</a></div>
−
              </div>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Description" class="dropbtn">Research</a>
−
          </div>
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Overview</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Experiments">Experiments</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modeling</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Protocols">Protocols</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a> </div>
−
          <div class="pure-u-1 pure-u-md-1-3">
+
    </li>
−
              <div class="pure-menu pure-menu-horizontal custom-can-transform">
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Engagement" class="dropbtn">Beyond the Bench</a>
−
                  <ul class="pure-menu-list">
+
      <div class="dropdown-content"><a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Silver">Human Practices</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Gold_Integrated">Integrated Human Practices</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Engagement">Public Engagement</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/InterLab">InterLab Contribution</a> </div>
−
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+
    </li>
−
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/JudgingCriteria" class="dropbtn">Achievements</a>
−
                      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Overview</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a> </div>
−
                  </ul>
+
    </li>
−
              </div>
+
  </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>    
+
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 21:57, 1 November 2017