첫 번째 탐색을 클릭 할 때 두 번째 탐색을 숨기는 방법 두 탐색이 모두 나오고 있습니까?

Question

모바일의 탐색 모음에 문제가 있습니다. 첫 번째 탐색 모음 아이콘을 클릭하면 두 탐색이 모두 나옵니다. 나는 CSS 가시성을 시도하고있다 : 아이콘을 클릭 할 때 아무런 코드가 없지만 올바른 결과를 얻지는 못한다. 저를 도와주세요?

참조 용으로 아래 이미지가 첨부되어 있습니다.

두 개의 탐색 모음입니다. 하나는 검정색, 하나는 흰색. 나는이 문제를 얻고 곳

이것은이다. 보시다시피 두 가지가 나옵니다.

네비게이션 바 2를 클릭하면 이러한 현상이 발생합니다.

감사합니다. 여기에서

Answer 1

제거 가시성 옵션 :

.td-menu-mob-open-menu #td-mobile-nav { 
    height: auto; 
    overflow: auto; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    left: 0; 
    visibility: visible; /* it's added here */ 
} 

그리고에서 :에

.td-js-loaded .td-menu-background, .td-js-loaded #td-mobile-nav { 
    /* visibility: visible; ----- remove this */ 
    -webkit-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); 
    -moz-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); 
    -o-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); 
    transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); 
} 

추가 가시성

.td-menu-mob-open-menu .td-menu-background { 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    visibility: visible; /* it's added here */ 
} 

그것은 현재의 문제를 해결합니다.

두 번 더 생각하면 사용자가 두 번째 탐색 및 스크롤을 열면 탐색 메뉴 만 볼 수있을 때까지 그걸 닫지 않습니다.

.td-menu-background { 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center top; 
    position: absolute; /* before it was position: fixed; */ 
    display: block; 
    width: 100%; 
    height: 113%; 
    z-index: 9999; 
    visibility: hidden; 
    transform: translate3d(-100%, 0, 0); 
    -webkit-transform: translate3d(-100%, 0, 0); 
    -moz-transform: translate3d(-100%, 0, 0); 
    -ms-transform: translate3d(-100%, 0, 0); 
    -o-transform: translate3d(-100%, 0, 0); 
} 

그리고 흰색 배경에 크로스 버튼을 보여주는 , 당신은 그것의 색상을 변경해야합니다

.td-mobile-close .td-icon-close-mobile { 
    height: 70px; 
    width: 70px; 
    line-height: 70px; 
    font-size: 21px; 
    color: #bdbdbd; /* before it was "color: #fff;" if you don't like "color: #bdbdbd;" you can change it with your desire color */ 
    top: 4px; 
    position: relative; 
}