Categoryメニュー

スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」

Drawer Slide Menu | jQuery plugin for responsive menu

Facebookなどスマホページでメニューアイコンをクリックすると、横からメニューがにゅるっと出てくるのがあります。これをドロワー(ナビゲーションドロワー)というそうです。

drawerというのは、英語で引き出しという意味。意味をきくと納得ですね〜。

そのドロワーを簡単に実装できるのがこのjQueryプラグイン「Drawer Slide Menu」です。設置の仕方も簡単です。

サンプルを作りましたので、ご覧いただけるとわかりやすいと思います。スマホからもPCからも動作が確認できます。

⇒ スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル


使い方も簡単。すぐに使えて動作も快適です。jQueryプラグイン「Drawer Slide Menu」の使い方は続きをご覧下さい。

→「スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」」の続きを読む

スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」

jQueryプラグイン「stickUp」はページの上部にメニューを固定して表示させることができるjQueryプラグインです。

ワンページスクロールサイトのみならず、縦長にコンテンツがあるページにメニューを固定させて表示させておくというのは、最近よく使われる手法です。

サンプルを作ってみましたので、みてもらうとわかりやすいと思います。

⇒ スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」サンプル


設置の仕方も簡単にできる便利なjQueryプラグインです。

→「スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」」の続きを読む

にゅるっと出てくるスマホで便利なお洒落メニュー「Animated Border Menus 」

スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。

メニューアイコンをクリックすると、にゅるっと動いて各メニューが現れます。スマホファーストのお洒落なサイトに良いのではないでしょうか。もちろん、パソコンでもいい感じです。

サンプルをご覧下さい。> にゅるっと出てくるスマホで便利なお洒落なメニュー「Animated Border Menus 」サンプル


パソコンの古いブラウザでは動きません。スマホやタブレットでは大丈夫でしょう。

→「にゅるっと出てくるスマホで便利なお洒落メニュー「Animated Border Menus 」」の続きを読む

メニューが飛び出すjQueryプラグイン「Pop Circle」

Pop Circle

クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。

中央の円(トリガー)をクリックすると、それを囲む様にメニューが飛び出します。メニューの飛び出す方向は、円状の、半円、1/4円に変更することが出来ます。

まずはサンプルをご覧下さい。

→ メニューが飛び出すjQueryプラグイン「Pop Circle」サンプル

アニメーションするスピードや飛び出すときの効果などもカスタマイズできます。

メニューに使うのもよし、イメージギャラリーにするのもよし、アイデア次第ではサイトにユニークな演出を与えることができそうです。

設置方法は続きをご覧下さい。

→「メニューが飛び出すjQueryプラグイン「Pop Circle」」の続きを読む

超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』


SMINT

メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。

スクロールさせても、ナビゲーションバーがページの上部に固定されます。

サンプルをご覧下さい。

→ 超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル


ワンページスクロールサイトの人気はまだまだ続いていますね。ワンページスクロールサイトは訪問者にとって迷いにくいデザインです。必要な情報を確実に見て貰いたいという場合には有効です。

一から作ろうとすると意外と手間のかかるナビゲーション付きワンページスクロールサイトですが、このjQueryプラグインを使用すると簡単です。

それでは、設置方法の説明をします。

→「超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』」の続きを読む

ボタンひとつで呼び出せるクイックアクセスメニュー『jQuery HoverMenu』

HoverMenu

ページ上の好きな所で、ボタンひとつでメニューを呼び出して表示することができたら便利だと思いませんか?

今回ご紹介する『jQuery HoverMenu』は、Ctrlキーを押すことで簡単にメニューが呼び出せるものです。

サンプルを見て頂いたほうがわかりやすいと思います。

ボタンひとつで呼び出せるクイックアクセスメニュー『jQuery HoverMenu』サンプル


デフォルトではCtrlキーが対応していますが、割り当てるキーの変更も可能です。

→「ボタンひとつで呼び出せるクイックアクセスメニュー『jQuery HoverMenu』」の続きを読む

レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」

Responsive Multi-Level Menu | Codrops

今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。

限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。

まずは、サンプルをご覧下さい。

レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル


古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。

→「レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」」の続きを読む

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』


Sidr

スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。

FacebookのページやYouTubeでも使われていますね。画面の広さが限られたなかでは、必要となってくる機能です。

今回はこのメニューをjQueryプラグインを使って簡単に作ってしまいましょう。

サンプルを2つ作ってみました。

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その1

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その2



設置もとても簡単です。

→「クリックすると横からメニューが現れるjQueryプラグイン『Sidr』」の続きを読む

画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。

画像にカーソルを合わせると画像が変わるというという効果を「ロールオーバー」といいます。

メニューやカートに入れるなどのボタンでもよく使われていますね。

画像のロールオーバーはCSSやJavaScript(jQuery)を使用して実装することができますが、「smoothRollOver.js」というjQueryプラグインを使用すると、比較的カンタンに実装できる上にロールオーバー効果をなめらかにすることが出来るようです。

今回は、jQueryのみのロールオーバー時と「smoothRollOver.js」プラグインを利用したロールオーバー時がどの程度違うかを比較するために、実装方法も合わせて説明したいと思います。

まずはサンプルを作ってみました。

1. jQueryでのロールオーバーサンプル


2.「smoothRollOver.js」を利用したロールオーバーサンプル


好みもあると思いますので、好みやデザインに合わせて使い分けたいですね。

それぞれの設定方法は続きをご覧下さい。

→「画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。」の続きを読む

スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』

サイドバー風のナビゲーションパーツをスクロールさせても一定の場所に固定してくれるのが、このjQueryプラグイン『stickyMojo』です。動作も軽くスムーズで、違和感がない固定のサイドナビゲーションが実装できるので便利です。

サンプルを作ってみました。

→ 「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」サンプル


フッターのコンテンツまでくると、フッターと重ならないように調整してくれますね。このように画面をリサイズしてもメインコンテンツと重ならない、またフッターコンテンツと重ならないように固定できます。

設置の仕方も簡単です。

→「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」の続きを読む