| Line 45: | Line 45: | ||
} | } | ||
| − | + | #sun-col { | |
| − | { | + | |
-webkit-column-count:2; /* Chrome, Safari, Opera */ | -webkit-column-count:2; /* Chrome, Safari, Opera */ | ||
-moz-column-count:2; /* Firefox */ | -moz-column-count:2; /* Firefox */ | ||
| Line 52: | Line 51: | ||
} | } | ||
| − | + | #sun-col p { | |
| − | { | + | |
padding-left: 0px; | padding-left: 0px; | ||
} | } | ||
| + | |||
}} | }} | ||
Drawer는 작은 화면에서 효과적으로 자주 사용하는 기능 및 정보를 표시할 수 있는 패턴이다. 주로 현재 페이지를 어느 정도 유지한 채 같은 화면에 숨겨진 페이지를 띄워 보여준다. | Drawer는 작은 화면에서 효과적으로 자주 사용하는 기능 및 정보를 표시할 수 있는 패턴이다. 주로 현재 페이지를 어느 정도 유지한 채 같은 화면에 숨겨진 페이지를 띄워 보여준다. | ||
| Line 69: | Line 68: | ||
* 숨겨진 페이지가 표시되어도 현재 페이지를 살짝 유지함으로써, 일시적인 호출이며 마지막 위치가 항상 유지되고 있다는 느낌을 준다. | * 숨겨진 페이지가 표시되어도 현재 페이지를 살짝 유지함으로써, 일시적인 호출이며 마지막 위치가 항상 유지되고 있다는 느낌을 준다. | ||
=== Example : iPhone_Yahoo === | === Example : iPhone_Yahoo === | ||
| − | {{#Widget:Vimeo|id=95772659|width= | + | {{#Widget:Vimeo|id=95772659|width=259|height=455}} |
---- | ---- | ||
== Drawer(Slide Hidden Menu) == | == Drawer(Slide Hidden Menu) == | ||
| − | <div | + | <div id="sun-col"> |
=== iPhone_Gmail === | === iPhone_Gmail === | ||
| − | {{#Widget:Vimeo|id=95772492|width= | + | {{#Widget:Vimeo|id=95772492|width=259|height=455}} |
=== iPhone_BuzzFeed === | === iPhone_BuzzFeed === | ||
| − | {{#Widget:Vimeo|id=95773016|width= | + | {{#Widget:Vimeo|id=95773016|width=259|height=455}} |
=== iPhone_MyFitnessPal === | === iPhone_MyFitnessPal === | ||
| − | {{#Widget:Vimeo|id=95776698|width= | + | {{#Widget:Vimeo|id=95776698|width=259|height=455}} |
=== iPhone_Google-Docs === | === iPhone_Google-Docs === | ||
| − | {{#Widget:Vimeo|id=95772952|width= | + | {{#Widget:Vimeo|id=95772952|width=259|height=455}} |
<!-- | <!-- | ||
=== iPhone_Tinder_3 === | === iPhone_Tinder_3 === | ||
| − | {{#Widget:Vimeo|id=95772230|width= | + | {{#Widget:Vimeo|id=95772230|width=259|height=455}} |
=== iPhone_ENow_5 === | === iPhone_ENow_5 === | ||
| − | {{#Widget:Vimeo|id=95771492|width= | + | {{#Widget:Vimeo|id=95771492|width=259|height=455}} |
=== iPhone_ENow_1 === | === iPhone_ENow_1 === | ||
| − | {{#Widget:Vimeo|id=95771288|width= | + | {{#Widget:Vimeo|id=95771288|width=259|height=455}} |
=== iPhone_FOX-NOW_1 === | === iPhone_FOX-NOW_1 === | ||
| − | {{#Widget:Vimeo|id=95771003|width= | + | {{#Widget:Vimeo|id=95771003|width=259|height=455}} |
=== iPhone AskForTask 3 === | === iPhone AskForTask 3 === | ||
| − | {{#Widget:Vimeo|id=95762142|width= | + | {{#Widget:Vimeo|id=95762142|width=259|height=455}} |
--> | --> | ||
</div> | </div> | ||
---- | ---- | ||
== Drawer(Overay Hidden Menu) == | == Drawer(Overay Hidden Menu) == | ||
| − | + | <div id="sun-col"> | |
=== iPhone 911MemorialMuseum === | === iPhone 911MemorialMuseum === | ||
| − | {{#Widget:Vimeo|id=95762045|width= | + | {{#Widget:Vimeo|id=95762045|width=259|height=455}} |
=== iPhone_Seene === | === iPhone_Seene === | ||
| − | {{#Widget:Vimeo|id=95777540|width= | + | {{#Widget:Vimeo|id=95777540|width=259|height=455}} |
=== iPhone_HuffPost === | === iPhone_HuffPost === | ||
| − | {{#Widget:Vimeo|id=95773784|width= | + | {{#Widget:Vimeo|id=95773784|width=259|height=455}} |
=== iPhone_FoxNews === | === iPhone_FoxNews === | ||
| − | {{#Widget:Vimeo|id=95773501|width= | + | {{#Widget:Vimeo|id=95773501|width=259|height=455}} |
=== iPhone_Groupon === | === iPhone_Groupon === | ||
| − | {{#Widget:Vimeo|id=95772877|width= | + | {{#Widget:Vimeo|id=95772877|width=259|height=455}} |
=== iPhone_Gogobot === | === iPhone_Gogobot === | ||
| − | {{#Widget:Vimeo|id=95770896|width= | + | {{#Widget:Vimeo|id=95770896|width=259|height=455}} |
| − | + | </div> | |
<!-- | <!-- | ||
=== iPhone_USAToday_2 === | === iPhone_USAToday_2 === | ||
| − | {{#Widget:Vimeo|id=95773661|width= | + | {{#Widget:Vimeo|id=95773661|width=259|height=455}} |
=== iPhone_Bloomberg_2 === | === iPhone_Bloomberg_2 === | ||
| − | {{#Widget:Vimeo|id=95774030|width= | + | {{#Widget:Vimeo|id=95774030|width=259|height=455}} |
--> | --> | ||
== Insert Hidden Menu == | == Insert Hidden Menu == | ||
| − | + | <div id="sun-col"> | |
=== iPhone_Yummly === | === iPhone_Yummly === | ||
| − | {{#Widget:Vimeo|id=95774182|width= | + | {{#Widget:Vimeo|id=95774182|width=259|height=455}} |
=== iPhone Calendars5 === | === iPhone Calendars5 === | ||
| − | {{#Widget:Vimeo|id=95762262|width= | + | {{#Widget:Vimeo|id=95762262|width=259|height=455}} |
| + | </div> | ||
Drawer는 작은 화면에서 효과적으로 자주 사용하는 기능 및 정보를 표시할 수 있는 패턴이다. 주로 현재 페이지를 어느 정도 유지한 채 같은 화면에 숨겨진 페이지를 띄워 보여준다.
숨겨진 페이지를 표시하는 방식에서 여러가지 트랜지션이 사용되는데 Slide방식이 주로 사용되며, 최근 Overlay/Insert 등의 트랜지션을 사용한 사례도 많아지고 있다.
Drawer를 호출하는 버튼은 주로 일명 '햄버거'로 불리는 아이콘의 버튼이 사용된다.