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

Line 19: Line 19:
 
   color: #91B798;
 
   color: #91B798;
 
}
 
}
 +
  
 
/* layout BEGIN */
 
/* layout BEGIN */
Line 24: Line 25:
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
−
   padding-left: 280px;
+
   padding-left: 300px;
 
   padding-top: 20px;
 
   padding-top: 20px;
 
}
 
}
 +
 
nav {
 
nav {
 
   position: fixed;
 
   position: fixed;
Line 32: Line 34:
 
   left: 0px;
 
   left: 0px;
 
   height: 100%;
 
   height: 100%;
−
   width: 280px;
+
   width: 250px;
 
   /* padding-top: 20px; */
 
   /* padding-top: 20px; */
 
   padding-right: 30px;
 
   padding-right: 30px;
 
   overflow: visible;
 
   overflow: visible;
 
}
 
}
 +
 
nav > div:first-child {
 
nav > div:first-child {
 
   display: block;
 
   display: block;
Line 43: Line 46:
 
   line-height: 100%;
 
   line-height: 100%;
 
}
 
}
 +
 
nav ul {
 
nav ul {
 
   margin: 0px;
 
   margin: 0px;
Line 48: Line 52:
 
   list-style: none;
 
   list-style: none;
 
   width: 100%;
 
   width: 100%;
 +
}
 +
nav > ul ul {
 +
  position: absolute;
 +
  top: 0px;
 +
  left: 280px;
 +
  height: 0px;
 +
  width: 0px
 +
  overflow: hidden;
 +
}
 +
nav > ul > li:hover ul, nav > ul > li ul:hover {
 +
}
 +
  height: initial;
 +
  width: initial;
 
}
 
}
 
nav li {
 
nav li {
 
   margin-bottom: 1px;
 
   margin-bottom: 1px;
−
}
 
−
nav > ul > li {
 
−
  position: relative;
 
 
}
 
}
 
nav li:last-child {
 
nav li:last-child {
 
   margin-bottom: 0px;
 
   margin-bottom: 0px;
 +
}
 +
nav > ul > li {
 +
  position: relative;
 
}
 
}
  
 
nav a {
 
nav a {
−
  padding-left: 40px;
 
 
   display: block;
 
   display: block;
 +
  padding-left: 40px;
 
   height: 40px;
 
   height: 40px;
−
   font-family: "Tahoma, Geneva, sans-serif";
+
   line-height: 100%;
−
   text-transform: uppercase;
+
}
−
   line-height: 40px;
+
nav > ul ul a {
 +
   padding-left: 20px;
 +
   width: 230px;
 
}
 
}
 
/* layout END */
 
/* layout END */
Line 84: Line 103:
 
}
 
}
 
nav > ul {
 
nav > ul {
−
 
 
}
 
}
 
nav > ul ul {
 
nav > ul ul {
Line 91: Line 109:
 
   background-color: #EEE;
 
   background-color: #EEE;
 
}
 
}
−
/* color & font END */
+
nav a {
−
 
+
  font-family: "Tahoma, Geneva, sans-serif";
−
/* animation BEGIN */
+
  text-transform: uppercase;
−
/* animation END */
+
}
 
nav > ul > li:first-child > a {
 
nav > ul > li:first-child > a {
 
   background-color: green;
 
   background-color: green;
 
}
 
}
−
nav ul ul a {
+
/* color & font END */
−
  padding-left: 20px;
+
−
  width: 230px;
+
−
}
+
−
nav > ul > li > a:not(:last-child)::after {
+
−
  content: "+"
+
−
}
+
−
nav > ul > li > ul {
+
−
  position: absolute;
+
−
  left: 280px;
+
−
  top: 0px;
+
  
 +
 +
/* animation BEGIN */
 +
nav > ul ul {
 
   transition: opacity 0.4s, height 0.2s, width 0.1s;
 
   transition: opacity 0.4s, height 0.2s, width 0.1s;
 
   transition-delay: 0.5s;
 
   transition-delay: 0.5s;
 
   opacity: 0;
 
   opacity: 0;
−
  height: 0px;
 
−
  width: 0px
 
−
  overflow: hidden;
 
 
}
 
}
 
nav > ul > li:hover > ul, nav > ul > li > ul:hover {
 
nav > ul > li:hover > ul, nav > ul > li > ul:hover {
 
   transition-delay: 0s;
 
   transition-delay: 0s;
 
   opacity: 0.99;
 
   opacity: 0.99;
−
  height: initial;
 
−
  width: initial;
 
 
}
 
}
 +
/* animation END */
  
 
</style>
 
</style>

Revision as of 04:18, 10 August 2015