レスポンシブWebデザインというのは幅に応じて適切なコンテンツの返却が求められます。しかし通常はスマートフォンの幅か否かで一気にデザインが変わったりします。デスクトップとスマートフォンの途中のデザインはあまりありません。あってもタブレットという境が一つ増えるだけです。 PriorityNav.jsはメニュー表示において、まさにレスポンシブなデザインを実現してくれます。

PriorityNav.jsの使い方

PriorityNav.jsの最初の表示です。これはデスクトップ幅の場合。

幅を縮めました。幾つかのメニューが非表示になりました。

消えたメニューはmoreの中に隠れています。

PriorityNav.jsは幅が変わるのに合わせて一気にメニューをハンバーガーにするのではなく表示できないものだけをmoreの中に入れていきます。そして名前の通り、プライオリティの高い順に並べていけば幅が狭くなったとしてもよく使うメニューはワンクリックで辿りつける状態になっています。

PriorityNav.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

PriorityNav.js - Smart responsive navigation gijsroge/priority-navigation