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の疑似クラスを使用するとスタイルシートだけでダイナミックなメニューが作成できます。マウスをメニューに移動すると反転表示します。メニューをクリックするとコンテンツ部にメニュー項目を表示します。
このサンプルを編集して試してみる
このサンプルで使用している矢印のイメージです。 右クリックしてダウンロードしてください。
CSS Menu - Single Menu Arrow
CSS Menu (Arrow)
jQuery
Selectors
Events
Traversing
UI Effects
Manipulating
Ajax
jQuery
JavaScript + Ajax
外部スクリプト
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>セクションにコピー&ペーストしてください。
ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー&ペーストしてください。
CSS Menu (Arrow)
jQuery
Selectors
Events
Traversing
UI Effects
Manipulating
Ajax
jQuery
JavaScript + Ajax
コメント・提案の投稿!
名前
メール
件名
本文
送信中です...
ASP.NET 3.5
|
Akio's Blog