お勧めなCSSスライド式サイドバー９選

かつて、ナビゲーションメニューは決まってページの一番上に表示されていました。その後、メニューが左か右のカラムに収まっていた時期がありました（中でも特に、左側がメニューのレイアウトが好まれていました）。そして、横からメニューがスライドして出てくる『ドロワーメニュー』の時代が訪れました。突如現れたこのメニューは、とても理にかなっていました。まるでパズルの最後のピースがようやく見つかったかのようです。

 

 

そしてこのドロワーメニューは今や、Webサイトのデザインになくてはならないものとなりました。 ハンバーガーメニューと並び、モバイルフレンドリーなインターフェースに欠かせない役割を果たしています。

 

 

大画面でも極小画面でも見栄えのするデザインにしたいとき、このメニューが最も適した手段の1つなのです。スペースが限られるモバイルの小さな画面で色々試して見つかった、文句の付けようがない落としどころだと言えるでしょう。おかげで私たちは何も無駄にすることなく、必要な要素をメニューの中に収めることができるのです。

 

 

デスクトップPCの大きな画面でも同じことが言えます。その理由は簡単です —— 誰もがユーザーに、素晴らしい第一印象を与えたいと考えているからです。そして、このスゴイ技術を以てすれば、不可能を可能にすることができます。想像力に任せてより良いものを作り上げられるでしょう。

 

 

そういうわけで、ドロワーメニューは優秀なツールなのです。 そのままコピペしてもカスタマイズしても使える便利なコードスニペットを、自分のツールキットにいくつか加えておいて損はないはずです。今回はそんなドロワーメニューの中でも、「横からスライドインする」タイプを９件ご紹介します。

 

 

webサイト制作やモバイルアプリのインターフェース等にぜひご活用ください。それでは行ってみましょう！

 

 

 

１．Sidebar template by azouaoui Mohamed

See the Pen
Sidebar template by azouaoui mohamed (@azouaoui-med)
on CodePen.

高機能なサイドバーテンプレート。ロゴマークからソーシャルメディアアイコン、検索機能などなど、メニューとしての要素と機能を一通り備えているため、すぐに使うことができます。

 

 

その上モバイルとデスクトップ、両方の画面で見栄え良く仕上がっている、完璧なパネルです。また、CSSフレームワークの中でも人気の高いBootstrap 4に基づいているため、レスポンシブ対応も安心です。

 

 

 

２．Pure CSS Sidebar by Jelena Jovanovic

See the Pen
PURE CSS SIDEBAR TOGGLE MENU by Jelena Jovanovic (@plavookac)
on CodePen.

先ほどの「サイドバーテンプレート」よりもっと簡単で扱いやすいものが良いなら、こちらのCSSだけで作ったドロワーメニューがオススメです。

 

 

左側からスムーズにスライドし、ナビゲーションやロゴなどの重要な情報だけが含まれています。エレガントかつシンプルな見た目で、様々なプロジェクトに対応可能でしょう。

 

 

そして最も優れた部分は、すべてがCSSだけでできている点です。JavaScriptを使わずにwebサイトを構築したいなら、ぜひお試しいただきたいスニペットです。

 

 

 

３．Flexbox Off Canvas Menu by OK

See the Pen
Flexbox Off Canvas Menu by OK (@oknoblich)
on CodePen.

こちらもすべてCSSのみで作成されたメニューです。１つ前のスニペットとの違いは、CSS3の中でも優秀な機能1つである「Flexbox」を利用している点です。

 

 

全体的にモノクロ調のデザインで、内部にはナビゲーションリンクをすべて追加することができます。これを導入すれば、数多くのありふれた問題を素早く解決してくれることでしょう。

 

 

４．sidebar/navbar with ARIA support by Ferran Buireu

See the Pen
Vertical/Horizontal responsive sidebar/navbar with ARIA support by Ferran Buireu (@fbuireu)
on CodePen.

一時はあまり見かけなくなった幅の狭いメニューバーですが、その有用さが見直されて復活しつつあります。

 

 

この「極細サイドバー」は、その小さなサイズにもかかわらず、必要な要素を全てカバーすることができます。あまり手間をかけずにロゴと小さなアイコンメニューが設置できるのがこのスニペットの魅力です。

 

 

さらに、ハンディキャップを持つ人々をアクセス可能にする仕様書「ARIA」（Accessible Rich Internet Applications）のサポートも追加されており、本当に有能なサイドバーです。

 

 

 

５．CSS sidebar toggle by Silvestar Bistrović

See the Pen
CSS sidebar toggle by Silvestar Bistrović (@CiTA)
on CodePen.

モダンなドロワーメニューをもうひとつご紹介します。こちらのスニペットは開発者の間で人気が高まってきています。

 

 

前述の極細サイドバーは狭いパネルだけでしたが、こちらは画面いっぱいに広がるため、大きなスペースが確保できます。見た目もデザインが美しく、スライドアウト時のエフェクトが滑らかです。

 

 

 

６．Responsive sidebar by Antonija Šimić

See the Pen
Responsive sidebar revealed on click and key press by Antonija Šimić (@tonkec)
on CodePen.

そろそろ左側からのスライドアウトにうんざりしてきた頃でしょうか？今度は右から開くのがデフォルトのドロワーメニューです。

 

 

シンプル＆ミニマルで控えめのデザインが素敵な上、今ではどんなプロジェクトにも必須となったレスポンシブにも対応です。

 

 

 

７．Off-canvas sidebar menu by Devilish Alchemist

See the Pen
Offcanvas sidebar menu with a twist by Devilish Alchemist (@devilishalchemist)
on CodePen.

ここまででご紹介したものは全て、横方向にまっすぐスライドする「普通の」ドロワーメニューでした。しかし時には、「普通」から抜け出したくて苦労することがあるでしょう。

 

 

このスニペットは難しい手間をかけなくても、ユーザーをびっくりさせられるデザインをしています。このサイドバーは右側から開きますが、横方向ではなく回転して開きます。メニューは三角形の形をしており、すべての要素が一番下に配置されています。ユーザーを退屈させない、遊び心のあるおもしろいスニペットです。

 

 

 

８．Elastic SVG Sidebar Material Design by Nikolay Talanov

See the Pen
Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez)
on CodePen.

ひとつ前と同じように、平凡なスライドアウトエフェクトから抜け出したい人にピッタリのモバイル向けスニペット。

 

 

SVGを利用した、ゴムのように弾む見た目のドロワーメニューです。白い部分を右へスワイプすると、楽しい動きでメニューが開きます。

 

 

 

９．Sidebar slide-in-out effect by Mari Johannessen

See the Pen
Sidebar slide-in-out effect by Mari Johannessen (@marijoha)
on CodePen.

最後は、スライドアウト機能だけのスニペット。あなたが今までのような既製のメニューを必要せず、しっかりとした基盤の上で何か新しいことをしたいと考えているならば、こちらがまさにあなたの必要とするものでしょう。

 

 

このスニペットはシンプルかつ純粋で、内部には飾りも何もありません。スライドアウトエフェクトだけの、シンプルなドロワーメニューです。

 

 

 

終わりに

ドロワーメニューはハンバーガーアイコンと並び、現在のWebデザインには欠かせない部品の一つです。今ではこの２つは、どのインターフェイス上でも見かけるようになりました。

 

 

モバイルデバイスが台頭してきた約10年前は、その小さな画面にインターフェイス上のコンテンツをどうやって収めれば良いか分かりませんでした。この２つの発明によってこの問題は解決し、そして今日でも、この分野で有効な手段であり続けています。