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

sidebar
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

ENGINEER

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

もちろんハンバーガーメニューやスライド式サイドバーは、モバイル端末専用の存在ではありません。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)

 

こちらもおすすめ!▼

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア Ads