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

(Created page with "<!-- This document, originally from getmdl.io, was modified --> <!-- Material Design Lite Copyright 2015 Google Inc. All rights reserved. Licensed under the Apache Lic...")
 
Line 68: Line 68:
 
           });
 
           });
  
−
          var menu_trig = $("<div></div>");
+
        //  var menu_trig = $("<div></div>");
−
          menu_trig.css({
+
        //  menu_trig.css({
−
            position: "fixed",
+
        //    position: "fixed",
−
            "z-index": "10",
+
        //    "z-index": "10",
−
            height: "15px",
+
        //    height: "15px",
−
            width: "100%",
+
        //    width: "100%",
−
            top: "0",
+
        //    top: "0",
−
            left: "0"
+
        //    left: "0"
−
          }).mouseenter(function () {
+
        //  }).mouseenter(function () {
−
            $("#top_menu_14").css("top", "0");
+
        //    $("#top_menu_14").css("top", "0");
−
          }).mouseleave(function () {
+
        //  }).mouseleave(function () {
−
            $("#top_menu_14").css("top", "-20px");
+
        //    $("#top_menu_14").css("top", "-20px");
−
          });
+
        //  });
−
 
+
        //
−
          $("body").append(menu_trig);
+
        //  $("body").append(menu_trig);
−
         })(); // hide the top bar
+
         // })(); // hide the top bar
  
 
       });
 
       });
Line 90: Line 90:
 
   <div class="main view">
 
   <div class="main view">
  
−
<div class="main cont-wrap">
+
    <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> -->
 +
          <!-- Navigation -->
 +
          <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>
 +
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="2017tongji_page_description.html">Project</a>
 +
              <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>
 +
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">One</a>
 +
              <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">Play</a> -->
 +
            </nav>
 +
          </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 class="android-drawer mdl-layout__drawer">
 +
        <!-- <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">
 +
        </span> -->
 +
        <nav class="mdl-navigation">
 +
          <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_team.html">Team</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="">One</a>
 +
          <a class="mdl-navigation__link" href="">Play</a> -->
 +
          <div class="android-drawer-separator"></div>
 +
          <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_design.html">Design</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="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_improve.html">Improve</a>
 +
          <div class="android-drawer-separator"></div>
 +
          <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_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_interlab.html">InterLab</a>
 +
          <a class="mdl-navigation__link" href="2017tongji_page_collaborations.html">Collaborations</a>
 +
          <div class="android-drawer-separator"></div>
 +
          <a class="mdl-navigation__link" href="2017tongji_page_attributions.html">Attributions</a>
 +
        </nav>
 +
      </div>
  
 
<!-- Concat with content -->
 
<!-- Concat with content -->
  
 
</html>
 
</html>

Revision as of 18:16, 17 October 2017


TongJi iGEM
TongJi iGEM