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

Line 4: Line 4:
 
function hide_nav_click(btn) {
 
function hide_nav_click(btn) {
 
   btn.onclick = function(){show_nav_click(this)}
 
   btn.onclick = function(){show_nav_click(this)}
   var nav = btn.parentNode;
+
   var ctt = $('#content')[0]
 +
  ctt.classList.add('nav-hided')
 
   var svg = btn.firstChild;
 
   var svg = btn.firstChild;
  nav.classList.add('nav-hided')
 
 
   svg.transform.baseVal[0].matrix.a = -1
 
   svg.transform.baseVal[0].matrix.a = -1
 
   svg.transform.baseVal[0].matrix.e = 10
 
   svg.transform.baseVal[0].matrix.e = 10
Line 12: Line 12:
 
function show_nav_click(btn) {
 
function show_nav_click(btn) {
 
   btn.onclick = function(){hide_nav_click(this)}
 
   btn.onclick = function(){hide_nav_click(this)}
   var nav = btn.parentNode;
+
   var ctt = $('#content')[0]
 +
  ctt.classList.add('nav-hided')
 
   var svg = btn.firstChild;
 
   var svg = btn.firstChild;
  nav.classList.remove('nav-hided')
 
 
   svg.transform.baseVal[0].matrix.a = 1
 
   svg.transform.baseVal[0].matrix.a = 1
 
   svg.transform.baseVal[0].matrix.e = 0
 
   svg.transform.baseVal[0].matrix.e = 0
Line 43: Line 43:
  
 
/* color & font BEGIN */
 
/* color & font BEGIN */
 +
nav #hide-nav {
 +
  background-color: #E0E0E0;
 +
}
 
nav #hide-nav svg * {
 
nav #hide-nav svg * {
 
   fill: #109E52;
 
   fill: #109E52;
 
}
 
}
 +
 
nav, nav > ul > li:not(:first-child) a {
 
nav, nav > ul > li:not(:first-child) a {
 
   background-color: #EEEEEE;
 
   background-color: #EEEEEE;
Line 93: Line 97:
 
   height: 100%;
 
   height: 100%;
 
   padding-left: 17em;
 
   padding-left: 17em;
 +
  padding-right: 3em;
 
   padding-top: 20px;
 
   padding-top: 20px;
 +
}
 +
#content.nav-hided {
 +
  padding-left: 4em;
 
}
 
}
  
Line 106: Line 114:
 
   overflow: visible;
 
   overflow: visible;
 
}
 
}
nav.nav-hided {
+
.nav-hided nav {
 
   left: -15em;
 
   left: -15em;
 
}
 
}
Line 118: Line 126:
 
   width: 1em;
 
   width: 1em;
 
   height: 100%;
 
   height: 100%;
  background-color: #BBBBBB;
 
 
   z-index = 2;  
 
   z-index = 2;  
 
}
 
}
Line 187: Line 194:
 
nav {
 
nav {
 
   transition: left 0.4s;
 
   transition: left 0.4s;
 +
}
 +
#content {
 +
  transition: padding-left 0.4s;
 
}
 
}
  

Revision as of 14:01, 11 August 2015