Airbnb 스타일의 Fly out slide 메뉴 적용하기

웹사이트를 모바일에서 쉽게 볼 수 있는 대표적인 두가지 방법이 반응형 웹을 만들거나 ios/android 앱을 만들어 배포하는 것이죠. 이 둘의 기술적인 백그라운드는 다를 지 몰라도 기본적으로 중점을 두는 것은 사용자가 쉽고 편리하게 컨텐츠를 볼 수 있도록 하는 것입니다. 모바일에 최적화된 다양한 기법들이 사용되고 있는데 그 중에서 제가 최근 흥미를 두고 보는 것이 Airbnb 스타일의 fly out slide 메뉴입니다.

Airbnb 앱의 Fly out slide 메뉴

airbnb-fly-out-menu

Dictionary 앱의 Fly out slide 메뉴

dictionary-fly-out-menu

Jquery Fly out slide 데모 및 소스 다운로드

jQuery-CSS3-Fly-Side-Menu

fly out slide 메뉴 플러그인 활용하기

Airbnb 스타일의 Fly out slide 메뉴 만들기

워드프레스용으로 나온 플러그인을 활용하여 간편하게 fly out slide 메뉴를 구현할 수 있네요. 사이트에서 제공하는 데모들을 참고해보세요.

fly out slide 적용 테마

Airbnb 스타일의 Fly out slide 메뉴 만들기

위의 플러그인 datmenu를 패키지로 포함하는 테마입니다. 모바일에서 어떻게 메뉴가 적용되는 지 보려면 직접 모바일에서 데모를 확인하시거나 데스크탑이라면 데모 페이지 위에 메뉴에서 모바일 모양을 누르면 모바일 상태를 볼 수 있습니다.

마치며

모바일은 상대적으로 화면 사이즈가 작기 때문에 컨텐츠를 쉽고 간편하게 제공하려면 모바일에 최적화된 폰트, 줄 간격, 로딩 속도 등 기본적인 것 이외에도 다양한 아이디어가 필요한 것 같습니다. 앞으로도 좋은 정보가 있으면 공유할게요. 그럼 오늘도 즐거운 블로깅 하세요!

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“Airbnb 스타일의 Fly out slide 메뉴 적용하기”에 대한 2개의 생각

  1. 이런 메뉴 괜찮은거 같습니다.
    반응형 웹 사이트를 모바일에서 보면 화면이 좁다보니 메뉴 선택하고 클릭하는 것이 여간 번거로운게 아닙니다. 이럴 때 소개해주신 플러그인을 활용해보면 만족스런 결과가 나오지 않을까 싶네요 ^^

    1. 네, 모바일 메뉴에서 유용하게 활용될 수 있을 것같습니다. 저도 다음에 기회가 되면 저런 메뉴를 적용해보고 싶네요. 🙂

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.