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 (Arrow)
説明
補足説明
コード
分割コード
関連書籍
コメント投稿
このサンプルは、スタイルシートを使用して矢印型のシングルメニューを表示します。 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 Arrow</title> <link href="DhtmlAdvanced/cssMenus/cssmenus.css" rel="stylesheet" type="text/css" /> <link href="DhtmlAdvanced/cssSingleMenuArrow/single_two.css" rel="stylesheet" type="text/css" /> <script src="DhtmlAdvanced/jquery-1.2.6.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#menu li").click(function() { $("#menu li").removeClass("active"); $(this).addClass("active"); $("#h2left").html($(this).children("a").html()); }); }); </script> </head> <body> <div id="wrapper"> <div id="header"> <h1>CSS Menu (Arrow)</h1> <div id="pad"></div> <ul id="menu"> <li class="active"><a href="#"><b>jQuery</b></a></li> <li><a href="#"><b>Selectors</b></a></li> <li><a href="#"><b>Events</b></a></li> <li><a href="#"><b>Traversing</b></a></li> <li><a href="#"><b>UI Effects</b></a></li> <li><a href="#"><b>Manipulating</b></a></li> <li><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").removeClass("active"); $(this).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; } #menu li { float: left; margin-left: 1px; } #menu li a { display: block; height: 40px; line-height: 40px; padding: 0 20px; float: left; background: #ddd; color: #000; text-decoration: none; } #menu li a b { text-transform: uppercase; } #menu li a:hover, #menu li.active a { background: #fff url(images/arrow.gif) no-repeat center bottom; color: #e60; }
ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。
<link href="DhtmlAdvanced/cssMenus/cssmenus.css" rel="stylesheet" type="text/css" /> <link href="DhtmlAdvanced/cssSingleMenuArrow/single_two.css" rel="stylesheet" type="text/css" /> <script src="DhtmlAdvanced/jquery-1.2.6.js" type="text/javascript"></script>
ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。
<div id="wrapper"> <div id="header"> <h1>CSS Menu (Arrow)</h1> <div id="pad"></div> <ul id="menu"> <li class="active"><a href="#"><b>jQuery</b></a></li> <li><a href="#"><b>Selectors</b></a></li> <li><a href="#"><b>Events</b></a></li> <li><a href="#"><b>Traversing</b></a></li> <li><a href="#"><b>UI Effects</b></a></li> <li><a href="#"><b>Manipulating</b></a></li> <li><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