映画の公式サイトで見かけたナビゲーションをスマートフォン限定で集めました。
モーダルウィンドウ
メニューボタンをタップすると画面全体にモーダルウィンドウが開きます。縦の長さに制限がないため、メニュー項目が多い場合にも対応することが可能です。ウィンドウ全面を使用できるため、デザインの自由度も高くなります。
多くはJavaScriptやjQueryを用いて実装されますが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。
映画「Lady Bird」アメリカ公式サイト
映画「否定と肯定」日本公式サイト
映画「ポリーナ、私を踊る」日本公式サイト
ドロップダウン
メニューボタンをタップすると画面の上からスライドしながらメニューが表示されます。モーダルウィンドウと同じくらいの頻度で見かけることが多いメニューです。メニューの幅はサイトによって様々で、メニュー項目が改行しない最低限の幅のサイトもあれば、モーダルのように画面幅いっぱいのサイトもあります。
モーダルメニューと同様に、多くはJavaScriptやjQueryを用いて実装されることが多いメニューですが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。
映画「ネルーダ」日本公式サイト
映画「スマーフ スマーフェットと秘密の大冒険」日本公式サイト
スライドメニュー
メニューボタンをタップすると画面の右または左からスライドしながら、画面の高さいっぱいのメニューが表示されます。モーダルメニュー、ドロップダウンメニューに次いで、映画の公式サイトでよく見かけます。
モーダルメニューと同様に、多くはJavaScriptやjQueryを用いて実装されることが多いメニューですが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。
映画「Woodshock」アメリカ公式サイト
映画「Flatliners」アメリカ公式サイト
映画「The Circle」アメリカ公式サイト
ヘッダーメニュー
メニュー項目が画面上部に水平に一列に並ぶ形です。デスクトップやノートパソコンなどウィンドウ幅が広い場合によく用いられる形で、各コンテンツに容易にアクセスすることができます。ウィンドウ幅の狭いスマートフォンでこの形を用いるにはメニューの項目数に限界があります。映画の公式サイトでの利用は少ない印象です。
シンプルに横一列に並べる場合はCSSのみで実装可能です。
映画「All the Money in the World」アメリカ公式サイト
映画「American Pastoral」アメリカ公式サイト 紹介ページ
リストメニュー
メニュー項目をリスト形式で並べたナビゲーションです。初めから画面上にメニュー項目が見えているため、各ページへのアクセスは容易ですが、メニュー自体へのアクセスはボタンをタップして表示されるタイプと比べるとやや劣ります。
CSSのみで実装可能な一番シンプルなナビゲーションメニューです。
映画「IT イット “それ”が見えたら、終わり。」日本公式サイト
映画「ミックス。」日本公式サイト