Blog

よく使用している汎用的で簡単なjQueryのコード

2012.04.25Cat:jQuery デザイナー

僕がよく使用しているjQueryで汎用的なコードを紹介します。

 

jQueryで簡単に実装できるので、プラグインなんかを使用するよりは、
自分で書いた方が、ごちゃごちゃせずに済んで良いと思います。

 

・ドロップダウンメニュー
・アコーディオンコンテンツ
・ページ内スクロール

 

全部実装したサイトがサンプルでありますので、
そちらもご覧ください。

 

DEMO

 

まずは、

ドロップダウンメニュー

 

シンプルに、メニューにホバーすると、その下のメニューがアニメーションして出てくるというものです。

サンプルサイトでは、[about][service][product]の部分になります。

 

jquery

要は、#globalnaviの中のliをホバーすると、その中の子要素のulが表示されるっていうソースです。

他のhome等のメニューにul要素をいれたとしても、このソースをいじる必要はありません。


html

 

css

 

 

 

アコーディオンコンテンツ

 

これはメニューをクリックすると、その下のコンテンツが表示されてくるものです。
すごいシンプルです。

 

jquery

こちらはdtをクリックするとその直ぐ次のddが表示されるということです。

dt,ddのセットをいくら増やしてもこのソースはいじる必要はありません。

 

html

 

css

 

 

 

ページ内スクロール

これはページ内をアニメーションしながら動くもので、
よく「ページTOPへ戻る」等で使用します。
アニメーションの動きがないと違うページに移ってしまったかのように遷移するので、
できるだけこの機能をつけています。

 

jquery

 

 

html

id指定している箇所へリンクさせるだけでOKです。

 

もっと他にもあるのですが、
それはまたおいおい紹介していくようにします。

 

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ