スマートフォンやタブレットが増えるのに伴ってWebの世界ではレスポンシブなデザインが求められるようになってきました。単に各デバイスに向けて最適化するだけでなく、情報の整理も大事な要件になっています。 今回はWebサイトをレスポンシブにする上での面白いソフトウェア、GreedyNavを紹介します。このアイディアはなかなかイケてますよ。

GreedyNavの使い方

GreedyNavを適用しているサイトです。上のメニューに注目です。

幅を狭めました。

さらに狭めました。

縮んだ分はクリックすると出てきます。

GreedyNavは画面の幅によってメニューを出す個数を可変できるのがポイントです。つまり左側から大事なメニューを並べていくことで、スマートフォンやタブレットでも操作性を損なうことなく使えるようになります。

GreedyNavはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

CodePen - Greedy Navigation lukejacksonn/GreedyNav