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

2013/12/18

レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17（ソースファイル付き）

レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではないでしょうか。
自分でメニューをレスポンシブ対応にさせるのもいいですが、レスポンシブ対応のメニューも類型化されてきていますので、ユーザーとしても一般的なメニューのほうが使いやすいですよね。
そこで今回は、そんな類型化されたレスポンシブWEBデザイン対応メニューの詳しいチュートリアルとソースファイルがついているサイトをご紹介します。
チュートリアルを使って学ぶもよし、ソースファイルを利用してプロジェクトに活かすものよし。
いずれにしてもとっても役だつサイトばかりです。
これからレスポンシブWEBデザインに取り組もうという方も、ぜひ見てみてくださいね。

Creating a CSS3 Responsive Menu

responsive_menu_11_thumb
アイコン付きのメニュー。
4段階のブレークポイントで、モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

Creating a Responsive Menu Tutorial

responsive_menu_12_thumb
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead Morel

CSS3 Responsive Menu

responsive_menu_14_thumb
多階層に対応したドロップダウンメニューメニュー。
横並びのメニューから、1つのブレークポンとで縦並びになるタイプです。
DemoRead More

Create an Absolute Basic Mobile CSS Responsive Navigation Menu

responsive_menu_15_thumb
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

Responsive Retina-Ready Menu

responsive_menu_16_thumb
アイコン付きで、軽快なアニメーションが超クールなメニュー。
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

Responsive Navigation Menu Tutorial

responsive_menu_5_thumb
横並びのメニューから、1つのブレークポンとで縦並びになるタイプです。
DEMORead More

Big Menus, Small Screens: Responsive, Multi-Level Navigation

responsive_menu_6_thumb
多階層に対応したドロップダウンメニュー。
モバイルではメニューボタンのみが表示されるタイプです。
DaEMORead More

FlexNav Mega Menus

responsive_menu_7_thumb
多階層に対応したドロップダウンメニューメニュー。
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

Drop-Down Navigation: Responsive and Touch-Friendly

responsive_menu_8_thumb
多階層に対応したドロップダウンメニューメニュー。
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

Responsive Navigation

responsive_menu_9_thumb
超軽量なのが特長のプラグイン。
サイドメニューが、モバイルではメニューボタンになるタイプです。
DEMORead More

Responsive Menu Concepts

offcanvas-open
ノーマルメニュー、セレクトタイプ、ドロップダウン、オフカンバスの4種類のメニューが揃っています。
DEMO:Full HorizontalDEMO:SelectDEMO:Custom DropdownDEMO:Off CanvasRead More

CSS: Responsive Navigation Menu

responsive_menu_28_thumb
モバイルではメニューボタンのみが表示されるタイプですが、右寄せ、センター、左寄せレイアウトからなっています。
DEMORead More

CSS only responsive navigation

responsive_menu_21_thumb
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

Building an HTML5 responsive menu with media queries and JavaScript

responsive_menu_22_thumb
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

How to Build a Responsive Slide-Down Navigation Menu

responsive_menu_23_thumb
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

A free jQuery Responsive Menu plugin

スクリーンショット-2013-12-15-17.33.06
多階層に対応したドロップダウンメニューメニュー。
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

A Responsive Design Approach for Navigation, Part 1

スクリーンショット-2013-12-15-17.33.59
モバイルではメニューボタンのみが表示されるタイプです。
DEMORead More

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

  • 0
  • 0
  • 21
  • 35

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

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

WEBデザインの勉強・参考に！プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に！プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

2013年のベストjQueryプラグイン47

2013年も残すところわずかになりました。 今年もたくさんのjQueryプラグインが発表されていま

記事を読む

レスポンシブWEBデザインの確認に最適！スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適！スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ

記事を読む

画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法

アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を

記事を読む

無料で利用できる検索フォーム12（CSS3,HTML5,jQuery）

検索フォームはサイトに欠かせない重要な要素の1つになっています。 最近では、アニメーションを用いた

記事を読む

参考にしたい！シンプルで美しいWEBデザイン50(〜2014.02)

2014年2月現在までに公開されているサイトのうち、美しくスッキリしたデザインをコレクションしてみま

記事を読む

CSSスプライト作成の決定版！これ以上ない使いやすさの「Spritebox」

CSSスプライト作成の決定版！これ以上ない使いやすさの「Spritebox」

CSSスプライトを誰でも簡単に、しかも見やすく生成できてしまうツールのご紹介です。 CSSスプライ

記事を読む

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

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

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

記事を読む

オフラインでも便利なChrome機能拡張おすすめアプリ10

ネットが便利なのは言うまでもありませんが、場所の制約からネット回線につながらないときがあります。

記事を読む

CSSアニメーションを使ったエフェクトライブラー9

CSSアニメーションを使ったエフェクトライブラリー9

CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい

記事を読む

前の記事

次の記事