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

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

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

レスポンシブ対応のコンテンツスライダー/スライドショーベスト8

以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」

記事を読む

ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

ナビゲーションメニューのプラグインやデモ、チュートリアルが90以上コレクションされたサイトをご紹介し

記事を読む

人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類

記事を読む

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表27

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25

海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ

記事を読む

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

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

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

記事を読む

CSSだけで作られた決済代行・クレジット決済サービスアイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC

記事を読む

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider.com」

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

日本でプログラミングを学ぶなら、ドットインストールが有名ですよね。 海外でもプログラミングを学ぶう

記事を読む

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

無料でオリジナルなクイズが作れてしまうツール「QuizGenerator」

無料でオリジナルなクイズが作成できるツール「QuizGenerator」

無料でオリジナルなクイズが、簡単に作成できるツールをご紹介します。 作れるクイズは選択式、穴埋め、

記事を読む