on:2013年6月19日sponsorsデスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。Navigation下記は各ポイントを意訳したものです。-次のプロジェクトの開始にブロックレベルのメニューまずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。Cseteこのサイトは3つのブレイクポイントを持っています。ナビゲーションは常にブロックをベースとしており、小さいサイズになるとロゴの下に重要なリンクが表示されます。keskinインライン要素をブロックにしたパターンです。インラインにすると、パターンの再編成が簡単になり、さまざまなサイズに簡単に最適化できます。小さいサイズ時のナビゲーション凝縮するナビゲーションナビゲーションを凝縮するアイデアは、表示サイズに併せて配置を再編成する時にリンクをより小さいスペースにします。一般的にはヘッダエリアに水平型のナビゲーションを配置する際に、このテクニックを使います。凝縮する際は、適切なパディングを保持したままレイアウトを崩さないようにします。Russellナビゲーションのアイテムは4つだけで、パディングを調整しながら表示サイズに合わせてナビゲーション全体が凝縮されます。小さいサイズ時のナビゲーションBodhumこのサイトもアイテムは4つだけで、カラーを使うことでナビゲーションリンクのそれぞれを区別する助けになります。表示サイズを変更すると、それに合わせて少しずつパディングを減らし、余分なスペースが変更されます。小さいサイズ時のナビゲーションフォームのセレクトメニューフォームのセレクトメニューは、WordPressのテーマの多くに利用されるポピュラーなテクニックです。省スペースにたくさんのアイテムを格納できます。Blogセレクトメニューで一番大切なポイントは、それがナビゲーションであることをユーザーに伝えることです。ラベルをしっかりと明示し、それがナビゲーションであることを伝えるように、レイアウトをデザインする必要があります。Magazineもセレクトメニューのようですが、変更されていました。検索ボックスもデザインが変更されているので、リニューアルでしょうか。小さいサイズ時のナビゲーション非表示のドロップダウンナビゲーションを隠す時、2つの素晴らしいテクニックがあります。その一つがこの方法で、ナビゲーションボタンをタップすることで、ドロップダウン型のナビゲーションが表示されます。Awardsボタンをタップすると、上部からナビゲーションが表示されます。アニメーションを使うのは非常に効果的です。Houseこのタイプのナビゲーションはポートフォリオや個人ブログに向いていると思います。これらのサイトは多くのリンクを必要とせず、メニューはページの高さを超えることはないでしょう。小さいサイズ時のナビゲーションスライドするナビゲーションボックスナビゲーションを隠すもう一つのテクニックが、このスライドするナビゲーションです。これは上記のものとは異なり、ボタンをタップするとサイドやトップからスライドインします。HRスマフォのサイズになると、ナビゲーションがボタンに変わり、それをタップすると上部からナビゲーションがスライドインします。小さいサイズ時のナビゲーションSequenceデスクトップ時は水平型のナビゲーションで、スマフォ時になると左角にボタンが表示されます。これをタップすると、左からナビゲーションのパネルがスライドインします。-次のプロジェクトの開始にレスポンシブ対応のデザインは何年もの間存在していましたが、特に2012年の去年から拡大したように思います。これらのナビゲーションのトレンドが、次のプロジェクトを開始するための出発点になることを希望します。考慮すべき重要なポイントは、リンクのデザインをどのようにレイアウトの中でフォーマットされるべきです。レスポンシブのアイデアに時間をかけることは、最終のプロダクトを美しいものにするでしょう。