그리드 레이아웃을 사용하면 다른 장치에서 정보 테이블을 다르게 표시 할 수있는 HTML (small medium large)을 쉽게 작성할 수 있습니다.메뉴 막대를 만들기 위해 Zurb Foundation 그리드를 활용하려면 어떻게해야합니까?
그러나 메뉴 모음의 경우 완전히 다른 레이아웃이 필요할 수 있습니다. 따라서 HTML은 웹용과 모바일 용으로 각각 두 번 작성해야합니다. 그리고 장치에 따라 표시/숨기기를 수행합니다.
내 질문은 :이 표시/숨기기는 반응 형 디자인의 해킹으로 간주됩니까? 그것을 할 수있는 더 좋은 방법이 있습니까?
Zurb에 반응 형 메뉴가 내장되어 있지만 크게 두 가지 메뉴가 필요하다면 때때로 작은 코드를 복제하고 적절할 때 숨기거나 표시하는 것이 가장 좋습니다.
그것은 가장 깨끗한 해결책은 아니지만 모든 곳에서 분명히 발생합니다. 트레이드 오프가 언제 당신에게 맞는 것인지를 결정해야합니다.
가장 간단한 방법 인 CSS 만 사용하여 쉽게 모바일 메뉴로 다시 만들 수있는 html을 만드는 방법을 찾아 낼 수 있다면. 일반적으로 모든 모바일 메뉴에는 배치 할 토글/버튼이 필요하기 때문에 최소한 자바 스크립트 또는 jQuery를 믹스에 추가하려고합니다.
콘텐츠 숨기기 및 표시 (미디어 쿼리를 통한 검색)는 실제로 해킹이 아니지만 프로토 타이핑 할 때 훨씬 빠르게 작업 할 수 있습니다.
예를 들어 프로토 타입을 만들 때 Foundation Top-bar를 자주 사용하고 기본 Foundation 구성 요소가있는 사용자 정의 메뉴를 만든 다음 responsive-nav을 사용하여 모바일 메뉴를 만들면 jQuery 종속성이없고 훨씬 가볍습니다. 대조적으로, 많은 사이트는 바, 버튼, 드롭 다운 등을 사용하는 것과 비교할 때 CSS 및 JS에서 매우 무거운 top-bar 및 offcanvas 요소를 사용합니다.
Ryan이 말했듯이 거래. 의미있는 마크 업이 사용자와 프로젝트에 얼마나 중요한지를 결정하고, 최종 사용자가 거의 동일한 경험을 할 수 있도록 추가 시간과 노력을 투입 할 가치가 있는지 결정해야합니다.
내 AngularJS 앱에 대해 최근에 나는 Foundation 5의 Interchange을 사용하여 창 너비에 따라 부분을 교환하려고했습니다. 불행하게도 그것은 부분적으로 만 작동했습니다. 각도가 어떤 일을하는 방식에 문제가 있습니다. 세부 사항을 얻기 위하여려고하지만 문제가 해결되지 않았기 때문에 나는 당신이 당신의 문제에 대한 모든 솔루션들 사용하는 경우 부여
같은 다른 솔루션을 검색하지 않음 Angular와 Arsenal을 추가하는 것이 좋습니다. Foundation for Apps의 새 출시를 고려해보십시오.하지만 웹 앱 제작자를 대상으로합니다. Angular 및 ui-router를 기반으로합니다.
단순한 사이트 (제품, 포트폴리오, 블로그)를 만들고있는 경우 Foundation 5's Interchange을 사용하면 모바일 및 데스크톱 메뉴 막대에 다른 HTML 레이아웃을 사용하려는 경우 가장 세련된 솔루션 인 것처럼 보입니다 (탐색 막대).
종종 미디어 쿼리를 기반으로 의사 부분 기반으로 상호 교환을 사용하는 것이 js 이외의 구성 요소에서는 괜찮지 만 js 기반 기반 구성 요소가 외부 파일에 배치되어이 방식으로로드 될 때 올바르게 작동하는지 확신 할 수 없습니다. 또한 CSS/미디어 쿼리를 통해 인라인으로 해석되는 대신 외부 파일을로드 할 때 추가 성능 적중률을 얻으려고합니다. – JAMESSTONEco
그래서 navbar를 웹 페이지 나 앱에서'index.html'에 코드화하여 뷰 부분으로 호출하는 것이 현명한 방법입니다. 응용 프로그램 상태가 변경되고 새 탐색 UI가 표시되어야하는 경우가 아니면 이해할 수 있습니다. 흠,하지만 이제는 상태에 따라 새로운/이전 UI 요소를 숨기고 표시하는 아이디어를 재검토하기 시작했습니다. 흠. –