個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー

CSSだけで作られたオフカンバスメニューをまとめてご紹介します。
「オフカンバスメニュー」は、ボタンを押すと、画面の右や左からメニューがスルリと出てくるメニューのことです。
スマホサイトではユーザーにとって大変使いやすいメニューですが、一方、実装する側も、実装しただけで、サイトがリッチになった気になるので個人的にとても気に入っています。
jQueryを使って実装するタイプのオフカンバスメニューは、「レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16」でも、いくつかご紹介させていただいきましたが、今回、ご紹介するのは、CSSだけで実装できる「オフカンバスメニュー」です。
とある記事(Implementing Off-Canvas Navigation For A Responsive Website – Smashing Magazine)では、CSSだけで実装したほうが表示スピードが上がるといわれているので、下位互換を考えなければ、考慮にいれてもいいかもしれませんね。
ご参考になれば幸いです。

Pure Drawer

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー
実際に利用してみましたが、実装も大変簡単で、既存サイトにもすぐに導入できるお手軽さ。
ボタンの位置も、上左右から選べます。
レスポンシブ対応で、しかも、アニメーションエフェクトが14種類あり、リッチコンテンツを演出してくれます。
ie10以上のモダンブラウザに対応。
Pure Drawer

cssPanelMenu

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー
上部固定メニューで、中央にロゴが入っています。
シンプルながら、使い勝手のいいメニューです。
コードを見ると、「☰」って文字が。
これって、キーボードで入力できるんですね。
cssPanelMenu

Pure CSS Off-screen Navigation Menu

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー
シンプルなタイプですが、詳しいチュートリアルが付いています。
Pure CSS Off-screen Navigation Menu

Implementing Off-Canvas Navigation For A Responsive Website

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー
jQueryを使ったタイプと、CSSだけで実装した場合のメニューの考察記事になっています。
メニュー自体はシンプルですが、指定サイズ以下になると、水平メニューから、トグルボタンに切り替わるので、使い勝手が良さそうです。
もちろん、ソースは以下からダウンロード可能です。
DemoDownloadImplementing Off-Canvas Navigation For A Responsive Website

Off Canvas Menu with Animated Links

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー
シンプルなタイプのオフカンバスメニュー。
Off Canvas Menu with Animated Links

Pure CSS off-canvas menu with flexbox

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー
フレックスボックスで実装されているオフカンバスメニュー。
レックスボックスと一緒に使ったから、どうなんだ?という思いはありますが、大勢に影響はないかとか。
Pure CSS off-canvas menu with flexbox

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 6
  • 11

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」

サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用

記事を読む

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10

好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし

記事を読む

ファイルのウイルス感染を無料でチェックできるオンラインセキュリティー

ファイルのウイルス・マルウエアを無料でスキャンできるオンラインサービス9

ファイルのウイルスやマルウエアを無料でスキャンできるオンラインサービスセキュリティーサービスをご紹介

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール

記事を読む

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む