View source for Template:HSNU-TAIPEI/nav

<html>
<style>
/**************************
GENERAL
**************************/

.slide-menu {
  background: #3ac88d;
  position: fixed;
  opacity: 0.95;
  z-index: 1000000;
}

.slide-menu h3 {
  color: #fff;
  font-size: 190%;
  padding: 28px;
  margin: 0;
  font-weight: 300;
  background: #24ab5e;
}

.slide-menu a {
  display: block;
  color: #fff;
  font-size: 1.1em;
  font-weight: 300;
  text-decoration: none;
  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;
}

.slide-menu a:hover {
  background: #74d59e;
}

.slide-menu a:active {
  background: #34bd84;
  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-nav {
  top: 0;
  left: 100%;
}

.seclayer-nav {
  background: #3ac88d;
  width: 100%;
  border-left: 2px solid #24ab5e;
}

/**************************
VERTICAL
**************************/

.slide-menu-vertical {
  width: 18%;
  height: 100%;
  top: 0;
  z-index: 1000;
}

.slide-menu-vertical a {
  border-bottom: 1px solid #24ab5e;
  padding: 1em;
}

/**************************
SLIDE FROM LEFT
**************************/

.slide-menu-left {
  left: -18%;
}

.slide-menu-left.slide-menu-open {
  -webkit-transform: translateX(98%);
  -moz-transform: translateX(98%);
  -ms-transform: translateX(98%);
  -o-transform: translateX(98%);
}

/**************************
TRANSITION
**************************/

body,
.slide-menu,
.slide-menu-push {
  transition: all 0.3s ease;
  -webkit-transition: all 0.6s cubic-bezier(.55,-0.11,.31,1.2);
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

/**************************
BUTTON
**************************/

.menu-button {
  position: fixed;
  left: 3%;
  top: 30px;
  cursor: pointer;
  display: block;
  width: 8.33%;
  border: 4px solid #bbb;
  border-radius: 6px 5px;
  color: #21b861;
  -webkit-transition: all 0.6s linear;
}

.menu-button span {
  display: block;
  margin: 12px auto;
  text-align: center;
}

.menu-button:hover {
  border-color: #2dca70;
  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>
</html>