|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | <style> | | <style> |
| − | /**************************
| |
| − | GENERAL
| |
| − | **************************/
| |
| | | | |
| − | .slide-menu { | + | .main-nav { |
| − | background: #3ac88d;
| + | position: relative; |
| − | position: fixed;
| + | width: 100%; |
| − | opacity: 0.95;
| + | height: 80px; |
| | + | z-index: 100; |
| | + | box-shadow: 0 2px 3px rgba(0,0,0,.4); |
| | + | background: #fff; |
| | } | | } |
| | | | |
| − | .slide-menu h3 { | + | .main-nav h3 { |
| − | color: #fff;
| + | position: absolute; |
| − | font-size: 190%;
| + | top: 40%; |
| − | padding: 28px;
| + | left: 5%; |
| − | margin: 0;
| + | margin: 0; |
| − | font-weight: 300;
| + | |
| − | background: #24ab5e;
| + | |
| | } | | } |
| | | | |
| − | .slide-menu a { | + | .main-nav > ul, |
| − | display: block;
| + | .main-nav li { |
| − | color: #fff;
| + | margin: 0; |
| − | font-size: 1.1em;
| + | |
| − | font-weight: 300;
| + | |
| − | text-decoration: none;
| + | |
| − | padding-left: 32px;
| + | |
| − | -webkit-transition: all 0.5s ease;
| + | |
| | } | | } |
| | | | |
| − | .slide-menu ul, | + | .main-nav > ul { |
| − | .slide-menu li {
| + | display: flex; |
| − | margin: 0;
| + | flex-flow: row wrap; |
| − | padding: 0;
| + | justify-content: center; |
| | + | align-items: center; |
| | + | width: 100%; |
| | + | height: 100%; |
| | + | padding: 0; |
| | } | | } |
| | | | |
| − | .slide-menu li { | + | .main-nav li { |
| − | list-style: none;
| + | position: relative; |
| | + | list-style: none; |
| | + | margin: 0 3%; |
| | } | | } |
| | | | |
| − | .slide-menu a:hover { | + | .main-nav a { |
| − | background: #74d59e;
| + | text-decoration: none; |
| | + | text-align: center; |
| | + | text-transform: uppercase; |
| | + | color: #67459f; |
| | } | | } |
| | | | |
| − | .slide-menu a:active { | + | .selected { |
| − | background: #34bd84;
| + | border-bottom: 2px solid #f07057; |
| − | color: #fff;
| + | |
| | } | | } |
| | | | |
| − | /**************************
| + | .next-layer > a::after { |
| − | SECOND LAYER NAV
| + | content: '\0025BE'; |
| − | **************************/
| + | margin-left: 5px; |
| − | | + | |
| − | .seclayer { | + | |
| − | position: relative;
| + | |
| | } | | } |
| | | | |
| − | .seclayer::after {
| + | /* Sub-Layer NAV */ |
| − | 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 { | + | .sub-layer { |
| − | opacity: 1;
| + | position: absolute; |
| | + | top: 200%; |
| | + | margin: 0; |
| | + | padding: 0; |
| | + | z-index: 150; |
| | + | width: 150px; |
| | + | border: 2px solid #bcbcbc; |
| | + | border-radius: 5px; |
| | + | background: #fff; |
| | + | display: none; |
| | } | | } |
| | | | |
| − | .seclayer-nav { | + | .sub-layer::before { |
| − | position: absolute;
| + | content: ""; |
| − | display: none;
| + | width: 0; |
| | + | height: 0; |
| | + | border-left: 10px solid transparent; |
| | + | border-right: 10px solid transparent; |
| | + | border-bottom: 10px solid #bcbcbc; |
| | + | position: absolute; |
| | + | left: 30%; |
| | + | margin-top: -10px; |
| | + | z-index: 200; |
| | } | | } |
| | | | |
| − | .seclayer-nav { | + | .sub-layer li { |
| − | top: 0;
| + | width: 100%; |
| − | left: 100%;
| + | margin: 10px 0; |
| | + | padding: 5px; |
| | + | border-bottom: 1px solid #bcbcbc; |
| | } | | } |
| | | | |
| − | .seclayer-nav { | + | .sub-layer a { |
| − | background: #3ac88d;
| + | display: block; |
| − | width: 100%;
| + | width: inherit; |
| − | border-left: 2px solid #24ab5e;
| + | text-align: left; |
| | } | | } |
| | | | |
| − | /**************************
| + | .sub-layer li:last-child { |
| − | VERTICAL
| + | border-bottom: none; |
| − | **************************/
| + | |
| − | | + | |
| − | .slide-menu-vertical { | + | |
| − | width: 18%;
| + | |
| − | height: 100%;
| + | |
| − | top: 15px;
| + | |
| − | 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> | | </style> |
| | </html> | | </html> |