Template:HSNU-TAIPEI/nav

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

• • • • • • • • • • • • • • • • • • • • • • • • • • /

.slide-menu {

 background: #3ac88d;
 position: fixed;
 opacity: 0.95;

}

.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>