個人的に役立ったデザイン素材や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
  • 5
  • 9

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

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

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。 アイコン制作手法も様変わりを見せてお

記事を読む

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

2014年に登場したベストなjQueryプラグインを50個ご紹介します。 レイアウト系のプラグイン

記事を読む

HTML5/レスポンシブ/フラットデザインの無料テンプレート50(2013年分)

以前「全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121」という

記事を読む

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレータ

記事を読む

無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」

無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?

記事を読む

CSSで表現されたスゴワザのテキストエフェクト&チュートリアル19

CSS3では、CSSでさまざまなテキストエフェクトを実現することが可能です。 今回は、CSSで表現

記事を読む

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50

2014年登場のCSSツール・サービスはこれ!2014ベストCSSツール・サービス50

2014年に登場したCSS関係のツール、サービスをご紹介します。 CSS3の登場で、CSS関連のツ

記事を読む

無料のスクロール/パララックススクロール系jQueryプラグイン24

スクロール/パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。 今回はそんな魅

記事を読む

CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51

CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。 特に、

記事を読む