데스크톱 사이트의 탐색을 접을 수있는 메뉴로 변환하려면 어떻게해야합니까?

Question

헤더에 보관하려는 탐색 메뉴가 있지만 너무 많은 공간을 차지합니다. 모바일에서 잘 보이게하려면 어떻게해야합니까?

Answer 1

하나의 가능성은 내부 내용을 표시하거나 숨기는 버튼 인 토글러를 사용하는 것입니다. uraniumjs 라이브러리에는 몇 가지 위젯이 포함되어 있으며 그 중 하나는 매우 간단하면서도 useful toggler implementation입니다. 그것은 또한 눈에 거슬리지 않습니다.

우라늄 js 파일을 포함시켜야 사용할 수 있습니다. 그런 다음 아래 설명 된대로 수행 할 수 있습니다.

메뉴 코드를 래퍼 컨테이너, "버튼"섹션 및 내용 섹션의 세 부분으로 변환해야합니다. 이러한 데이터를 사용, 그 부분의 각을 확인하려면 속성 :

data-ur-set="toggler" 

이

data-ur-toggler-component="button" 

는

를 ("버튼"섹션에이 속성을 추가) (래퍼에이 속성을 추가)

data-ur-toggler-component="content" 

(콘텐츠 섹션에이 특성 추가)

당신은 어딘가에도 이러한 CSS 규칙을 포함해야합니다 http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b을 :

*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] { 
    display:none; 
} 
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] { 
    display: block; 
} 

당신은 작은 예를 들어 여기에 실행 볼 수 있습니다.

Bloomingdales 및 Macys 모바일 사이트 모두 이러한 접근 방식을 사용합니다. 거기에서 작동하는 것을 볼 수 있습니다.