Categoryメニュー

クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』

今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。

サンプルをみてもらうとわかりやすいと思います。

「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』サンプル」


レスポンシブ対応のドロップダウンメニューですので、スマホなどでも綺麗に表示されます。jQueryプラグインは使用していません。

→「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』」の続きを読む

テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」


Sliding Letters with jQuery

「Sliding Letters with jQuery」を利用すると、マウスオーバー(テキストにカーソルを合わせたとき)にお洒落にテキストがが変化します。

ちょっと大胆なメニューやリンクテキストを強調させるのに使えそうです。少しHTMLとCSSがいじれれば簡単にアレンジができます。

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

→ テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル


ポートフォリオサイトだけでなく、美容室やサロンなどのおしゃれ系なサイトに活用できそうです。背景画像も設定できるので、イメージに合わせて背景画像も変えてみて下さい。

→「テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」」の続きを読む

観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」


Jquery Interactive Animated Menu

メニューがゆっくり回転するアニメーションになっています。
この「Jquery Interactive Animated Menu」を利用すれば簡単に実現できます。

CSSや画像を少し変更するだけでも、ユニークなトップページが作れますので、専門的な知識がなくても使われている画像を変更したりして利用できると思います。ポートフォリオ用のサイトにも適してそうですね。

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

→ 観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」サンプル


サンプルは使われている画像を変更しただけです。

最新のブラウザに対応していますので、古いブラウザでは動作しない場合があります。

この「Jquery Interactive Animated Menu」の入手方法と利用方法は続きをどうぞ。

→「観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」」の続きを読む

Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」


Nice “Flashy” menu with Jquery.

jQueryでまるでFlash(フラッシュ)で作ったかのようにアニメーションする動きのあるメニューを導入できる「Nice “Flashy” menu with Jquery」を紹介します。

メニューにマウスオーバーしたときにカッコ良くアニメーションします。

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

→ Flashのようなクールなメニューナビゲーションを実現「Nice “Flashy” menu with Jquery」サンプル


背景画像をウィンドウズサイズの大きさにあわせて表示する機能も付いていますので、これを利用するだけで見栄えのするトップページが作れてしまいます。

美容やファッション、レストランなどお洒落なサイトに良さそうですね。

このFlash(フラッシュ)のようなjQueryメニューナビゲーションの設置方法は続きをどうぞ。

→「Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」」の続きを読む