今風に作られたスライド式サイドバーのコードスニペット9選

かつてナビゲーションメニューは、画面の上部や左右に固定されていました。しかしモバイル端末が進化した現代は、ハンバーガーメニューとスライド式サイドバーが主流の時代です。

もちろんハンバーガーメニューやスライド式サイドバーは、モバイル端末専用の存在ではありません。PCの画面においても、メニューを隠しておくことでより広くスペースを活用できます。

今回は2019年最新の、モダンなデザインのスライド式サイドバーを9つご紹介します。ユニークなアイデアに基づいたサイドバーを、ぜひ参考にしてみてください。

1. Sidebar template

Azouaoui Mohamedによるサイドバーテンプレートは、ロゴタイプからソーシャルメディアアイコン、検索ボックスまで、必要なものをすべて備えています。

モバイルにもデスクトップにも合うフレキシブルなデザインが魅力。強力なワークフレームであるBootstrap4をベースにしています。

2. Pure CSS Sidebar

シンプルなサイドバーがお好みなら、Jelena Jovanovicの作品がおすすめ。幅広い用途に対応できる、エレガントでシンプルなデザインです。左側からスムーズにスライドするサイドバーには、ナビゲーションやロゴなどの重要な情報だけが含まれています。

さらに注目したいのは、このサイドバーがCSSのみで作られているところ。JavaScriptを使わずにサイドバーを作りたいなら、ぜひ参考にしたい作品です。

3. Flexbox Off Canvas Menu

Pure CSS SlidebarとおなじくCSSのみで作られていますが、この作品にはFlexboxが使われています。

ニュートラルなデザインで、さまざまなメニューが追加できるため、幅広い用途に使えます。

4. sidebar/navbar with ARIA support

今回ご紹介するなかでも、とくに幅が狭いのがこちらのサイドバー。工夫をこらして、省スペースしつつ必要なものはすべてカバーしています。

ARIAをサポートしているところもポイント。画面サイズによってサイドバーの仕様が変化するところにも、こだわりが見られます。

5. CSS sidebar toggle

いままさに人気が高まっている、現代的なデザインのサイドバー。

こちらのサイドバーは画面全体を使っています。美しいデザインと滑らかな動きが特徴です。

6. Responsive sidebar

「サイドバーは左側にあるもの」と思われがちですが、作者のAntonija Šimicは右側にスライドバーを配置しています。

レスポンシブ対応しており、ミニマルで控えめなデザインも魅力的です。

7. Off-canvas sidebar menu

スライド方法がとくにユニークなのが、Devilish Alchemistによるこのサイドバー。

左上のハンバーガーメニューを中心に、回転するような動作でサイドバーがあらわれます。訪問者を楽しませたいなら、ぜひおすすめしたいデザインです。

8. Elastic SVG Sidebar Material Design

さきほどの例と負けず劣らず、とてもユニークなデザインのサイドバー。

ぷるんとした弾力のある動きが特徴です。ぜひ白い部分を左にひっぱって、独特の動きを体験してみてください。

9. Sidebar slide-in-out effect

最後にご紹介するのは、Mari Johannessenによる非常にシンプルなサイドバー。既製のデザインではなく、土台を探しているのであれば、こちらがおすすめです。

メニューなどの要素は含まれていませんが、だからこそカスタマイズの可能性は無限大です。

おわりに

私たちは10年ほど前から、モバイル端末でコンテンツをどのように表示するべきかを模索しつづけ、やっとその方法にたどり着きました。

スライド式のサイドバーはハンバーガーメニューとおなじく、いまやWebデザインには欠かせない存在となっています。今回ご紹介したバラエティ豊かな例を参考に、ぜひユニークなサイドバーを作ってみてください。

（原文：Nataly Birch　翻訳：Nakajima Asuka）

こちらもおすすめ！▼