JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...
jQueryテンプレート42選!
ホーム
jQuery
jQuery プラグイン
jQuery UI
人気順
カテゴリ
キーワード
クール
新着
ツリー
jQuery PDF
ホット
サイト情報
サイトマップ
★ 新着サンプルトップ50のRSSを購読する
◆ DHTMLサンプル(基礎)のRSSを購読する
◆ DHTMLサンプル(応用)のRSSを購読する
◆ AJAXサンプルのRSSを購読する
◆ その他サンプルのRSSを購読する
◆ BOM(Browser Object Model)のRSSを購読する
◆ DOM(Document Object Model)のRSSを購読する
Single Menu (Jump)
説明
補足説明
コード
分割コード
関連書籍
コメント投稿
このサンプルは、スタイルシート(CSS)とイメージを使用してジャンプ型のメニューを表示します。マウスをメニューに移動するとメニュー項目が上にジャンプします。メニューをクリックすると固定されます。
このサンプルを編集して試してみる
このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Menu - Single Menu Jump</title> <link href="DhtmlAdvanced/cssMenus/cssmenus.css" rel="stylesheet" type="text/css" /> <link href="DhtmlAdvanced/cssSingleMenuJump/single_eighteen.css" rel="stylesheet" type="text/css" /> <script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#menu li").click(function() { $("#menu li a").removeClass("active"); $(this).children("a").addClass("active"); $("#h2left").html($(this).children("a").html()); }); }); </script> </head> <body> <div id="wrapper"> <div id="header"> <h1>CSS Menu (Jump)</h1> <div id="pad"></div> <ul id="menu"> <li id="jquery"><a href="#" class="active"><b>jQuery</b></a></li> <li id="selectors"><a href="#"><b>Selectors</b></a></li> <li id="events"><a href="#"><b>Events</b></a></li> <li id="traversing"><a href="#"><b>Traversing</b></a></li> <li id="uieffects"><a href="#"><b>UI Effects</b></a></li> <li id="manipulating"><a href="#"><b>Manipulating</b></a></li> <li id="ajax"><a href="#"><b>Ajax</b></a></li> </ul> </div> <div id="content"> <div class="leftCol"> <div class="inner"> <h2 id="h2left">jQuery</h2> <p> </p> </div> </div> <div class="rightCol"> <div class="inner"> <h2 id="h2right" >JavaScript + Ajax</h2> <p> </p> </div> </div> <br class="clear" /> </div> </div> <div id="footerTop"> <div id="footerT"> <div class="leftCol"> <div class="inner"> <p>Copyright ©2009 </p> </div> </div> <div class="rightCol foot"> <div class="inner"> </div> </div> <br class="clear" /> </div> </div> </body> </html>
外部スクリプト
CSS部
HEAD部
BODY部
ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。
$(function() { $("#menu li").click(function() { $("#menu li a").removeClass("active"); $(this).children("a").addClass("active"); $("#h2left").html($(this).children("a").html()); }); });
ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。
#pad { height: 140px; } /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssmenus.co.uk Copyright (c) 2009- Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu { padding: 0; margin: 0; list-style: none; float: right; } #menu li { float: left; margin-left: 2px; } #menu li a { display: block; float: left; height: 40px; text-decoration: none; font-family: arial, sans-serif; padding: 0 20px 0 0; font-size: 11px; color: #fff; background: url(images/tab.gif) no-repeat right top; text-transform: uppercase; } #menu li a b { display: block; float: left; height: 15px; padding: 25px 0 0 20px; background: url(images/tab.gif) left top; cursor: pointer; } #menu li a:hover, #menu li a.active { position: relative; color: #000; } #menu li a:hover b, #menu li a.active b { height: 32px; padding-top: 8px; }
ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。
<link href="DhtmlAdvanced/cssMenus/cssmenus.css" rel="stylesheet" type="text/css" /> <link href="DhtmlAdvanced/cssSingleMenuJump/single_eighteen.css" rel="stylesheet" type="text/css" /> <script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>
ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。
<div id="wrapper"> <div id="header"> <h1>CSS Menu (Jump)</h1> <div id="pad"></div> <ul id="menu"> <li id="jquery"><a href="#" class="active"><b>jQuery</b></a></li> <li id="selectors"><a href="#"><b>Selectors</b></a></li> <li id="events"><a href="#"><b>Events</b></a></li> <li id="traversing"><a href="#"><b>Traversing</b></a></li> <li id="uieffects"><a href="#"><b>UI Effects</b></a></li> <li id="manipulating"><a href="#"><b>Manipulating</b></a></li> <li id="ajax"><a href="#"><b>Ajax</b></a></li> </ul> </div> <div id="content"> <div class="leftCol"> <div class="inner"> <h2 id="h2left">jQuery</h2> <p> </p> </div> </div> <div class="rightCol"> <div class="inner"> <h2 id="h2right" >JavaScript + Ajax</h2> <p> </p> </div> </div> <br class="clear" /> </div> </div> <div id="footerTop"> <div id="footerT"> <div class="leftCol"> <div class="inner"> <p>Copyright ©2009 </p> </div> </div> <div class="rightCol foot"> <div class="inner"> </div> </div> <br class="clear" /> </div> </div>
コメント・提案の投稿！
名前
メール
件名
本文
送信中です...
ASP.NET 3.5
|
Akio's Blog