반응형 탐색을 만들기 위한 10가지 CSS 및 JavaScript 코드 조각

좋은 반응형 사이트의 가장 복잡한 부분 중 하나는 탐색입니다. 이를 파악하는 데 시간이 걸릴 수 있으며 이에 도움이 되는 많은 자습서가 있습니다. 그러나 나는 또한 이 기사를 위해 수집한 것과 같은 코드 조각을 사용하는 것을 좋아합니다.

이러한 반응형 탐색 스니펫은 모두 자신의 프로젝트를 위해 무료로 편집하고 복제할 수 있습니다. 또한 다양한 스타일을 제공하므로 모든 유형의 웹 사이트에서 작동하는 것이 있을 것입니다.

1. Johnny Mango의 반응형 전체 페이지 레이아웃

이 반응형 예제는 웹사이트의 프로토타이핑 단계를 어디까지 할 수 있는지 보여줍니다. 링크를 가리키고 자동으로 초점을 맞추면 탐색에 흥미로운 기능이 있음을 알 수 있습니다. 이 효과는 탐색이 동일한 "라이브" 웹사이트에서 변경할 수 있지만 이 예에서는 페이지의 UI/UX를 과시하는 데 유용합니다.

Pen Responsive Navigation Demo w/ Kube by Johnny Mango 보기

2. Tania Rascia의 드롭다운 Navbar

탐색에 더 긴 드롭다운 항목이 필요한 경우 이 메뉴가 더 잘 작동할 수 있습니다. 소수의 메뉴 항목만 특징으로 하는 보다 기본적인 탐색에 대한 강력한 대안입니다. 이 경우 매우 작은 드롭다운이 있는 간단한 링크 목록을 찾을 수 있습니다. 하위 메뉴 링크는 jQuery에서 처리하는 클릭 이벤트에만 나타납니다. CSS 전용으로 변경할 수 있지만 클릭 트리거를 잃게 됩니다.

그래도 이렇게 깔끔한 디자인을 위해 이 스니펫이 개발자에게 제공하는 다재다능함에 놀랐습니다.

Tania Rascia의 펜 반응형 드롭다운 탐색 모음 보기

3. Jan Czizikow 의 단일 페이지 레이아웃

단일 페이지 탐색 메뉴는 다른 것과 마찬가지로 사랑이 필요합니다. 이것은 작동 중인 단일 페이지 탐색의 완벽한 예입니다. 링크는 부드러운 애니메이션과 함께 아래로 스크롤되지만 너무 오래 기다리지 않도록 합니다.

말할 것도 없이 브라우저 크기에 관계없이 자동으로 크기가 완벽하게 조정됩니다. 나는 주로 판매 페이지 또는 간단한 포트폴리오 사이트에 대해 이러한 유형의 탐색을 권장합니다. 그것은 깨끗하고 반응 기술과 함께 몇 가지 우수한 애니메이션 기능을 제공합니다.

Jan Czizikow의 CSS 애니메이션 및 jQuery를 사용한 완전 반응형 탐색 펜 보기

4. Stephanie Walter의 빨간색 드롭다운 메뉴

개발자 Stephanie Walter는 웹을 위한 몇 가지 흥미로운 프로젝트를 구축했습니다. 이 스니펫은 밝은 빨간색의 반응형 탐색을 특징으로 하는 한 가지 예일 뿐입니다.

링크에는 사용자 지정 선택 기능과 부팅할 수 있는 멋진 호버 효과가 포함되어 있습니다. 크기를 조정하면 탐색 메뉴가 대신 슬라이딩 드롭다운 메뉴를 사용하는 것을 알 수 있습니다. 나는 거의 모바일용 블록 수준 링크 목록을 선택하겠지만 하위 메뉴를 고려하면 훨씬 더 잘 작동합니다.

Stephanie Walter의 다단계 펜 반응형 탐색 보기

5. Ahmad Hjazy의 순수 CSS 디자인

다음은 탐색에 순수 CSS를 사용하는 독특한 디자인입니다. 원소 주기율표를 모방한 탐색 링크가 있는 수직 메뉴입니다.

호버 효과는 약간 지연되지만 의심할 여지 없이 흥미롭습니다. 반응형 스타일은 말할 것도 없이 놀라울 정도로 유용합니다. 아마도 가장 인상적인 부분은 이 전체 예제 가 CSS를 단독으로 사용 하는 방법일 것입니다.

Ahmad Hjazy의 Pen CSS 반응형 탐색 메뉴 보기

6. Marc Libunao의 반응형 스티커 헤더

이전 스니펫에서 단일 페이지 디자인에 대해 언급했으며 이 반응형 헤더는 유사한 궤적을 따릅니다. 유일한 차이점은 이 탐색은 페이지에서 약간 더 큰 블록이 있고 반응형 페이지 디자인을 약간 다르게 처리한다는 것입니다.

브라우저 크기를 조정하면 이 예제에서 재미있는 애니메이션과 함께 햄버거 아이콘을 사용한다는 것을 알 수 있습니다. 스타일을 고려하면 좋은데 모두가 그렇지는 않을 수 있습니다.

MarcLibunao의 Pen Responsive 고정 헤더 탐색 보기

7. Dragoeco 의 반응형 및 터치 친화적

모든 좋은 웹사이트는 기본적으로 터치 친화적이어야 하며 이것이 이 탐색을 디자이너에게 더욱 매력적으로 만드는 이유입니다.

각 링크는 새 페이지로 연결되지만 모든 터치 기반 장치에서 탭하여 드롭다운 메뉴를 쉽게 가리킬 수 있습니다. 이 기능은 탐색 메뉴에 없는 경우가 많으며 드롭다운을 디자인하기 까다로울 수 있는 이유 중 하나입니다.

펜 드롭다운 탐색 보기: Dragoeco의 반응형 및 터치 친화적

8. AnabolicHippo의 간단한 탐색 링크

심플한 네비게이션 메뉴를 생각하면 이런 디자인이 떠오릅니다. 각 링크는 작은 화면에서도 자체 블록 요소로 나타납니다. 햄버거 메뉴와 숨겨진 애니메이션 메뉴 기능이 없습니다. 대신 링크의 크기가 조정되고 별도의 줄로 나뉩니다.

가장 까다로운 부분은 모바일 장치에서 드롭다운 효과를 처리하는 것입니다. 많은 링크에 하위 메뉴가 있으며 더 작은 화면에서도 동일하게 작동합니다.

나는 이것이 하위 메뉴가 거의 또는 전혀 없는 사이트에서 가장 잘 작동한다고 주장하지만, 모바일에서 경험에 대해 어떻게 생각하는지 알아보기 위해 시도해 볼 가치가 있습니다.

AnabolicHippo의 펜 반응형 탐색 메뉴 보기

9. Louis Chenais의 플레이스테이션 커튼 메뉴

개발자 Louis Chenais는 PlayStation 웹사이트를 기반으로 내가 가장 좋아하는 반응형 탐색 중 하나를 만들었습니다. Louis는 이것을 "커튼 메뉴"라고 부릅니다. 여기에서 전체 페이지를 추월하여 보기에 들어옵니다. 이것은 모바일 인터페이스에 일반적이며 웹 디자이너에게도 빠르게 인기를 얻고 있습니다.

제가 정말 좋아하는 것 중 하나는 애니메이션 스타일입니다. 사용자를 지루하게 만들지 않고 링크를 표시할 수 있을 만큼 충분히 매끄럽고 빠릅니다. 그리고 무엇보다도 이것은 프로덕션 웹사이트에서 작동할 수 있을 것 같은 느낌이 듭니다.

펜 반응형 탐색 원리 #3 - Louis Chenais의 커튼 메뉴 보기

10. Samir Alley 의 반응형 메가 메뉴

웹을 검색하고 수백 개의 메가 탐색 메뉴 예제를 찾을 수 있습니다. 이들은 일반적으로 더 큰 블로그와 뉴스 웹사이트에 나타나지만 전자상거래 상점이나 대규모 대행사 사이트에서도 인기가 있습니다. 메가 메뉴에서 가장 어려운 부분은 완전히 반응하도록 만드는 것입니다. 이 작은 스니펫 덕분에 메가 메뉴 디자인을 어떤 화면에도 쉽게 맞출 수 있습니다.

모바일에서는 슬라이딩 탐색을 사용하여 모든 내부 링크를 하나의 메뉴에 표시합니다. 이것은 다소 성가신 것처럼 보일 수 있지만 의미가 있는 경우 jQuery를 사용하여 하위 링크를 숨길 수도 있습니다. 모바일 사용자를 소외시키지 않고 데스크톱에서 메가 메뉴를 실행하는 데 대해 내가 본 최고의 응답 솔루션 중 하나입니다.

펜 반응형 메가 메뉴 보기 – Samir alley 탐색