Difference between revisions of "Template:SJTU-BioX-Shanghai/Alpha/Header"

 
(256 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<style>
+
 
−
body {
+
<script>
−
    height: 100%;
+
function toggle_nav(btn) {
 +
  var ctt = $('#content')[0]
 +
  ctt.classList.toggle('nav-toggle')
 
}
 
}
−
.firstHeading {
+
function toc_loop() {
−
     display: none;
+
  var TOP = window.pageYOffset + 50;
 +
  var headings = $('#toc ~ h2 > span:last-child, #toc ~ h3 >  span:last-child');
 +
  if (headings.length == 0) return
 +
 
 +
  for (var i = 0; i < headings.length; i++) {
 +
     var h = headings[i];
 +
    var top = $(h).offset().top;
 +
    if (top > TOP ) break
 +
  }
 +
  if (i > 0) h = headings[i-1]
 +
  //set h as reading part
 +
  var id = h.id;
 +
 
 +
  var prev_a = $('#toc a.reading');
 +
  var a = $('a[href="#'+ id +'"]');
 +
  prev_a.removeClass('reading');
 +
  a.addClass('reading');
 
}
 
}
−
#content {
+
function init() {
−
     height: auto;
+
  $('#toc div#toctitle + ul a').click(
−
    width: auto;
+
     function(evnt){
−
    border: 0;
+
      var a = evnt.currentTarget;
−
    margin: 0;
+
      var id = a.attributes["href"].value;
−
    padding-top: 20px;
+
      var ele = document.getElementById(id.slice(1, id.length));
−
    padding-bottom: 0px;
+
      var top = ele.offsetTop, docEle =  document.documentElement
−
     padding-left: 250px;
+
      var pageHeight = docEle.offsetHeight, windowHeight =  docEle.clientHeight
−
    padding-right: 30px;
+
 
 +
      if ((pageHeight - top) > windowHeight) setTimeout ("scrollBy(0, -20)", 10);
 +
     }
 +
  )
 +
 
 +
  setInterval("toc_loop()", 10);
 
}
 
}
  
 +
$(document).ready(init)
 +
</script>
 +
<style>
 +
/* test BEGIN */
 +
h1.firstHeading{
 +
  display: none;
 +
}
 +
/* test END */
 +
/* color & font BEGIN */
 +
nav #hide-nav {
 +
  background-color: rgba(185,217,137,0.5);
 +
}
 +
nav #hide-nav svg * {
 +
  fill: #109E52;
 +
}
 
nav {
 
nav {
−
    padding: 0;
+
  background-image: url(/wiki/images/9/98/SJTUB_shade.png);
−
    position: fixed;
+
  background-repeat: repeat;
−
    top: 0px;
+
−
    left: 0px;
+
−
    height: 100%;
+
−
    width: 220px;
+
−
    background-color: grey;
+
−
    overflow-y: auto;
+
 
}
 
}
 +
nav, nav > ul > li:not(:first-child) a {
 +
  color: #109E52;
 +
}
 +
nav > ul > li:not(:first-child) li a {
 +
  background-color: #647E6A;
 +
  opacity: 0.85;
 +
}
 +
nav > ul > li:first-child  a{
 +
  color: white;
 +
}
 +
 +
nav {
 +
  font-family: "Tahoma, Geneva, sans-serif";
 +
}
 +
 +
nav a {
 +
  font-family: Arial;
 +
  font-size: 1em;
 +
  font-weight: 800;
 +
  text-transform: uppercase;
 +
}
 +
 +
nav a:hover {
 +
  text-decoration: none;
 +
}
 +
nav > ul > li:not(:first-child) a:hover {
 +
  background-color: #FFFFFF;
 +
}
 +
 +
nav > ul > li:first-child > a {
 +
  background-color: rgba(87,172,101,0.8);
 +
}
 +
nav {
 +
  position: fixed;
 +
  top: 0px;
 +
  left: 0px;
 +
  box-sizing: border-box;
 +
  height: 100%;
 +
  width: 14.5em;
 +
  padding-top: 20px;
 +
  padding-left: 1em;
 +
  overflow: visible;
 +
}
 +
.nav-toggle nav {
 +
  left: -15em;
 +
}
 +
 +
nav svg {
 +
  margin: auto;
 +
  transform: matrix(1,0,0,1,0,0);
 +
}
 +
.nav-toggle nav svg {
 +
  transform: matrix(-1,0,0,1,0,0);
 +
}
 +
nav > * {
 +
  z-index: 1;
 +
}
 +
nav #hide-nav {
 +
  position: fixed;
 +
  top: 0px;
 +
  left: 0px;
 +
  width: 1em;
 +
  height: 100%;
 +
  z-index = 2;
 +
}
 +
nav #hide-nav svg{
 +
  poiner-events: none;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 0.5px;
 +
  height: 40px;
 +
  margin-top: -20px;
 +
}
 +
 
nav ul {
 
nav ul {
−
    padding: 3px 5px;
+
  margin: 0px;
−
    margin: 0;
+
  padding: 0px;
 +
  list-style: none;
 +
  width: 100%;
 
}
 
}
 
nav > ul {
 
nav > ul {
−
    margin-top: 70px;
+
  margin-top: 7em;
−
    margin-bottom: 20px;
+
−
    background-color: lightblue;
+
 
}
 
}
 
nav > ul ul {
 
nav > ul ul {
−
    background-color: grey;
+
  position: absolute;
 +
  padding: 0px;
 +
  top: 0px;
 +
  left: 14.1em;
 +
  height: 0px;
 +
  width: 0px;
 +
  overflow: hidden;
 +
  color: #FFFFFF;
 
}
 
}
−
nav li {
+
nav > ul > ul > li a{
−
    display: block;
+
  color: #FFFFFF;
−
    list-style-type: none;
+
−
    margin-bottom: 5px;
+
−
    min-height: 10px;
+
 
}
 
}
−
nav li:first-child {
+
nav > ul > ul > li:not(:first-child) a {
−
    margin-top: 3px;
+
  color: #FFFFFF;
 +
}
 +
nav > ul > li:hover ul, nav > ul > li ul:hover {
 +
  height: 9em;
 +
  width: 14em;
 +
}
 +
nav li {
 +
  margin-top: 0px;
 +
  margin-bottom: 0px;
 
}
 
}
 
nav li:last-child {
 
nav li:last-child {
−
    margin-bottom: 0px;
+
  margin-bottom: 0px;
 +
}
 +
nav > ul > li {
 +
  position: relative;
 
}
 
}
  
 
nav a {
 
nav a {
−
    display: block;
+
  display: block;
−
    background-color: lightcyan;
+
  padding-left: 2em;
−
    line-height: 20px;
+
  height: 4em;
−
    text-align: center;
+
  line-height: 4em;
−
    font-size: 15px;
+
 
}
 
}
 +
nav > ul ul a {
 +
  padding-left: 1em;
 +
  width: 15em;
 +
}
 +
nav > ul > li > a:not(:last-child)::before {
 +
  content: "+";
 +
  position: absolute;
 +
  left: 0.5em;
 +
}
 +
/* color & font END */
  
−
#contentsContainer {
+
 
−
    position: fixed;
+
 
−
    top: 0px;
+
/* layout BEGIN */
−
    left: 0px;
+
body {
−
    padding-left: 220px;
+
  font-family: Trebuchet MS,"Helvetica Neue",Helvetica,Arial;
−
    z-index: -1;
+
  color: black;
−
    width: 100%;
+
  background-color: #FFFFFF;
−
    height: 100%;
+
−
    background-color: peru;
+
 
}
 
}
 +
h2{
 +
  color:#FEFEFE;
 +
  background-color:#57AB65;
 +
  font-size:500;
 +
  letter-spacing:-0.05em;
 +
  font-size:2em;
 +
}
 +
h3{
 +
  color:#57AB65;
 +
  font-weight:500;
 +
  font-size:2em;
 +
  letter-spacing:-0.05em;
 +
}
 +
p{
 +
  color:#003219;
 +
  font-weight:400;
 +
  font-size:1.3em;
 +
}
 +
a:link {
 +
  color: #109E52;
 +
}
 +
a:visited {
 +
  color: #8aa28e;
 +
}
 +
#toc ul a{
 +
  font-family: Trebuchet MS,"Helvetica Neue",Helvetica,Arial;
 +
  border-left-color: #109E52;
 +
}
 +
#toc ul a.reading {
 +
  border-left-color: #5f7963;
 +
}
 +
#top_menu_under {
 +
  border-bottom: 0px;
 +
}
 +
#top_menu_14 {
 +
  border-bottom: 0px;
 +
}
 +
#top_menu_inside {
 +
  border-left: 0px;
 +
  border-right: 0px;
 +
}
 +
 +
#toc {
 +
  position: fixed;
 +
  right: 1em;
 +
  top: 10em;
 +
  width: 16em;
 +
  font-size: 0.6em;
 +
  border: 0px;
 +
  background: white;
 +
}
 +
#toc .tocnumber {
 +
  display: none;
 +
}
 +
#toc * {
 +
  margin-top: 0px;
 +
  margin-bottom: 0px;
 +
}
 +
#toc ul ul {
 +
  margin-left: 0px;
 +
}
 +
#toc ul a {
 +
  border-left: 0.4em solid;
 +
  padding:0.4em 0 0.4em 0.8em;
 +
  font-weight:700;
 +
}
 +
#toc ul ul a {
 +
  padding-left:1.5em;
 +
  font-weight:500;
 +
}
 +
 +
#content {
 +
  box-sizing: border-box;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding-left: 17em;
 +
  padding-right: 2em;
 +
  padding-top: 20px;
 +
}
 +
#content.nav-toggle {
 +
  padding-left: 4em;
 +
}
 +
p img{
 +
  float:right;
 +
  margin-left:2em;
 +
  margin-bottom:2em;
 +
}
 +
article#mainArticle{
 +
  width:80%;
 +
}
 +
p{
 +
  text-align:justify;
 +
}
 +
/* layout END */
 +
 +
 +
 +
/* animation BEGIN */
 +
nav {
 +
  transition: left 0.4s;
 +
}
 +
#content {
 +
  transition: padding-left 0.4s;
 +
}
 +
 +
nav > ul ul {
 +
  transition: opacity 0.3s, height 0.3s, width 0.3s;
 +
  transition-delay: 0.2s;
 +
  opacity: 0;
 +
}
 +
nav > ul > li:hover > ul, nav > ul > li > ul:hover {
 +
  transition-delay: 0s;
 +
  opacity: 0.99;
 +
}
 +
nav a {
 +
  transition: background-color 0.1s;
 +
}
 +
/* animation END */
 +
 
</style>
 
</style>
 +
 
     <nav>
 
     <nav>
 +
      <div id="hide-nav" onclick="toggle_nav(this)"><svg width="6px" height="24px"><polygon points="6,0 0,12 6,24"/></svg></div>
 +
      <div id="shade"></div>
 
       <ul>
 
       <ul>
−
<li><a href="#">Home</a></li>
+
<li><a href="#">home</a></li>
−
<li><a href="#">Team</a></li>
+
 
<li>
 
<li>
−
  <a href="#">Project</a>
+
  <a href="#">project</a>
 
  <ul>
 
  <ul>
−
    <li><a href="#">HR</a></li>
+
    <li><a href="#">description</a></li>
−
    <li><a href="#">Control System</a></li>
+
    <li><a href="#">design</a></li>
−
    <li><a href="#">Others</a></li>
+
    <li><a href="#">experiments & result</a></li>
 
  </ul>
 
  </ul>
 
</li>
 
</li>
 +
        <li><a href="#">notebooks</a></li>
 +
<li><a href="#">safety</a></li>
 +
<li><a href="#">parts</a></li>
 +
<li><a href="#">modeling</a></li>
 
<li>
 
<li>
−
  <a href="#">Parts</a>
+
  <a href="#" >human practices</a>
 +
  <ul>
 +
    <li><a href="#">process flow</a></li>
 +
    <li><a href="#">public acceptance</a></li>
 +
    <li><a href="#">collaboration</a></li>
 +
  </ul>
 
</li>
 
</li>
−
<li><a href="#">Notebooks</a></li>
+
<li><a href="#">self-judging</a></li>
−
<li><a href="#">Attribution</a></li>
+
        <li>
−
<li><a href="#">Collaboration</a></li>
+
  <a href="#">team</a>
−
<li>
+
−
  <a href="#">Human Practices</a>
+
 
  <ul>
 
  <ul>
−
    <li><a href="#">Necessity</a></li>
+
    <li><a href="#">team members</a></li>
−
    <li><a href="#">Feasibility</a></li>
+
    <li><a href="#">attribution</a></li>
−
    <li><a href="#">Economy</a></li>
+
 
  </ul>
 
  </ul>
 
</li>
 
</li>
−
<li><a href="#">Safety</a></li>
 
−
        <li><a href="#">Results</a></li>
 
−
        <li><a href="#">Design</a></li>
 
−
<li><a href="#">Modeling</a></li>
 
 
       </ul>
 
       </ul>
 
     </nav>
 
     </nav>
 +
 +
  <article id="mainArticle">
 
</html>
 
</html>

Latest revision as of 07:41, 21 August 2015