当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Cant get second hamburger menu to work

问题描述:

I was able to get MENU-1 to collapse into a hamburger menu for smaller devices, but cant seem to get MENU-2 to do the same. Can someone tell me where i'm going wrong because i've tried replicating MENU1 codes but to no avail

.cd-auto-hide-header {

position: fixed;

z-index: 2;

top: 0;

left: 0;

width: 100%;

height: 60px;

background-color: #ffffff;

/* Force Hardware Acceleration */

-webkit-transform: translateZ(0);

transform: translateZ(0);

will-change: transform;

-webkit-transition: -webkit-transform .5s;

transition: -webkit-transform .5s;

transition: transform .5s;

transition: transform .5s, -webkit-transform .5s;

}

.cd-auto-hide-header::after {

clear: both;

content: "";

display: block;

}

.cd-auto-hide-header.is-hidden {

-webkit-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);

}

@media only screen and (min-width: 1024px) {

.cd-auto-hide-header {

height: 80px;

}

}

.cd-auto-hide-header .logo,

.cd-auto-hide-header .nav-trigger {

position: absolute;

top: 50%;

bottom: auto;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.cd-auto-hide-header .logo {

left: 5%;

}

.cd-auto-hide-header .logo a, .cd-auto-hide-header .logo img {

display: block;

}

.cd-auto-hide-header .nav-trigger

{

/* vertically align its content */

display: table;

height: 100%;

padding: 0 1em;

font-size: 1.2rem;

text-transform: uppercase;

color: #25283D;

font-weight: bold;

right: 0;

border-left: 1px solid #f2f2f2;

}

.cd-auto-hide-header .nav-trigger span

{

/* vertically align inside parent element */

display: table-cell;

vertical-align: middle;

}

.cd-auto-hide-header .nav-trigger em, .cd-auto-hide-header .nav-trigger em::after, .cd-auto-hide-header .nav-trigger em::before {

/* this is the menu icon */

display: block;

position: relative;

height: 2px;

width: 22px;

background-color: #25283D;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.cd-auto-hide-header .nav-trigger em

{

/* this is the menu central line */

margin: 6px auto 14px;

-webkit-transition: background-color .2s;

transition: background-color .2s;

}

.cd-auto-hide-header .nav-trigger em::before, .cd-auto-hide-header .nav-trigger em::after {

position: absolute;

content: '';

left: 0;

-webkit-transition: -webkit-transform .2s;

transition: -webkit-transform .2s;

transition: transform .2s;

transition: transform .2s, -webkit-transform .2s;

}

.cd-auto-hide-header .nav-trigger em::before

{

/* this is the menu icon top line */

-webkit-transform: translateY(-6px);

-ms-transform: translateY(-6px);

transform: translateY(-6px);

}

.cd-auto-hide-header .nav-trigger em::after

{

/* this is the menu icon bottom line */

-webkit-transform: translateY(6px);

-ms-transform: translateY(6px);

transform: translateY(6px);

}

@media only screen and (min-width: 1024px) {

.cd-auto-hide-header .nav-trigger

{

display: none;

}

}

.cd-auto-hide-header.nav-open .nav-trigger em

{

/* transform menu icon into a 'X' icon */

background-color: rgba(255, 255, 255, 0);

}

.cd-auto-hide-header.nav-open .nav-trigger em::before

{

/* rotate top line */

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.cd-auto-hide-header.nav-open .nav-trigger em::after

{

/* rotate bottom line */

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.cd-primary-nav {

display: inline-block;

float: right;

height: 100%;

padding-right: 5%;

}

.cd-primary-nav > ul {

position: absolute;

z-index: 2;

top: 60px;

left: 0;

width: 100%;

background-color: #ffffff;

display: none;

box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);

}

.cd-primary-nav > ul a {

/* target primary-nav links */

display: block;

height: 50px;

line-height: 50px;

padding-left: 5%;

color: #25283D;

font-size: 1.8rem;

border-top: 1px solid #f2f2f2;

}

.cd-primary-nav > ul a:hover, .cd-primary-nav > ul a.active {

color: #8F3985;

}

@media only screen and (min-width: 1024px) {

.cd-primary-nav {

/* vertically align its content */

display: table;

}

.cd-primary-nav > ul {

/* vertically align inside parent element */

display: table-cell;

vertical-align: middle;

/* reset mobile style */

position: relative;

width: auto;

top: 0;

padding: 0;

background-color: transparent;

box-shadow: none;

}

.cd-primary-nav > ul::after {

clear: both;

content: "";

display: block;

}

.cd-primary-nav > ul li {

display: inline-block;

float: left;

margin-right: 1.5em;

}

.cd-primary-nav > ul li:last-of-type {

margin-right: 0;

}

.cd-primary-nav > ul a {

/* reset mobile style */

height: auto;

line-height: normal;

padding: 0;

border: none;

}

}

.nav-open .cd-primary-nav ul,

.cd-primary-nav ul:target {

/*show primary nav - mobile only:target is used to show navigation on no-js devices

*/

display: block;

}

@media only screen and (min-width: 1024px) {

.nav-open .cd-primary-nav ul,

.cd-primary-nav ul:target {

display: table-cell;

}

}

/* --------------------------------

2. Auto-Hiding Navigation - with Sub Nav

-------------------------------- */

.cd-secondary-nav {

position: relative;

z-index: 1;

clear: both;

width: 100%;

height: 50px;

background-color: #25283D;

/* Force Hardware Acceleration */

-webkit-transform: translateZ(0);

transform: translateZ(0);

will-change: transform;

-webkit-transition: -webkit-transform .5s;

transition: -webkit-transform .5s;

transition: transform .5s;

transition: transform .5s, -webkit-transform .5s;

}

.cd-secondary-nav::after {

/* gradient on the right - to indicate it's possible to scroll */

content: '';

position: absolute;

z-index: 1;

top: 0;

right: 0;

height: 100%;

width: 35px;

background: transparent;

background: -webkit-linear-gradient(right, #25283D, rgba(37, 40, 61, 0));

background: linear-gradient(to left, #25283D, rgba(37, 40, 61, 0));

pointer-events: none;

-webkit-transition: opacity .2s;

transition: opacity .2s;

}

.cd-secondary-nav.nav-end::after {

opacity: 0;

}

.cd-secondary-nav ul, .cd-secondary-nav li, .cd-secondary-nav a {

height: 100%;

}

.cd-secondary-nav ul {

}

.cd-secondary-nav ul::after {

clear: both;

content: "";

display: block;

}

.cd-secondary-nav li {

display: inline-block;

float: left;

/* do not shrink - elements float on the right of the element */

-webkit-flex-shrink: 0;

-ms-flex-negative: 0;

flex-shrink: 0;

}

.cd-secondary-nav li:last-of-type {

padding-right: 20px;

}

.cd-secondary-nav a {

display: block;

opacity: .6;

line-height: 50px;

padding: 0 1em;

}

.cd-secondary-nav a:hover, .cd-secondary-nav a.active {

opacity: 1;

}

@media only screen and (min-width: 1024px) {

.cd-secondary-nav {

height: 70px;

overflow: visible;

}

.cd-secondary-nav ul {

/* reset mobile style */

display: block;

text-align: center;

}

.cd-secondary-nav li {

/* reset mobile style */

float: none;

-webkit-flex-shrink: 1;

-ms-flex-negative: 1;

flex-shrink: 1;

}

.cd-secondary-nav a {

line-height: 70px;

}

.cd-secondary-nav a.active {

box-shadow: inset 0 -3px #8F3985;

}

}

.cd-secondary-nav.fixed {

position: fixed;

top: 60px;

}

.cd-secondary-nav.slide-up {

-webkit-transform: translateY(-60px);

-ms-transform: translateY(-60px);

transform: translateY(-60px);

}

@media only screen and (min-width: 1024px) {

.cd-secondary-nav.fixed {

top: 80px;

box-shadow: 0 -6px 0 #25283D;

}

.cd-secondary-nav.slide-up {

-webkit-transform: translateY(-80px);

-ms-transform: translateY(-80px);

transform: translateY(-80px);

}

}

<header class="cd-auto-hide-header"><div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div><nav class="cd-primary-nav"><a href="#cd-navigation" class="nav-trigger"><span><em aria-hidden="true"></em>MENU-1</span></a> <!-- .nav-trigger --><ul id="cd-navigation"><li><a href="#0">The team</a></li><li><a href="#0">Our Products</a></li><li><a href="#0">Our Services</a></li><li><a href="#0">Shopping tools</a></li><li><a href="#0">Contact Us</a></li></ul></nav> <!-- .cd-primary-nav -->

</header> <!-- .cd-auto-hide-header -->

<section class="cd-hero"><div class="cd-hero-content"><!-- your content here --></div>

</section> <!-- .cd-hero -->

<nav class="cd-secondary-nav">

<span><em aria-hidden="true"></em>MENU-2

</span><ul><li><a class="active" href="#0">Intro</a></li><li><a href="#0">Features</a></li><li><a href="#0">Photos</a></li><li><a href="#0">Videos</a></li><li><a href="#0">Specs</a></li><li><a href="#0">Support</a></li><li><a href="#0">Compare</a></li><li><a href="#0">Buy</a></li></ul>

</nav> <!-- .cd-secondary-nav -->

分享给朋友:
您可能感兴趣的文章:
随机阅读: