Difference between revisions of "Template:Tongji China/Header"

Line 54: Line 54:
 
     <script>
 
     <script>
  
      $(document).ready(function () {
+
    // Try to remove weird iGEM side menu
 +
    var menuToRemove = document.getElementById('sideMenu');
 +
    function hideMenuToRemove(){
 +
        menuToRemove.style.display = "none";
 +
    }
  
        var glob = window;
+
    </script>
 +
    </head>
 +
    <div class="main view">
  
        // remove some weird components
+
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        (function () {
+
          $("#sideMenu").remove();
+
  
          $("#top_menu_14").css({
+
         <div class="android-header mdl-layout__header mdl-layout__header--waterfall">
            top: "-20px",
+
          <div class="mdl-layout__header-row">
            "padding-bottom": "1rem",
+
            <span class="android-title mdl-layout-title">
            transition: "top 0.3s"
+
              <div class="logo-font">TongJi iGEM</div>
          });
+
              <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
 
+
            </span>
         //  var menu_trig = $("<div></div>");
+
            <!-- Add spacer, to align navigation to the right in desktop -->
        //  menu_trig.css({
+
            <div class="android-header-spacer mdl-layout-spacer"></div>
        //    position: "fixed",
+
            <!-- <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
        //    "z-index": "10",
+
              <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
        //    height: "15px",
+
                <i class="material-icons">search</i>
        //    width: "100%",
+
              </label>
        //    top: "0",
+
              <div class="mdl-textfield__expandable-holder">
        //    left: "0"
+
                <input class="mdl-textfield__input" type="text" id="search-field">
        //  }).mouseenter(function () {
+
              </div>
        //    $("#top_menu_14").css("top", "0");
+
            </div> -->
        //  }).mouseleave(function () {
+
            <!-- Navigation -->
        //    $("#top_menu_14").css("top", "-20px");
+
            <div class="android-navigation-container">
        //  });
+
              <nav class="android-navigation mdl-navigation">
        //
+
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_index.html">Home</a>
        //  $("body").append(menu_trig);
+
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_description.html">Project</a>
        // })(); // hide the top bar
+
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_team.html">Team</a>
 
+
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_results.html">Results</a>
      });
+
                <!-- <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Auto</a>
  </script>
+
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">One</a>
  </head>
+
                <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a> -->
  <div class="main view">
+
              </nav>
 
+
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
 
+
      <div class="android-header mdl-layout__header mdl-layout__header--waterfall">
+
        <div class="mdl-layout__header-row">
+
          <span class="android-title mdl-layout-title">
+
            <div class="logo-font">TongJi iGEM</div>
+
            <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
+
          </span>
+
          <!-- Add spacer, to align navigation to the right in desktop -->
+
          <div class="android-header-spacer mdl-layout-spacer"></div>
+
          <!-- <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
+
            <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
+
              <i class="material-icons">search</i>
+
            </label>
+
            <div class="mdl-textfield__expandable-holder">
+
              <input class="mdl-textfield__input" type="text" id="search-field">
+
 
             </div>
 
             </div>
          </div> -->
+
            <span class="android-mobile-title mdl-layout-title">
          <!-- Navigation -->
+
              <div class="logo-font">TongJi iGEM</div>
          <div class="android-navigation-container">
+
               <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
            <nav class="android-navigation mdl-navigation">
+
            </span>
               <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_index.html">Home</a>
+
            <!-- <button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_description.html">Project</a>
+
              <i class="material-icons">more_vert</i>
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_team.html">Team</a>
+
            </button>
               <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_results.html">Results</a>
+
            <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
               <!-- <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Auto</a>
+
               <li disabled class="mdl-menu__item">Design</li>
               <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">One</a>
+
               <li disabled class="mdl-menu__item">Experiments</li>
               <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a> -->
+
               <li disabled class="mdl-menu__item">Notebook</li>
             </nav>
+
               <li disabled class="mdl-menu__item">Parts</li>
 +
             </ul> -->
 
           </div>
 
           </div>
          <span class="android-mobile-title mdl-layout-title">
 
            <div class="logo-font">TongJi iGEM</div>
 
            <!-- <img class="android-logo-image" src="2017tongji_images/android-logo.png"> -->
 
          </span>
 
          <!-- <button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
 
            <i class="material-icons">more_vert</i>
 
          </button>
 
          <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
 
            <li disabled class="mdl-menu__item">Design</li>
 
            <li disabled class="mdl-menu__item">Experiments</li>
 
            <li disabled class="mdl-menu__item">Notebook</li>
 
            <li disabled class="mdl-menu__item">Parts</li>
 
          </ul> -->
 
 
         </div>
 
         </div>
      </div>
 
  
      <div class="android-drawer mdl-layout__drawer">
+
        <div class="android-drawer mdl-layout__drawer">
        <!-- <span class="mdl-layout-title" style="color:#ffffff; background: #EFEFEF;">
+
          <!-- <span class="mdl-layout-title" style="color:#ffffff; background: #EFEFEF;">
          <img class="android-logo-image" style="height: 96px; left: 50px;" src="2017tongji_images/2017tongji_logo1.png">
+
            <img class="android-logo-image" style="height: 96px; left: 50px;" src="2017tongji_images/2017tongji_logo1.png">
        </span> -->
+
          </span> -->
        <nav class="mdl-navigation">
+
          <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="2017tongji_page_index.html">Home</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_index.html">Home</a>
          <a class="mdl-navigation__link" href="2017tongji_page_description.html">Project</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_description.html">Project</a>
          <a class="mdl-navigation__link" href="2017tongji_page_team.html">Team</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_team.html">Team</a>
          <a class="mdl-navigation__link" href="2017tongji_page_results.html">Results</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_results.html">Results</a>
          <!-- <a class="mdl-navigation__link" href="">Auto</a>
+
            <!-- <a class="mdl-navigation__link" href="">Auto</a>
          <a class="mdl-navigation__link" href="">One</a>
+
            <a class="mdl-navigation__link" href="">One</a>
          <a class="mdl-navigation__link" href="">Play</a> -->
+
            <a class="mdl-navigation__link" href="">Play</a> -->
          <div class="android-drawer-separator"></div>
+
            <div class="android-drawer-separator"></div>
          <span class="mdl-navigation__link" href="">Methods</span>
+
            <span class="mdl-navigation__link" href="">Methods</span>
          <a class="mdl-navigation__link" href="2017tongji_page_notebook.html">Notebook</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_notebook.html">Notebook</a>
          <a class="mdl-navigation__link" href="2017tongji_page_design.html">Design</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_design.html">Design</a>
          <a class="mdl-navigation__link" href="2017tongji_page_experiments.html">Experiments</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_experiments.html">Experiments</a>
          <!-- <a class="mdl-navigation__link" href="">Unavailable info</a> -->
+
            <!-- <a class="mdl-navigation__link" href="">Unavailable info</a> -->
          <a class="mdl-navigation__link" href="2017tongji_page_model.html">Model</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_model.html">Model</a>
          <a class="mdl-navigation__link" href="2017tongji_page_demonstrate.html">Demonstrate</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_demonstrate.html">Demonstrate</a>
          <a class="mdl-navigation__link" href="2017tongji_page_improve.html">Improve</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_improve.html">Improve</a>
          <div class="android-drawer-separator"></div>
+
            <div class="android-drawer-separator"></div>
          <span class="mdl-navigation__link" href="">Resources</span>
+
            <span class="mdl-navigation__link" href="">Resources</span>
          <a class="mdl-navigation__link" href="2017tongji_page_parts.html">Parts</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_parts.html">Parts</a>
          <a class="mdl-navigation__link" href="2017tongji_page_human_practices.html">Human Practices</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_human_practices.html">Human Practices</a>
          <a class="mdl-navigation__link" href="2017tongji_page_safety.html">Safety</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_safety.html">Safety</a>
          <a class="mdl-navigation__link" href="2017tongji_page_interlab.html">InterLab</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_interlab.html">InterLab</a>
          <a class="mdl-navigation__link" href="2017tongji_page_collaborations.html">Collaborations</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_collaborations.html">Collaborations</a>
          <div class="android-drawer-separator"></div>
+
            <div class="android-drawer-separator"></div>
          <a class="mdl-navigation__link" href="2017tongji_page_attributions.html">Attributions</a>
+
            <a class="mdl-navigation__link" href="2017tongji_page_attributions.html">Attributions</a>
        </nav>
+
          </nav>
      </div>
+
        </div>
  
<!-- Concat with content -->
+
  <!-- Concat with content -->
  
 
</html>
 
</html>

Revision as of 18:33, 17 October 2017