JavaScript + Ajax 実践サンプル集 (907本以上)　◇編集して実行可能◇

◆CSS Menu: シングルレベルメニュー編

CSS Menu: シングルメニュー (Default) #1
このサンプルは、スタイルシートとイメージを使用してシングルレベルのタブ型メニューを作成しています。CSSの疑似クラス(a:hover)を使用することにより、JavaScritpを使うことなくダイナミックなメニューが作成できます。メニューのタブにマウスを移動すると反転表示します。タブをクリックするとコンテンツ部にタブの標題を表示します。

CSS Menu: シングルメニュー (Arrow) #2
このサンプルは、スタイルシートを使用して矢印型のシングルメニューを表示します。 CSSの疑似クラスを使用するとスタイルシートだけでダイナミックなメニューが作成できます。マウスをメニューに移動すると反転表示します。メニューをクリックするとコンテンツ部にメニュー項目を表示します。

CSS Menu: シングルメニュー (Orange Tab) #3
このサンプルは、スタイルシートの疑似クラスを使用して黄色のタブ型メニューを表示します。マウスをタブ上に移動すると「黄色」に反転します。タブをクリックするとコンテンツ部にタブの標題を表示します。

CSS Menu: シングルメニュー (Pull Tab) #4
このサンプルは、スタイルシートを使用してスライド型のプルダウンメニューを表示します。マウスをタブ上に移動するとタブがスライドします。タブをクリックするとコンテンツ部にタブの標題を表示します。

CSS Menu: シングルメニュー (Peaks) #5
このサンプルは、スタイルシートを使用して山頂のようなメニューを表示します。イメージを一切使用しないでスタイルシートだけでこのようなメニューが作成できます。マウスを山頂に移動すると反転します。山頂をクリックすると反転表示を固定します。

CSS Menu: シングルメニュー (Slope) #6
このサンプルは、スタイルシート(CSS)を使用してスロープ型のメニューを表示しています。マウスをメニューに移動すると標題を反転表示します。メニューをクリックするとメニューを橙色で反転表示させます。

CSS Menu: シングルメニュー (Glossy) #7
このサンプルは、スタイルシート(CSS)とイメージを使用してグロッシー型のメニューを表示します。マウスをメニューに移動すると反転表示します。メニューをクリックすると反転表示が固定化されます。

CSS Menu: シングルメニュー (Shadow) #8
このサンプルは、スタイルシートとイメージを使用して影付きのメニューを表示します。マウスをメニューに移動するとメニューが凹みます。メニューをクリックすると凹みが固定化されます。

CSS Menu: シングルメニュー (Aqua) #9
このサンプルは、スタイルシートとイメージを使用して影付きのメニューを表示します。マウスをメニューに移動するとメニューが凹みます。メニューをクリックすると凹みが固定化されます。

CSS Menu: シングルメニュー (iMac) #10
このサンプルは、スタイルシートとイメージを使用してiMac型のメニューを表示します。マウスをメニューに移動すると反転表示します。メニューをクリックすると反転表示が固定化されます。

CSS Menu: シングルメニュー (Rainbow) #11
このサンプルは、スタイルシートとイメージを使用してレインボー型のメニューを表示します。マウスをメニュー上に移動すると輝度が変わります。メニューをクリックするとコンテンツ部にメニュー項目が表示されます。

CSS Menu: シングルメニュー (Riser) #12
このサンプルは、スタイルシートとイメージを使用してライザー型のメニューを表示します。マウスをメニューに移動するとメニューが立ち上がった感じで移動します。メニューをクリックするとその状態を固定します。

CSS Menu: シングルメニュー (Curl) #13
このサンプルは、スタイルシートとイメージを使用してカール型のメニューを表示します。マウスをメニューに移動するとカールします。メニューをクリックするとカールした状態を保持します。

CSS Menu: シングルメニュー (Flags) #14
このサンプルは、スタイルシート(CSS)を使用してフラグ型のメニューを表示します。マウスをメニューに移動すると反転表示します。メニューをクリックすると反転表示を固定します。

CSS Menu: シングルメニュー (Centered) #15
このサンプルは、スタイルシートとイメージを使用してシングルレベルのメニューを表示します。メニュー項目は、画面の中央にセンタリングされて表示されます。マウスをメニューに移動するとハイライトさせます。メニューをクリックするとハイライトした状態を保持します。

CSS Menu: シングルメニュー (Centered v2) #16
このサンプルは、スタイルシートとイメージを使用してシングルレベルのメニューを表示します。メニューは中央にセンタリングして表示されます。マウスをメニューに移動すると反転表示します。メニューをクリックすると反転表示が固定化されます。

CSS Menu: シングルメニュー (Jump) #17
このサンプルは、スタイルシート(CSS)とイメージを使用してジャンプ型のメニューを表示します。マウスをメニューに移動するとメニュー項目が上にジャンプします。メニューをクリックすると固定されます。

◆CSS Menu: ドロップダウンメニュー編

CSS Menu:　ドロップダウンメニュー（デフォルト） #1
このサンプルは、スタイルシートを使用してドロップダウン型のメニューを表示します。マウスをトップメニューに移動するとドロップダウンにサブメニューが表示されます。トップメニューにマウスを移動すると反転表示します。メニューをクリックすると反転表示が固定化されます。

CSS Menu:　ドロップダウンメニュー（プルアップ） #2
このサンプルは、スタイルシートとイメージを使用してプルアップ型のメニューを表示します。マウスをメニューに移動するとサブメニューがプルアップします。サブメニューにマウスを移動すると下位メニューがフライアウトします。

CSS Menu:　ドロップダウンメニュー（センター）#3
このサンプルは、スタイルシートとイメージを使用してドロップダウンメニューを画面の中央にセンタリングして表示します。マウスをメニューに移動するとサブメニューがドロップダウンします。サブメニューにマウスを移動すると下位メニューがフライアウトします。

CSS Menu:　ドロップダウンメニュー（アニメーション）#4
このサンプルは、スタイルシートとイメージを使用してアニメーション型のドロップダウンメニューを表示します。マウスをトップメニューに移動するとメニューがハイライトします。カレントの下矢印が上下に移動します。サブメニューはドロップダウンリストに表示されます。下位メニューがあるときは右矢印が表示されます。カレントの右矢印は左右に移動します。

◆CSS Menu: ドロップラインメニュー編

CSS Menu: ドロップラインメニュー（デフォルト）#1
このサンプルは、スタイルシートとイメージを使用してドロップライン型のメニューを表示します。マウスをメニューに移動するとサブメニューがドロップラインメニューとして表示されます。メニューをクリックすると反転表示が固定されます。

CSS Menu:　ドロップラインメニュー（センター）#2
このサンプルは、スタイルシートとイメージを使用してドロップライン型のメニューを表示します。マウスをイメージに移動すると反転表示します。サブメニューはトップメニュー直下にドロップラインメニューとして表示されます。メニューをクリックすると、コンテンツ部にメニュー項目が表示されます。

◆CSS Menu: フライアウトメニュー編

CSS Menu: フライアウトメニュー（デフォルト）#1
このサンプルは、スタイルシートとイメージを使用してフライアウト型のメニューを表示します。マウスをメニューに移動するとサブメニューがフライアウトします。サブメニューにマウスを移動すると下位のメニューがフライアウトします。メニューをクリックすると反転表示を固定化します。

CSS Menu: フライアウトメニュー（レフト） #2
このサンプルは、スタイルシートとイメージを使用してフライアイトメニューを表示します。マウスをメニューに移動するとサブメニューが左側にフライアウトします。メニューをクリックするとコンテンツ部にメニュー項目を表示します。

◆CSS jQuery: スライド／ドロップライン／アコーディオン型メニュー編

CSS jQuery: 垂直型スライドメニュー #1
このサンプルは、jQueryのslideUp/slideDown apiを使用して垂直型のスライドメニューを表示します。左側に矢印が表示されているメニューをクリックすると、サブメニューがスライドされて表示されます。

CSS jQuery: 水平型スライドメニュー #2
このサンプルは、jQueryのslideUp/slideDownを使用してスライド型のドロップダウンメニューを表示します。マウスをメニューバーに移動するとドロップダウンメニューがスライドして表示されます。ドロップダウンメニューを、そのままの状態にしておくと2秒後に自動的に閉じます。

CSS jQuery: ドロップライン型メニュー（影付き) #3
このサンプルは、jQueryのfadeIn/fadeOut apiを使用してドロップライン／ドロップダウン型のメニューを表示します。マウスをトップメニューに移動するとサブメニューがドロップラインメニューとして表示されます。ドロップラインメニューにマウスを移動するとサブメニューがドロップダウンメニューとして表示されます。ドロップラインとドロップダウンメニューを展開した状態にしておくと自動的に閉じます。

CSS jQuery: ドロップライン型メニュー (影なし) #4
このサンプルは、jQueryのslideUp/slideOut apiを使用してドロップライン／ドロップダウン／フライアウト型のメニューを表示します。マウスをトップメニューに移動すると、サブメニューがドロップラインメニューに表示されます。ドロップラインメニューにマウスを移動すると、ドロップダウンメニューが表示されます。そして、ドロップダウンメニューにマウスを移動するとフライアウトメニューが表示されます。メニューが表示されている状態を放置すると２秒後に、フライアウトとドロップダウンを自動的に閉じます。ドロップラインメニューは常時表示します。

CSS jQuery: 垂直型アコーディンメニュー #5
このサンプルは、jQueryのaddClass(),removeClass(),animate()apiを利用してアコーディオン型のメニューを表示します。メニューのヘッダー(Mobile Networks, Mobile Phones, Best Deals, Latest Deals)をクリックするとサブメニューがスライドされて表示されます。

CSS jQuery: 垂直型アコーディオンメニュー(v2) #6
このサンプルは、DHTML(CSS + jQuery)を使用してスライド型メニューを表示します。マウスをヘッダーに移動するとサブメニューがあるとき「v」の矢印が表示されますのでクリックします。するとサブメニューがスライドされて表示されます。

CSS jQuery: ドロップライン型メニュー (v2) #7
このサンプルは、jQueryを使用してドロップライン型のメニューを表示します。マウスを最上位のメニューに移動すると直下にサブメニューが表示されます。サブメニューはさらに階層化させることができます。デフォルトで[PRODUCTS]のドロップラインメニューを表示します。

◆jQuery: イメージギャラリー／スライドショー編

jQuery: スライドショー #1
このサンプルは、jQueryのfadeIn/fadeOutを利用してスライドを表示します。スライドの移動ボタンをクリックするとイメージをスライドさせます。イメージの下にタイトルと説明を表示します。

jQuery: スライドショー #2
このサンプルは、jQueryのfadeOut/fadeIn/animate apiを使用してスライドを表示します。Webページに表示されているサムネイルを左右にスクロールして任意のイメージをクリックすると、そのイメージが拡大されて表示されます。

jQuery: スライドショー #3
このサンプルは、jQueryのanimate()apiを使用してイメージを一覧から選択して拡大表示させます。右側の一覧からイメージをスクロールしてクリックすると、左側にそのイメージが拡大されて表示されます。拡大されたイメージの下にイメージの「タイトル」と「説明」が表示されます。

jQuery: スライドショー #4
このサンプルは、jQueryの各種apiを利用してイメージギャラリーを表示します。 Webページの上にイメージのサムネイルが表示されます。サムネイルをクリックするとそのイメージが拡大表示されます。拡大表示されたイメージの下に「タイトル」と「説明文」が表示されます。サムネイルの左端(赤のマーク)または右端(赤のマーク)に移動するとサムメイルが左右にスクロールします。

Playボタン(>)をクリックするとイメージを順番に拡大表示します。移動ボタン(<<,>>)をクリックすると手動でイメージを切り替えすることができます。

◆jQuery: ビデオギャラリー編

jQuery: YouTubeビデオギャラリー #1
このサンプルは、jQueryのYouTubeプラグインを使用してYouTubeのビデオギャラリーを表示します。ビデオのアイコンをクリックすると、そのビデオが動画画面に表示されますので[開始]ボタンをクリックします。