ShopifyやECサイトなどで使われているスマホメニューで子階層を開くと別ウィンドウに切り替わるタイプのUIがあります。
通常のサイトではあまり使われないのですが、メニューの項目が多く、階層を持っていると便利なUIです。
簡単に実現する方法は無いのか？と思って検索したのですが、キーワードがあってないのかなかなか見つかりませんでした。
ようやく見つけたのが以下のページです。
push式のメニュー
子階層を開くときにページ切り替えがあるものを、push式のメニューと呼ぶらしい。
jQueryで実装されたpush式メニュー
参照先のリンクが切れていたけど、検索すると以下のページが本物らしい。
jQueryを使ったライブラリで、かなり昔からあるもののようで、10年前ぐらいに更新が止まっています。
Vanilla JSで実装されたpush式メニュー
他にもないのか？と探して見つけたのが、コレ。
こちらは、TypescriptなのでVanilla jsで書かれています。2年前に更新が止まってますが、比較的新しい部類です。
push式のメニューを既存のメニューに適用するには、かなりHTMLの修正が必要になります。
自分で一からコーディングしているのであれば比較的導入しやすいものであると思います。
しかし、有料テーマなどでメニューの構造が簡単に変えられない場合は、フックを使ったり、javascirptでDOM操作するなどの対応が必要になりそうです。
有料のプラグイン:mmenujs
サブメニューをスライドで表示する有料のメニュープラグインがあります。
このプラグインは、機能が削減された無料版もあり、Wordpressのプラグインとしても用意されています。
このjavascriptは有料版ですので、一番メンテナンスされていて、安定していると思います。
必要なマークアップも必要最低限です。
まとめ
あまり使う場面はないかもしれませんが、メニュー項目が多く、階層も深い場合はスマホメニューで取り入れると便利だと思います。
このpush式のメニューを自分でゼロから実装する場合は、メニューの構成を限定してしまえばそれほど難しくはない気がしますが、既存のjavascriptライブラリがあることを知っていれば、どちらを使うのか検討できますので、覚えておいて損は無いでしょう。
