부트 스트랩 3 축소 된 메뉴 오버레이 페이지 만들기

Question

페이지를 아래로 밀기보다는 페이지 위로 부트 스트랩 축소 된 메뉴를 표시 할 수 있는지 궁금합니다. 나는 메뉴에 z- 인덱스를 주려고했지만 그걸로 메뉴가 절대 위치 지정을 사용하도록 만들어야했습니다 ... 나쁜 생각이었습니다. 부트 스트랩이 취하는 경로를 고수하고 싶지만 푸시 대신 메뉴 오버레이를 만드십시오. 어떤 아이디어? 아무도 이것을 이뤘습니까?

감사합니다.

Answer 1

이렇게하면 축소 된 메뉴가 중첩됩니다. 나는 이것이 부트 스트랩 덮어 쓴 : 만 모바일 뷰의 메뉴에 영향을 미칠 싶었 기 때문에

@media screen and (max-width: 768px) { .collapsing { position: absolute !important; z-index: 20; width: 100%; top: 50px; } .collapse.in { display: block; position: absolute; z-index: 20; width: 100%; top: 50px; } .navbar-collapse { max-height: none !important; } }

나는 미디어 쿼리를 사용했다.

클래스 .collapsing하면, 페이지 (Z- 인덱스) 오버레이 화면에 걸쳐 스트레칭 (아마도 전화를) 상단에서 50 픽셀되어 있는지 확인하는 것입니다합니다 (navbar 클래스는 min-height: 50px있다).

클래스 .collapse.in은 위와 같지만 한 번만 메뉴가 이미 삭제되었습니다.

.navbar-collapse 아래의 내용은 부트 스트랩이 드롭 다운에 제공하는 최대 높이를 없애는 것입니다. 나는 긴 메뉴를 가지고있어서 다른 사람들에게는 필요하지 않을 수도 있습니다.