반응형 웹사이트 네비게이션 메뉴 아이디어 1 │ NANATI's STORY

반응형 웹사이트의 네비게이션 메뉴라고 하면 햄버거 메뉴(drawer button)가 가장 먼저 생각나게 됩니다. 그런데 최근에는 틀에 박힌 햄버거 메뉴만이 아닌 컨텐츠나 계층구조에 맞춘 네비게이션 메뉴가 늘어나고 있습니다.

최근의 반응형 웹사이트에서 접할 수 있는 네비게이션 메뉴 아이디어를 소개하고자 합니다. 각 페이지에서 코드에 대한 설명을 보거나 직접 다운로드 할 수 있습니다. 무척 편리하네요~

Stripe.Com Navigation

Stripe.com에서 사용되고 있네요. 각 아이템의 드롭다운 메뉴와 움직임으로 새로운 느낌의 네비게이션 메뉴가 되었습니다. 컨텐츠에 맞춰 디자인을 변경했습니다. 작은 화면에서는 디자인이 다른 각각의 메뉴가 깔끔하게 정리 되었습니다.

페이지 스크롤을 내리면 헤더부분이 자동적으로 비표시가 됩니다. 위로 스크롤을 하면 바로 다시 나타납니다. PC화면에서는 상단에 픽스된 메뉴도 그다지 신경쓰이지 않을 정도의 영역이지만, 스마트폰 등의 작은 화면에서는 유용한 기술입니다.

반응형웹 대응의 심플한 탭 메뉴입니다. 클릭 후 탭 이동이 부드럽게 넘어갑니다. 작은 화면에서는 아이콘을 활용한 탭 디자인으로 변경됩니다.

사이드바 메뉴가 슬라이드 아웃 되는 타입의 네비게이션 메뉴입니다. 마우스를 가져가면 아이콘만이 표시되고, 다음 액션에서 아이콘과 함께 메뉴가 표시됩니다.

하위메뉴를 선택하면 계층형 구조로 탭이 쌓이는 네비게이션 메뉴입니다. 익숙한 조작방법은 아니지만 반응형웹에서 잘 활용하면 멋진 사이트를 제작할 수 있을 것 같네요.

좌우로 슬라이딩 메뉴가 표시됩니다. 심플한 코드로 수정도 편할 것 같네요.