Difference between revisions of "Template:HSNU-TAIPEI/css/nav"

(Created page with "<html> <style> →‎************************* GENERAL *************************: .slide-menu { background: #3ac88d; position: fixed; opacity: 0.95; } .slide-menu h3 { co...")
 
Line 28: Line 28:
 
   text-decoration: none;
 
   text-decoration: none;
 
   padding-left: 32px;
 
   padding-left: 32px;
 +
  -webkit-transition: all 0.5s ease;
 +
}
 +
 +
.slide-menu ul,
 +
.slide-menu li {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 +
.slide-menu li {
 +
  list-style: none;
 
}
 
}
  
Line 37: Line 48:
 
   background: #34bd84;
 
   background: #34bd84;
 
   color: #fff;
 
   color: #fff;
 +
}
 +
 +
/**************************
 +
SECOND LAYER NAV
 +
**************************/
 +
 +
.seclayer {
 +
  position: relative;
 +
}
 +
 +
.seclayer::after {
 +
  content: "\203A";
 +
  font-size: 1.5em;
 +
  color: #fff;
 +
  display: block;
 +
  position: absolute;
 +
  top: 23%;
 +
  right: 12%;
 +
  opacity: 0.5;
 +
  -webkit-transition: opacity 0.5s ease;
 +
}
 +
 +
.seclayer:hover::after {
 +
  opacity: 1;
 +
}
 +
 +
.seclayer-nav {
 +
  position: absolute;
 +
  display: none;
 +
}
 +
 +
.seclayer:hover > .seclayer-nav {
 +
  display: block;
 +
}
 +
 +
.seclayer-nav {
 +
  top: 0;
 +
  left: 100%;
 +
}
 +
 +
.seclayer-nav {
 +
  background: #3ac88d;
 +
  width: 100%;
 +
  border-left: 2px solid #24ab5e;
 
}
 
}
  
Line 65: Line 120:
 
.slide-menu-left.slide-menu-open {
 
.slide-menu-left.slide-menu-open {
 
   -webkit-transform: translateX(98%);
 
   -webkit-transform: translateX(98%);
−
   -moz-transform: translateX(100%);
+
   -moz-transform: translateX(98%);
−
   -ms-transform: translateX(100%);
+
   -ms-transform: translateX(98%);
−
   -o-transform: translateX(100%);
+
   -o-transform: translateX(98%);
 
}
 
}
  
Line 88: Line 143:
 
**************************/
 
**************************/
  
−
.showLeft {
+
.menu-button {
 
   position: absolute;
 
   position: absolute;
−
   left: 20%;
+
   left: 3%;
 
   top: 30px;
 
   top: 30px;
 
   cursor: pointer;
 
   cursor: pointer;
Line 101: Line 156:
 
}
 
}
  
−
.showLeft span {
+
.menu-button span {
 
   display: block;
 
   display: block;
 
   margin: 12px auto;
 
   margin: 12px auto;
Line 107: Line 162:
 
}
 
}
  
−
.showLeft:hover {
+
.menu-button:hover {
 
   border-color: #2dca70;
 
   border-color: #2dca70;
 
   color: #000;
 
   color: #000;
 +
}
 +
 +
.hide-menu-button {
 +
  display: none;
 +
}
 +
 +
.back-button {
 +
  color: #fff;
 +
  cursor: pointer;
 +
  padding: 15px 15px 15px 18px;
 +
  margin: 0;
 +
  border-bottom: 1px solid #24ab5e;
 +
  background: #33b56b;
 +
  -webkit-transition: all 0.5s ease;
 +
}
 +
 +
.back-button:hover {
 +
  background: #74d59e;
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 12:39, 3 April 2015