jQuery pluginナビゲーション、メニュー
- animateToSelector〔CSSとjQueryを使用したリスト要素のドロップダウンメニュー〕
- Another Solution to Animation Queue Buildup in jQuery〔待機アニメーションの補強〕
- CSS Dock Menu〔Mac OS Xのドック風のメニュー〕
- CSS Sprites2〔jQueryとPHPを使用した投票システム〕
- CSSとjQueryを使用したリスト要素の垂直型ドロップダウンメニュー
- CSSとjQueryを使用したリスト要素の水平型ドロップダウンメニュー
- Designing the Digg Header〔Diggのヘッダ風の垂直型ドロップダウンメニュー〕
- Emenu〔ヘッダ画像内に収まる固定幅・固定高さのドロップダウンメニュー〕
- Fixed Fade Out Menu〔ロールオーバーでフェードアウトするページ上部固定ナビゲーションバー〕
- Floating menu jQuery&CSS〔ページをスクロールしてもついてくるフローティングメニュー〕
- jBreadCrumb〔スライド式のトピックパス〕
- jGlideMenu〔iPod風のインラインメニュー〕
- jQuery accordion Plugin〔アコーディオン〕
- jQuery MagicLine Navigation〔スライド式のナビゲーションバー〕
- jQuery Menu plugin〔アプリケーションメニューのようなドロップダウンメニュー〕
- LavaLamp for jQuery lovers!〔ランプがともるようなエフェクト効果のあるナビゲーション〕
- Navitation Effect Using jQuery〔jQeryを使用してMootoolsサイト風のナビゲーションを作成する方法〕
- Self-resizing navigation〔ナビゲーションの幅を任意のピクセルサイズに動的に変更〕
- Simple jQuery Dropdowns〔シンプルなドロップダウン型ナビゲーション〕
- Smooth Animated jQuery Menu〔垂直方向にストンと広がるアニメーションメニュー〕
- Superfish - jQuery menu plugin by Joel Birch〔シャドウ付きのドロップダウンメニュー〕
- Using jQuery for Background Image Animations〔背景画像の位置を移動してナビゲーションがアニメーションしているように見せる〕
- 垂直型アコーディオンメニュー
animateToSelector
CSSとjQueryを使用したリスト要素のドロップダウンメニュー
2009/3/20
'animateToSelector' jQuery plugin
jquery.js、animatetoselector.jquery.js
マウスオーバーするとアニメーションするナビゲーションを作成するjQueryプラグインです。
いくつかのオプションが用意されています。 「selectors」と「selectors」は必須ですが、それ以外の「duration」、「event」は任意です。
| オプション | 説明 | |
|---|---|---|
| selector | 必須 | CSSによるアニメーションを適用するセレクタを指定します。 |
| properties | 必須 | アニメーションの対象となるCSSのプロパティを指定します。 |
| duration | アニメーション速度（単位：ミリ秒）を指定します。 デフォルトは400ミリ秒です。 | |
| event | どのイベントが発生した時にアニメーションを開始するかを指定します。指定しない場合は、すぐにアニメーションが開始されます。2つのイベントを指定すると、1つ目のイベント発生時に現在のスタイルからホバー時のスタイルにアニメーションし、2つ目のイベントで元のスタイルにアニメーションしながら戻ります。 | |
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>'animateToSelector' jQuery plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/animatetoselector.jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#navigation a').animateToSelector({
selectors: ['#navigation a:hover'],
properties: [
'background-color',
'padding-left',
'color'
],
duration:600,
events: ['mouseover', 'mouseout']
});
});
</script>
<!-- CSS -->
<style type="text/css">
#navigation {
margin:0; padding:0;
list-style:none;
font-size:1.4em;
width:250px;
}
#navigation li {
margin:0;
width:100%;
}
#navigation a {
display:block;
color:#fff;
text-decoration:none;
background:#0d9cd7 url(/content/img/gradient.png);
padding:5px 10px;
border-top:4px solid white;
cursor:pointer;
}
#navigation a:hover {
padding-left:30px;
background-color:#bdd70d;
color:#222;
}
#navigation a span {
display:block;
padding-left:25px;
background:url("/content/img/icon/color/star.gif") no-repeat center left;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://james.padolsey.com/demos/animateToSelector/'>'animateToSelector' jQuery plugin</a> | 設置サンプル</h1
<p>▼メニューにマウスオーバーするとアニメーションします。</p>
<!-- CODE -->
<ul id="navigation">
<li id="nav-cal"><a href="#"><span>Calendar</span></a></li>
<li id="nav-video"><a href="#"><span>Upload Video</span></a></li>
<li id="nav-post"><a href="#"><span>Post something</span></a></li>
<li id="nav-note"><a href="#"><span>Notifications</span></a></li>
<li id="nav-mobile"><a href="#"><span>Mobile settings</span></a></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
Another Solution to Animation Queue Buildup in jQuery
待機アニメーションの補強
2010/2/12
hoverFlow
アニメーションを使用したナビゲーションの場合、ナビゲーション上でマウスを何往復もさせると待機アニメーションができてしまいます。 そのためマウスアウトしているのに待機中だったアニメーションが順に実行され、アニメーションが止まらないという現象が起こってしまいます。 こうならないよう、ナビゲーションからマウスアウトしたらアニメーションがスムーズに停止するよう、待機アニメーションを補強するjQueryプラグインです。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.hoverflow.js"></script>
<script type="text/javascript">
$(function(){
/************* example1 */
$('#demo1_1 a').hover(function(e) {
$(this).hoverFlow(e.type, { left:20 }, 'fast');
}, function(e) {
$(this).hoverFlow(e.type, { left:0 }, 'fast');
});
/* e.typeを使用せずに別名（mouseenter）を使う場合 */
$('#demo1_2 .anim_queue_example a').hover(function() {
$(this).hoverFlow('mouseenter', { left:20 }, 'fast');
}, function() {
$(this).hoverFlow('mouseleave', { left:0 }, 'fast');
});
/************* example2 */
/* hover()を使用せずにbind()を使う場合 */
$('#demo2 a')
.bind('mouseover', function(e) {
$(this).hoverFlow(e.type, { left:20 }, 'fast');
})
.bind('mouseout', function(e) {
$(this).hoverFlow(e.type, { left:0 }, 'fast');
});
/************* example3 */
/* 連鎖 */
$('#demo3 a').hover(function(e) {
$(this).hoverFlow(e.type, { left:20 }, 'fast').css('backgroundColor', '#99CCFF');
}, function(e) {
$(this).hoverFlow(e.type, { left:0 }, 'fast').css('backgroundColor', '#000');
});
/************* example4 */
/* live()を使用して動的に追加した要素にもイベントを適用させる */
$('#demo4 a').live('mouseover', function(e) {
$(this).hoverFlow(e.type, { left:20 }, 'fast');
}).live('mouseout', function(e) {
$(this).hoverFlow(e.type, { left:0 }, 'fast');
});
// リスト要素にアイテム追加
$('#addMenuItem').bind('click', function() {
$('#demo4 ul').append('<li><a href="#">New Menu Item</a></li>');
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
body { background:#fff; }
/* navigation */
ul.anim_queue_example {
list-style:none;
margin:0 20px 0 0; padding:0 0 20px 20px;
width:125px;
float:left;
}
ul.anim_queue_example li {
list-style:none;
margin:0; padding:0;
background:#000;
}
ul.anim_queue_example li a {
padding:6px 0px;
background:#000;
color:#fff;
text-align:center;
text-decoration:none;
position:relative;
display:block;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://www.2meter3.de/code/hoverFlow/'>hoverFlow</a></p>
<!-- CODE -->
<h2>例1：基本</h2>
<div id="demo1_1">
<ul class="anim_queue_example">
<li><a href="#">Menu Item One</a></li>
<li><a href="#">Menu Item Two</a></li>
<li><a href="#">Menu Item Three</a></li>
<li><a href="#">Menu Item Four</a></li>
<li><a href="#">Menu Item Five</a></li>
</ul>
</div>
<div id="demo1_2">
<ul class="anim_queue_example">
<li><a href="#">Menu Item One</a></li>
<li><a href="#">Menu Item Two</a></li>
<li><a href="#">Menu Item Three</a></li>
<li><a href="#">Menu Item Four</a></li>
<li><a href="#">Menu Item Five</a></li>
</ul>
</div>
<br clear="all" />
<h2>例2：hover()を使用せずにbind()を使用する例</h2>
<div id="demo2">
<ul class="anim_queue_example">
<li><a href="#">Menu Item One</a></li>
<li><a href="#">Menu Item Two</a></li>
<li><a href="#">Menu Item Three</a></li>
<li><a href="#">Menu Item Four</a></li>
<li><a href="#">Menu Item Five</a></li>
</ul>
</div>
<br clear="all" />
<h2>例3：連鎖</h2>
<div id="demo3">
<ul class="anim_queue_example">
<li><a href="#">Menu Item One</a></li>
<li><a href="#">Menu Item Two</a></li>
<li><a href="#">Menu Item Three</a></li>
<li><a href="#">Menu Item Four</a></li>
<li><a href="#">Menu Item Five</a></li>
</ul>
</div>
<br clear="all" />
<h2>例4：live()を使用して動的に追加した要素にもイベントを適用</h2>
<p><a href="#" id="addMenuItem">＋アイテム追加</a></p>
<div id="demo4">
<ul class="anim_queue_example">
<li><a href="#">Menu Item One</a></li>
<li><a href="#">Menu Item Two</a></li>
<li><a href="#">Menu Item Three</a></li>
<li><a href="#">Menu Item Four</a></li>
<li><a href="#">Menu Item Five</a></li>
</ul>
</div>
<br clear="all" />
<!-- / CODE -->
</div>
</body>
</html>
CSS Dock Menu
Mac OS Xのドック風のメニュー
2009/3/1
CSS Dock Menu
jQueryを使用して、Mac OS Xのドック風のメニューを作成する方法が掲載されています。
ドック風のメニューを画面上部と下部に配置する2つのサンプルがあります。 IE6以下のブラウザ対応として、透過PNGの透過処理に「iepngfix.htc」が採用されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>CSS Dock Menu | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/interface/interface-1.2.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
<!-- CSS -->
<style type="text/css">
:focus { outline:none; }
#demo { margin:0; padding:0; background:transparent url("/content/img/bg_windows.png") no-repeat 0 0; width:800px; height:600px; position:relative; }
/* dock - top */
#dock {
position:relative;
height:50px;
background:transparent url("/content/img/bg_black.png") repeat 0 0;
text-align:center;
}
.dock-container {
position:absolute;
height:50px;
padding-left:20px;
}
a.dock-item {
display:block;
width:40px;
color:#000;
position:absolute;
top:0px;
text-align:center;
text-decoration:none;
}
.dock-item img {
border:none;
margin:5px 10px 0 10px;
width:100%;
}
.dock-item span {
display:none;
padding-left:20px;
color:#fff;
white-space:pre;
font-size:11px;
font-weight:bold;
}
/* dock2 - bottom */
#dock2 {
position:absolute;
left:0px; bottom:0px;
width:100%; height:50px;
background:transparent url("/content/img/bg_black.png") repeat 0 0;
text-align:center;
}
.dock-container2 {
position:absolute;
height:50px;
padding-left:20px;
}
a.dock-item2 {
display:block;
width:40px;
color:#000;
bottom:0px;
position:absolute;
text-align:center;
text-decoration:none;
}
.dock-item2 span {
display:none;
padding-left:20px;
color:#fff;
white-space:pre;
font-size:11px;
font-weight:bold;
}
.dock-item2 img {
border:none;
margin:5px 10px 0 10px;
width:100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior:url(/content/jslib/iepngfix.htc) }
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<h1><a href='http://www.ndesign-studio.com/blog/design/css-dock-menu/'>CSS Dock Menu</a> | 設置サンプル</h1>
<p>▼Mac OS X風のドックメニュー</p>
<!-- CODE -->
<div id="demo">
<!--top dock -->
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="/content/img/vistaicon/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/email.png" alt="メール" /><span>メール</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/internet.png" alt="インターネット" /><span>インターネット</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/photo.png" alt="マイピクチャ" /><span>マイピクチャ</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/music.png" alt="マイミュージック" /><span>マイミュージック</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/history.png" alt="履歴" /><span>履歴</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/calendar.png" alt="カレンダー" /><span>カレンダー</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/printer.png" alt="印刷" /><span>印刷</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/favorite.png" alt="お気に入り" /><span>お気に入り</span></a>
<a class="dock-item" href="#"><img src="/content/img/vistaicon/gomibako.png" alt="ごみ箱" /><span>ごみ箱</span></a>
</div>
</div>
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#"><span>Home</span><img src="/content/img/vistaicon/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><span>メール</span><img src="/content/img/vistaicon/email.png" alt="メール" /></a>
<a class="dock-item2" href="#"><span>インターネット</span><img src="/content/img/vistaicon/internet.png" alt="インターネット" /></a>
<a class="dock-item2" href="#"><span>マイピクチャ</span><img src="/content/img/vistaicon/photo.png" alt="マイピクチャ" /></a>
<a class="dock-item2" href="#"><span>マイミュージック</span><img src="/content/img/vistaicon/music.png" alt="マイミュージック" /></a>
<a class="dock-item2" href="#"><span>履歴</span><img src="/content/img/vistaicon/history.png" alt="履歴" /></a>
<a class="dock-item2" href="#"><span>カレンダー</span><img src="/content/img/vistaicon/calendar.png" alt="カレンダー" /></a>
<a class="dock-item2" href="#"><span>印刷</span><img src="/content/img/vistaicon/printer.png" alt="印刷" /></a>
<a class="dock-item2" href="#"><span>お気に入り</span><img src="/content/img/vistaicon/favorite.png" alt="お気に入り" /></a>
<a class="dock-item2" href="#"><span>ごみ箱</span><img src="/content/img/vistaicon/gomibako.png" alt="ごみ箱" /></a>
</div>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
CSS Sprites2
jQueryとPHPを使用した投票システム
2009/4/12
CSS Sprites2 - It's JavaScript Time
jquery.js
jQueryを使っているインラインCSS Sprites2を実装する方法が掲載されています。
1枚の画像に通常時、マウスオーバー時、アクティブ時、カレント時の4枚のナビゲーション画像を1枚の画像にして、CSSのpositionで位置を変更しています。 マウスオーバーとマウスアウトした時にスライドアップ・ダウンアニメーションさせています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>CSS Sprites2 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// remove link background images since we're re-doing the hover interaction below
// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
$(".nav").children("li").each(function() {
var current = "nav current-" + ($(this).attr("class"));
var parentClass = $(".nav").attr("class");
if (parentClass != current) {
$(this).children("a").css({backgroundImage:"none"});
}
});
// create events for each nav item
attachNavEvents(".nav", "home");
attachNavEvents(".nav", "about");
attachNavEvents(".nav", "services");
attachNavEvents(".nav", "contact");
function attachNavEvents(parent, myClass) {
$(parent + " ." + myClass).mouseover(function() {
$(this).append('<div class="nav-' + myClass + '"></div>');
$("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
}).mouseout(function() {
$("div.nav-" + myClass).fadeOut(200, function() {
$(this).remove();
});
}).mousedown(function() {
$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
}).mouseup(function() {
$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
});
}
});
</script>
<!-- CSS -->
<style type="text/css">
.nav { width:401px; height:48px; position:absolute; top:20px; left:0; background:url(/content/img/ajax/blue-nav.gif) no-repeat; }
.nav li { display:inline; }
.nav li a:link, .nav li a:visited { position:absolute; top:0; height:48px; text-indent:-9000px; overflow:hidden; z-index:10; }
.nav .home a:link, .nav .home a:visited { left:23px; width:76px; }
.nav .home a:hover, .nav .home a:focus { background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -49px; }
.nav .home a:active { background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -98px; }
.current-home .home a:link, .current-home .home a:visited { background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -147px; cursor:default; }
.nav-home, .nav-home-click { position:absolute; top:0; left:23px; width:76px; height:48px; background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -49px; }
.nav-home-click { background:url(/content/img/ajax/blue-nav.gif) no-repeat -23px -98px; }
.nav .about a:link, .nav .about a:visited { left:100px; width:82px; }
.nav .about a:hover, .nav .about a:focus { background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -49px; }
.nav .about a:active { background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -98px; }
.current-about .about a:link, .current-about .about a:visited { background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -147px; cursor:default; }
.nav-about, .nav-about-click { position:absolute; top:0; left:100px; width:82px; height:48px; background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -49px; }
.nav-about-click { background:url(/content/img/ajax/blue-nav.gif) no-repeat -100px -98px; }
.nav .services a:link, .nav .services a:visited { left:183px; width:97px; }
.nav .services a:hover, .nav .services a:focus { background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -49px; }
.nav .services a:active { background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -98px; }
.current-services .services a:link, .current-services .services a:visited { background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -147px; cursor:default; }
.nav-services, .nav-services-click { position:absolute; top:0; left:183px; width:97px; height:48px; background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -49px; }
.nav-services-click { background:url(/content/img/ajax/blue-nav.gif) no-repeat -183px -98px; }
.nav .contact a:link, .nav .contact a:visited { left:281px; width:97px; }
.nav .contact a:hover, .nav .contact a:focus { background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -49px; }
.nav .contact a:active { background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -98px; }
.current-contact .contact a:link, .current-contact .contact a:visited { background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -147px; cursor:default; }
.nav-contact, .nav-contact-click { position:absolute; top:0; left:281px; width:97px; height:48px; background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -49px; }
.nav-contact-click { background:url(/content/img/ajax/blue-nav.gif) no-repeat -281px -98px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://alistapart.com/articles/sprites2'>CSS Sprites2 - It's JavaScript Time</a> 設置サンプル/h1>
<!-- CODE -->
<div style="position:relative;">
<ul class="nav current-about">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
CSSとjQueryを使用したリスト要素の垂直型ドロップダウンメニュー
unknown
- Drop down menu with jquery
- jQuery & CSS Example - Dropdown Menu
- jQuery Simple Drop-Down Menu Plugin
- SuckerFish Style
Drop down menu with jquery
jquery.js
jQueryと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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Drop down menu with jquery | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a#menu-call").mouseover( function() {
$("ul#menu").animate({height:"show",opacity:"show"},"slow");
return false;
});
$("ul#menu").hover( function() {},
function(){
$("ul#menu").animate({opacity:1.0},1125).slideUp(375);
return false;
});
$("ul#menu li").hover(
function(){ $(this).css({ backgroundColor:"#ececec", border:"1px solid #1042de"})},
function(){ $(this).css({ border:"1px solid #fff",backgroundColor:"#fff"})}
);
});
</script>
<!-- CSS -->
<style type="text/css">
#menu-call { margin:0; padding:0; }
#menu-container { position:relative; }
#menu-container ul,
#menu-container li { margin:0; padding:0; list-style:none; }
#menu {
position:absolute;
top:0; left:0;
display:inline;
z-index:99;
width:216px;
background:#fff;
border:1px solid black;
margin:0 0 0 300px; padding:3px;
display:none;
}
#menu li { border:1px solid #fff; display:block; text-decoration:none; padding:4px; margin:4px;}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://ayozone.org/2008/02/06/drop-down-menu-with-jquery/'>Drop down menu with jquery</a> | 設置サンプル</h1>
<p>▼リンクにマウスオーバーすると垂直方向に子メニューがスライドアニメーション付きで展開します。</p>
<!-- CODE -->
<div style="width:500px; height:10em;">
<a href="#" id="menu-call">DROP DOWN MENU</a></p>
<div id="menu-container">
<ul id="menu">
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
</ul>
</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>
jQuery & CSS Example - Dropdown Menu
jquery.js
jQueryとCSSを使用して、リスト要素から簡単なドロップダウンメニューを作成する方法が掲載されています。
入れ子のul要素をCSSで非表示にしておき、親のli要素にマウスオーバー（hoverイベント）すると、非表示にしておいたul要素を表示するようになっています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery & CSS Example - Dropdown Menu | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('li.headlink').hover(
function(){ $('ul', this).css('display', 'block'); },
function(){ $('ul', this).css('display', 'none');}
);
});
</script>
<!-- CSS -->
<style type="text/css">
/* General */
#cssdropdown ul, #cssdropdown li { margin:0; padding:0; list-style:none; }
#cssdropdown a { display:block; text-decoration:none; color:#fff; padding:10px; }
/* Head links */
#cssdropdown li.headlink { width:220px; float:left; margin-left:-1px; border:1px #000 solid; background-color:#c90000; text-align:center; }
/* Child lists and links */
#cssdropdown li.headlink ul { display:none; border-top:1px #000 solid; text-align:left; }
#cssdropdown li.headlink li a:hover { background-color:#333; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/'>jQuery & CSS Example - Dropdown Menu</a> | 設置サンプル</h1>
<p>▼メニューにマウスオーバーすると垂直方向に子メニューが表示されるドロップダウンメニューです。</p>
<!-- CODE -->
<div class="cf" style="height:10em;">
<ul id="cssdropdown">
<li class="headlink">
<a href="mine.html?search_engines">Search Engines</a>
<ul>
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://yahoo.com/">Yahoo</a></li>
<li><a href="http://live.com/">Live Search</a></li>
</ul>
</li>
<li class="headlink">
<a href="mine.html?shopping">Shopping</a>
<ul>
<li><a href="http://amazon.com/">Amazon</a></li>
<li><a href="http://ebay.com/">eBay</a></li>
<li><a href="http://craigslist.com/">CraigsList</a></li>
</ul>
</li>
</ul>
</div>
<!-- CODE / -->
</div>
</body>
</html>
jQuery Simple Drop-Down Menu Plugin
IE6+、Firefox 1.5+、Opera 8+、Safari 3+、Chrome 0.2+
Free
jquery.js
jQueryを使用して、リスト要素から1階層だけのシンプルなドロップダウンメニューを生成する方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Simple Drop-Down Menu Plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open(){
jsddm_canceltimer();
jsddm_close();
ddmenuitem=$(this).find('ul').eq(0).css('visibility', 'visible');
}
function jsddm_close(){
if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}
function jsddm_timer(){
closetimer=window.setTimeout(jsddm_close, timeout);
}
function jsddm_canceltimer(){
if(closetimer){
window.clearTimeout(closetimer);
closetimer = null;
}
}
$(function(){
$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
});
document.onclick=jsddm_close;
});
</script>
<!-- CSS -->
<style type="text/css">
#demo { height:15em; }
#jsddm { margin:0; padding:0; }
#jsddm li { float:left; list-style:none; }
#jsddm li a { display:block; background:#999; padding:5px 12px; text-decoration:none; border-right:1px solid #fff; width:70px; color:#eaffed; white-space:nowrap; font-weight:bold; }
#jsddm li a:hover { background:#ff6699; }
#jsddm li ul { margin:0; padding:0; position:absolute; visibility:hidden; border-top:1px solid #fff; }
#jsddm li ul li { float:none; display:inline; }
#jsddm li ul li a { width:auto; background:#fff; color:#ff6699; font-weight:normal; }
#jsddm li ul li a:hover { background:#ff6699; color:#fff; }
</style>
</head>
<body>
<h1><a href='http://javascript-array.com/scripts/jquery_simple_drop_down_menu/'>jQuery Simple Drop-Down Menu Plugin</a> | 設置サンプル</h1>
<p>▼リスト要素からドロップダウンメニューを生成</p>
<!-- CODE -->
<div id="demo" class="cf">
<ul id="jsddm">
<li><a href="#">MenuA</a>
<ul>
<li><a href="#">Item A ------ 1</a></li>
<li><a href="#">Item A ------ 2</a></li>
<li><a href="#">Item A ------ 3</a></li>
</ul>
</li>
<li><a href="#">MenuB</a>
<ul>
<li><a href="#">Item B ------ 1</a></li>
<li><a href="#">Item B ------ 2</a></li>
<li><a href="#">Item B ------ 3</a></li>
<li><a href="#">Item B ------ 4</a></li>
<li><a href="#">Item B ------ 5</a></li>
</ul>
</li>
<li><a href="#">MenuC</a></li>
<li><a href="#">MenuD</a></li>
<li><a href="#">MenuE</a></li>
</ul>
</div>
<!-- / CODE -->
</body>
</html>
SuckerFish Style
jquery.js
jQueryを使用して、リスト要素から1階層だけのシンプルなドロップダウンメニューを生成する方法が掲載されています。
IEの場合は、a要素以外にhover()メソッドがきかないため、document.allデブラウザ判定をし、IEの場合にhoverClassプラグインを適用して、ホバー効果をつけています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>SuckerFish Style | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function(){}
);
if(document.all){
$("#nav-one li").hoverClass("sfHover");
}
});
$.fn.hoverClass=function(c){
return this.each(function(){
$(this).hover(
function(){ $(this).addClass(c); },
function(){ $(this).removeClass(c); }
);
});
};
</script>
<!-- CSS -->
<style type="text/css">
.nav, .nav ul { list-style:none; margin:0; padding:0; }
.nav { z-index:100; position:relative; }
.nav li { border-left:1px solid #000; float:left; margin:0; padding:0; list-style;none; position:relative; height:18px;}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited { font:bold 1.22em/25px; background:#565656; color:#eee; display:block; padding:0 9px; text-transform:lowercase; text-decoration:none; }
.nav li a:hover { background:#ccc; color:#000; }
#nav-one li:hover a,
#nav-one li.sfHover a { background:#ccc; color:#000; }
#nav-one li:hover ul a,
#nav-one li.sfHover ul a { background:#565656; color:#eee; }
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover { background:#ccc; color:#000; }
.nav ul { background:#565656; border-bottom:1px solid #000; list-style:none; margin:0; width:100px; position:absolute; top:-999em; left:-1px; }
.nav li:hover ul, .nav li.sfHover ul { top:18px; }
.nav ul li { border:0; float:none; }
.nav ul a { border:1px solid #000; border-bottom:0; padding-right:20px; width:80px; white-space:nowrap; }
.nav ul a:hover { background:#ccc; color:#000; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://be.twixt.us/jquery/suckerFish.php'>SuckerFish Style</a> | 設置サンプル</h1>
<!-- CODE -->
<ul id="nav-one" class="nav">
<li>
<a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li>
<a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li>
<a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li>
<a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
<br clear="all" />
<!-- CODE / -->
</div>
</body>
</html>
CSSとjQueryを使用したリスト要素の水平型ドロップダウンメニュー
unknown
- Create a multilevel Dropdown menu with CSS and improve it via jQuery
- droppy - Nested drop down menus
Create a multilevel Dropdown menu with CSS and improve it via jQuery
jquery.js
CSSとjQueryを使用して、入れ子のリスト要素をドロップダウンメニューにする方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Create a multilevel Dropdown menu with CSS and improve it via jQuery | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript">
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(
function(){
$(this).find('ul:first').css({visibility:"visible",display:"none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility:"hidden"});
});
}
$(function() {
mainmenu();
});
</script>
<!-- CSS -->
<style type="text/css">
#nav, #nav ul { margin:0; padding:0; list-style:none; list-style-position:outside; position:relative; line-height:1.5em; overflow:hiddne; }
#nav a { display:block; padding:0 5px; border:1px solid #333; color:#fff; text-decoration:none; background-color:#333; }
#nav ahover { background-color:#fff; color:#333; }
#nav li { margin:0; padding:0; list-style:none; float:left; position:relative; }
#nav ul { position:absolute; display:none; width:12em; top:1.5em; }
#nav li ul a { width:12em; height:auto; float:left; }
#nav ul ul { top:auto; }
#nav li ul ul { left:12em; margin:0 0 0 10px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display:none; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery'>Create a multilevel Dropdown menu with CSS and improve it via jQuery</a> | 設置サンプル</h1>
<p>▼CSSとjQueryを使用したリスト要素のドロップダウンメニューです。「3 Javascript」にマウスオーバーするとメニューが展開します。</p>
<!-- CODE -->
<ul id="nav">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript » </a>
<ul>
<li><a href="#">3.1 jQuery » </a>
<ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
<br clear="all" >
<!-- CODE / -->
</div>
</body>
</html>
droppy - Nested drop down menus（リスト要素からドロップダウンメニュー生成）
［JS」jquery.js、jquery.droppy.js v0.1.2
［CSS］droppy.css
［CSS］droppy.css
入れ子のリスト要素からドロップダウンメニューを簡単に作成できるjQueryプラグイン。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>droppy | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.droppy.js"></script>
<script type="text/javascript">
$(function(){
$('#nav').droppy({speed: 100});
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/droppy.css" />
</head>
<body>
<div id="wrap">
<h1><a href='http://onehackoranother.com/projects/jquery/droppy/'>droppy-Nested drop down menus</a> | 設置サンプル</h1>
<p>▼入れ子のリスト要素からドロップダウンメニューを作成します。</p>
<!-- CODE -->
<ul id='nav' style="margin-bottom:400px;">
<li><a href='#'>Top level 1</a></li>
<li><a href='#'>Top level 2</a>
<ul>
<li><a href='#'>Sub 2-1</a></li>
<li>
<a href='#'>Sub 2-2</a>
<ul>
<li>
<a href='#'>Sub 2-2-1</a>
<ul>
<li>
<a href='#'>Sub 2-2-1-1</a>
<ul>
<li><a href='#'>Sub 2-2-1-1-1</a></li>
<li><a href='#'>Sub 2-2-1-1-2</a></li>
<li><a href='#'>Sub 2-2-1-1-3</a></li>
<li><a href='#'>Sub 2-2-1-1-4</a></li>
<li><a href='#'>Sub 2-2-1-1-5</a></li>
<li><a href='#'>Sub 2-2-1-1-6</a></li>
</ul>
</li>
<li><a href='#'>Sub 2-2-1-2</a></li>
<li><a href='#'>Sub 2-2-1-3</a></li>
<li><a href='#'>Sub 2-2-1-4</a></li>
</ul>
</li>
<li><a href='#'>Sub 2-2-2</a></li>
<li>
<a href='#'>Sub 2-2-3</a>
<ul>
<li><a href='#'>Sub 2-2-3-1</a></li>
<li><a href='#'>Sub 2-2-3-2</a></li>
<li><a href='#'>Sub 2-2-3-3</a></li>
<li><a href='#'>Sub 2-2-3-4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Sub 2-3</a></li>
</ul>
</li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
Designing the Digg Header
Diggのヘッダ風の垂直型ドロップダウンメニュー
2009/4/8
Designing the Digg Header
jquery.js
jQueryを使用して、クリックで開閉するdigg風のヘッダメニューを作成する方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Designing the Digg Header | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#zone-bar li em").click(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide();
$("#zone-bar>ul>li>a").removeClass();
if(hidden){
$(this)
.parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
});
</script>
<!-- CSS -->
<style type="text/css">
ul,li { list-style:none; margin:0; padding:0; inside; }
.floatleft { float:left; }
.floatright { float:right; }
.clear { clear:both; }
a { text-decoration:none; outline:none; color:#335588; }
a:hover { text-decoration:underline; }
#page-wrap { min-width:960px; max-width:1260px; height:500px; margin:0 auto; padding:0 10px; width:expression(document.body.clientWidth < 961? "960px" :document.body.clientWidth > 1261? "1260px" :"auto"); }
#top-bar { background:#1b5790; min-height:55px; padding:0 10px; font-size:1.3em; font-weight:bold; }
#right-side { float:right; padding-top:15px; }
#right-side img { border:1px solid #fff; vertical-align:middle; }
#right-side a { color:#fff; border-left:1px solid white; height:10px; padding-left:10px; }
#right-side a.first { border:none; padding:0; }
form#main-search { display:inline; position:relative; padding-right:10px; }
form#main-search label { display:none; }
#search-button { position:absolute; right:0; top:-6px; }
#zone-bar { background:#b2d281; min-height:30px; padding:5px 10px 0 10px; }
#zone-bar ul { display:block; }
#zone-bar ul li { height:18px; padding:5px 5px 0 5px; position:relative; float:left; margin-right:10px; line-height:1;}
#zone-bar ul li:hover { background:url(/content/img/ajax/digg_header/zonebar-navleft.png) center left no-repeat; }
#zone-bar ul li a { display:block; float:left; height:23px; position:relative; top:-5px; right:-5px; padding-right:3px; color:#383838; font-weight:bold; font-size:1.1em; text-decoration:none; }
#zone-bar ul li a:hover { background:url(/content/img/ajax/digg_header/zonebar-navright.png) center right no-repeat; }
#zone-bar ul li a span { position:relative; top:6px; }
#zone-bar ul li ul { display:none; position:absolute; top:29px; left:0px; width:150px; border:1px solid #ccc; background:white; padding:10px 0 0 0; }
#zone-bar ul li ul li { float:none; padding:0; margin:0; height:100%; }
#zone-bar ul li ul li:hover { background:none; }
#zone-bar ul li ul li a { display:block; float:none; margin-left:-5px; padding:5px 0 0 10px; width:140px; }
#zone-bar ul li ul li a:hover { background:#d9f0b7; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://css-tricks.com/designing-the-digg-header-how-to-download/'>Designing the Digg Header</a> | 設置サンプル</h1>
<!-- CODE -->
<div id="page-wrap">
<div id="top-bar">
<img src="/content/img/ajax/digg_header/logo.png" alt="DZone" class="floatleft" />
<div id="right-side">
<img src="/content/img/ajax/digg_header/usericon.jpg" alt="user icon" /> 
<a href="#" class="first">User Name</a> 
<a href="#">Submit New</a> 
<a href="#">Logout</a>  
<form id="main-search" onsubmit="return false;">
<label for="search-field" id="search-field-label">Search</label>
<input type="text" tabindex="1" maxlength="255" id="search-field"/>
<input type="image" alt="Search" value="Search" src="/content/img/ajax/digg_header/search.png" id="search-button"/>
</form>
</div>
</div><!-- #top-bar -->
<div id="zone-bar">
<ul>
<li>
<a href="#"><span>
Technology
<em class="opener-technology">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="technologysublist">
<li><a href="#">Apple</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Gadgets</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Industry News</a></li>
<li><a href="#">Linux/Unix</a></li>
<li><a href="#">Microsoft</a></li>
<li><a href="#">Mods</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Software</a></li>
</ul>
</li>
<li>
<a href="#"><span>
World & Business
<em class="opener-world">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="worldsublist">
<li><a href="#">Business & Finance</a></li>
<li><a href="#">World News</a></li>
<li><a href="#">Political News</a></li>
<li><a href="#">Political Opinion</a></li>
<li><a href="#">2008 Elections</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Science
<em class="opener-science">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="sciencesublist">
<li><a href="#">Enviornment</a></li>
<li><a href="#">General Sciences</a></li>
<li><a href="#">Space</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Gaming
<em class="opener-gaming">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="gamingsublist">
<li><a href="#">Industry News</a></li>
<li><a href="#">PC Games</a></li>
<li><a href="#">Playable Web Games</a></li>
<li><a href="#">Nintendo</a></li>
<li><a href="#">PlayStation</a></li>
<li><a href="#">XBox</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Lifestyle
<em class="opener-lifestyle">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="lifestylesublist">
<li><a href="#">Arts & Culture</a></li>
<li><a href="#">Autos</a></li>
<li><a href="#">Educational</a></li>
<li><a href="#">Food & Drink</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Travel & Places</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Entertainment
<em class="opener-entertainment">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="entertainmentsublist">
<li><a href="#">Celebrity</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Television</a></li>
<li><a href="#">Comics & Animation</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Sports
<em class="opener-sports">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="sportssublist">
<li><a href="#">Baseball</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Extreme</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Hockey</a></li>
<li><a href="#">Motorsport</a></li>
<li><a href="#">Soccer</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Other Sports</a></li>
</ul>
</li>
<li>
<a href="#"><span>
Offbeat
<em class="opener-offbeat">
<img src="/content/img/ajax/digg_header/zonebar-downarrow.png" alt="dropdown" />
</em>
</span></a>
<ul class="offbeatsublist">
<li><a href="#">Comedy</a></li>
<li><a href="#">Odd Stuff</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Pets & Animals</a></li>
</ul>
</li>
</ul>
</div><!-- #zone-bar -->
</div><!-- #page-wrap -->
<!-- CODE / -->
</div>
</body>
</html>
Emenu
ヘッダ画像内に収まる固定幅・固定高さのドロップダウンメニュー
2009/4/4
emenu
jquery.js、jquery.emenu.js
ヘッダ画像内に収まる固定幅・固定高さの垂直型ドロップダウンメニューを作成するjQueryプラグイン。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Emenu | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.emenu.js"></script>
<script type="text/javascript">
$(function(){
$('#menu1').emenu();
});
</script>
<!-- CSS -->
<style type="text/css" media="screen">
/* width and height of the container */
.emenu { width: 640px; height:200px; }
/* content (set the background image here) */
.emenu .menu_content {
background:transparent url(http://farm4.static.flickr.com/3113/3104684709_8daf37d518_o.jpg) no-repeat 0 0; padding:3em 1em 1em 1em; }
/* main menu header */
.emenu ul,
.emenu li { margin:0; padding:0; list-style:none; }
.emenu ul li h2 { font-size:1.2em; }
/* main menu link */
.emenu ul li h2 a { padding:5px; text-decoration:none; font-weight:normal; color:#fff; background-color:#666; border:solid #fff; border-width:0 0 2px 2px; }
/* main menu link hover */
.emenu ul li.hover h2 a { background-color:#ff6699; }
/* drop down menu */
.emenu ul li ul { background-color:#eee; border:solid #fff; border-width:0 2px; }
/* drop down menu section */
.emenu ul li ul li { padding:5px 10px; border-top:solid 1px #fff; }
/* drop down menu section header */
.emenu ul li ul li h3 { font-size:1.2em; }
/* drop down menu section list */
.emenu ul li ul li ul li { font-size:0.9em; padding:0 0 0 15px; margin:5px 0; line-height:1.3em; background:transparent url(/content/img/icon/gray/arrow_next.gif) no-repeat left center; }
/* drop down menu section list links */
.emenu ul li ul li ul li a { color:#ff6699; }
.emenu ul li ul li ul li a:hover { color:#666; }
/* ---- Stuff you shouldn't have to change ---- */
.emenu * { margin:0; padding:0; }
.emenu { overflow:hidden; position:relative; }
.emenu ul { position:absolute; z-index:99; }
.emenu ul li { list-style:none; float:left; }
.emenu ul li.first-child { border:0; }
.emenu ul li ul { overflow:hidden; visibility:hidden; }
.emenu ul li.first-child ul { border-left:0; }
.emenu ul li ul li { float:none; }
.emenu ul li ul li.first-child { border:0; }
.emenu ul li ul li ul { visibility:inherit; position:relative; border:0; }
.emenu ul li ul li ul li { border:0; }
.emenu ul li h2 a { display:block; }
.emenu ul li.first-child h2 a { border-left:none; }
.emenu .menu_content { height:100%; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.chromasynthetic.com/blog/emenu-a-jquery-plugin/'>Emenu</a> | 設置サンプル</h1>
<p>▼メニューにマウスオーバーするとヘッダ画像内に収まる固定幅・固定高さの垂直型ドロップダウンメニュー表示されます。</p>
<!-- CODE -->
<div id="menu1">
<ul>
<li>
<h2><a href="#">> Menu 1</a></h2>
<ul>
<li>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h2><a href="#">> Menu 2</a></h2>
<ul>
<li>
<h3>Section 1</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li>
<h3>Section 2</h3>
<ul>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h2><a href="#">> Menu 3</a></h2>
<ul>
<li>
<p>Here are a few links:</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h2><a href="#">> Menu 4</a></h2>
<ul>
<li>
<h3>Section 1</h3>
<p>Here are a few links:</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="menu_content">
<p><a href="http://www.flickr.com/photos/22559849@N06/3104684709/" title="バニラミルクフラペチーノ@STARBUCKS by php_javascript_room, on Flickr">バニラミルクフラペチーノ@STARBUCKS by php_javascript_room, on Flickr</a></p>
</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>
Fixed Fade Out Menu
ロールオーバーでフェードアウトするページ上部固定ナビゲーションバー
2010/2/11
Fixed Fade Out Menu
jquery.js
CSSとjQueryを使用して、ロールオーバーでフェードアウトするナビゲーションバーをページ上部に常に固定表示する方法が掲載されています。
スクロールされているか、ナビゲーションバーにマウスオーバーしているかの2つの判定で透過度を調整しています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* anchor */
$("body").prepend("<div id='top'>top</div>")
$("body").append("<div id='bottom'>bottom</div>");
/* scroll */
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
<!-- CSS -->
<style type="text/css">
#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0; left:0; right:0;
background:#fff url(/content/img/ajax/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0 auto;
width:700px;
}
#nav ul li{
display:inline;
float:left;
margin:0 2px;
}
#nav a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(/content/img/ajax/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#d9d9da none;
color: #fff;
}
#nav a.top span, #nav a.bottom span{
float:left;
width:16px; height:16px;
}
#nav a.top span{
background:transparent url(/content/img/ajax/top.png) no-repeat center center;
}
#nav a.bottom span{
background:transparent url(/content/img/ajax/bottom.png) no-repeat center center;
}
#nav ul li.search{
float:right;
}
#nav input.text{
float:left;
border:1px solid #ccc;
margin:0 1px 0 50px; padding:0;
line-height:20px;
}
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px; height:22px;
background:#e8e9ea url(/content/img/ajax/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#d9d9da;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/'>Fixed Fade Out Menu</a></p>
<!-- CODE -->
<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a>Link #1</a></li>
<li><a>Link #2</a></li>
<li><a>Link #3</a></li>
<li><a>Link #4</a></li>
<li><a>Link #5</a></li>
<li><a>Link #6</a></li>
<li class="search">
<input type="text" class="text" /><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
Floating menu jQuery&CSS
ページをスクロールしてもついてくるフローティングメニュー
unknown
Floating menu jQuery&CSS
jquery.js v1.2.6、jquery.dimensions.js v1.2
jQueryとCSSを使用して、ページをスクロールするとメニューも一緒にスクロールするフローティングメニューを作成する方法が掲載されています。
設置イメージ設置サンプルサンプルを見るfile not exists
bW9kdWxlL2luY2x1ZGUvYWpheC9qcXVlcnlfcGx1Z2luX25hdmlnYXRpb25tZW51L2Zsb2F0aW5nX21lbnUuaW5j
bW9kdWxlL2luY2x1ZGUvYWpheC9qcXVlcnlfcGx1Z2luX25hdmlnYXRpb25tZW51L2Zsb2F0aW5nX21lbnUuaW5j
jBreadCrumb
スライド式のトピックパス
2010/2/11
jBreadCrumb
jquery.js、jquery.jBreadCrumb.js v1.1、jquery.easing.js v1.3
スライド式のトピックパス（パンくずリスト）を生成するjQueryプラグイン。 マウスオーバーでリンクを展開、長いトピックパスをコンパクトに表示することができます。
スムーズなスライドを行うために、jQuery Easing Pluginが使用されています。 横V字型部分はジャストサイズをデフォルトのCSSで定義しておき、右に余白を持たせた横V時画像を展開時にJS側で指定しています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jBreadCrumb.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#breadCrumb").jBreadCrumb({easing:'linear'});
$("#breadCrumb2").jBreadCrumb({easing:'swing'});
});
</script>
<!-- CSS -->
<style type="text/css">
/* Float Clearing
---------------------------------------------------------------------*/
.module:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
/* float clearing for IE6 */
* html .module{
height:1%;
overflow:visible;
}
/* float clearing for IE7 */
* + html .module{
min-height:1%;
}
/* Breadcrumb Styles
---------------------------------------------------------------------*/
.breadCrumb {
margin:0; padding:5px;
float:left;
display:block;
width:990px; height:21px;
overflow:hidden;
border:solid 1px #dedede;
background:#fff;
}
.breadCrumb ul {
margin:0; padding:0;
height:21px;
display:block;
}
.breadCrumb ul li {
display:block;
float:left;
position:relative;
height:21px;
overflow:hidden;
line-height:21px;
margin:0 6px 0 0; padding:0 10px 0 0;
font-size:.9167em;
background:url(/content/img/ajax/Chevron.gif) no-repeat 100% 0;
}
.breadCrumb ul li div.chevronOverlay {
position:absolute;
right:0; top:0;
z-index:2;
}
.breadCrumb ul li span {
display:block;
overflow:hidden;
}
.breadCrumb ul li a {
display:block;
position:relative;
height:21px;
line-height:21px;
overflow:hidden;
float:left;
}
.breadCrumb ul li.first a
{
height:16px !important;
text-indent:-1000em;
width:16px;
margin:2px 0 0 0;padding:0;
overflow:hidden;
background:url(/content/img/ajax/IconHome.gif) no-repeat 0 0;
}
.breadCrumb ul li.first a:hover {
background-position:0 -16px;
}
.breadCrumb ul li.last {
background:none;
margin-right:0;
padding-right:0;
}
.chevronOverlay {
display:none;
background:url(/content/img/ajax/ChevronOverlay.png) no-repeat 100% 0;
width:13px; height:20px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html'>jBreadCrumb</a></p>
<!-- CODE -->
<h2>liner</h2>
<div class="breadCrumbHolder module">
<div id="breadCrumb" class="breadCrumb module">
<ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">Ajax（エージャックス）</a>
</li>
<li>
<a href="#">jQuery（ジェークエリー）</a>
</li>
<li>
<a href="#">Plugin（プラグイン）</a>
</li>
<li>
<a href="#">Navigation/Menu（ナビゲーション／メニュー）</a>
</li>
<li>
jBreadCrumb（スライド式のトピックパス）
</li>
</ul>
</div>
</div>
<h2>swing</h2>
<div class="breadCrumbHolder module">
<div id="breadCrumb2" class="breadCrumb module">
<ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">Ajax（エージャックス）</a>
</li>
<li>
<a href="#">jQuery（ジェークエリー）</a>
</li>
<li>
<a href="#">Plugin（プラグイン）</a>
</li>
<li>
<a href="#">Navigation/Menu（ナビゲーション／メニュー）</a>
</li>
<li>
jBreadCrumb（スライド式のトピックパス）
</li>
</ul>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jGlideMenu
iPod風のインラインメニュー
2009/4/4
jGlideMenu
［JS］jquery.js、jQuery.jGlideMenu.js v0.6.5、jquery.dimensions.js v1.2
［CSS］jGlideMenu.css
［CSS］jGlideMenu.css
ドラッグ＆ドロップ可能なiPod風のインラインメニューを作成するjQueryプラグイン。
メニュー数が多い場合は、上下方向にスクロールアップ・ダウンします。 親メニューのli要素のrel属性の値を、子メニューとして関連づけるul要素のid属性の値に指定して、関連付けを行っています。
<ul id='tile_001' class='jGlide_001_tiles'>
<li rel='tile_002'>Link 1</li>
<li rel='tile_003'>Link 2</li>
<li rel='tile_004'>Link 3</li>
<li><a href='#'>Link</a></li>
</ul>
<ul id='tile_002' class='jGlide_001_tiles'>
<li rel='tile_005'>Link 1-1</li>
<li><a href='#'>Link</a></li>
・・・
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jGlideMenu | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/interface/interface-1.2.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jQuery.jGlideMenu.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.dimensions.js"></script>
<script type="text/javascript">
$(function() {
/* メニュー初期化 */
$('#jGlide_001').jGlideMenu({tileSource :'.jGlide_001_tiles' });
/* 切替リンクを関連付け */
$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
</script>
<!-- CSS -->
<link rel="stylesheet" href="/content/lib/jquery/jGlideMenu.css" type="text/css" />
<style type="text/css">
a#launch { text-decoration:none; color:#535353; }
a#launch:hover { text-decoration:underline; color:#f90; }
.ifM_header { cursor:move; }
#overview a { color:darkgreen; text-decoration:none; }
#overview a:hover { color:#f90; }
#jGlide_001 { top:100px; left:10px; }
#jGlide_002 { top:150px; left:400px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://sonicradish.com/labs/jGlideMenu/distro/jGlideMenu_0.6.5/'>jGlideMenu</a> | 設置サンプル</h1>
<!-- CODE -->
<div class="jGM_box" id="jGlide_001">
<ul id="tile_001" class="jGlide_001_tiles" title="タイル1" alt="タイル1の説明">
<li rel="tile_002">Link 1</li>
<li rel="tile_003">Link 2</li>
<li rel="tile_004">Link 3</li>
<li><a href="http://www.google.com">Link to Google 1</a></li>
<li><a href="http://www.google.com">Link to Google 2</a></li>
<li><a href="http://www.google.com">Link to Google 3</a></li>
<li><a href="http://www.google.com">Link to Google 4</a></li>
<li><a href="http://www.google.com">Link to Google 5</a></li>
<li><a href="http://www.google.com">Link to Google 6</a></li>
<li><a href="http://www.google.com">Link to Google 7</a></li>
<li><a href="http://www.google.com">Link to Google 8</a></li>
<li><a href="http://www.google.com">Link to Google 9</a></li>
<li><a href="http://www.google.com">Link to Google 10</a></li>
<li><a href="http://www.google.com">Link to Google 11</a></li>
<li><a href="http://www.google.com">Link to Google 12</a></li>
<li><a href="http://www.google.com">Link to Google 13</a></li>
<li><a href="http://www.google.com">Link to Google 14</a></li>
<li><a href="http://www.google.com">Link to Google 15</a></li>
<li><a href="http://www.google.com">Link to Google 16</a></li>
<li><a href="http://www.google.com">Link to Google 17</a></li>
<li><a href="http://www.google.com">Link to Google 18</a></li>
<li><a href="http://www.google.com">Link to Google 19</a></li>
<li><a href="http://www.google.com">Link to Google 20</a></li>
</ul>
<ul id="tile_002" class="jGlide_001_tiles" title="タイル2" alt="タイル2の説明">
<li rel="tile_005">Link 1-1</li>
<li><a href="http://www.google.com">Link to Google</a></li>
</ul>
<ul id="tile_003" class="jGlide_001_tiles" title="タイル3" alt="タイル3の説明">
<li><a href="http://www.google.com">Link to Google</a></li>
</ul>
<ul id="tile_004" class="jGlide_001_tiles" title="タイル4" alt="タイル4の説明">
<li><a href="http://www.google.com">Link to Google</a></li>
<li><a href="http://www.yahoo.com">Link to Yahoo!</a></li>
<li><a href="http://www.ask.com">Link to Ask.com</a></li>
</ul>
<ul id="tile_005" class="jGlide_001_tiles" title="タイル5" alt="タイル5の説明">
<li><a href="http://www.google.com">Link to Google</a></li>
</ul>
</div>
<!-- CODE / -->
</div>
</body>
</html>
jQuery accordion Plugin
アコーディオン
2010/2/11
jQuery plugin: Accordion
iPhone風にパネルが上下展開するアコーディオンメニューを実装するjQueryプラグイン。 マウスオーバーなど、イベントを指定して展開する場合は、jQuery Dimensions Plugin、jQuery Easing Pluginが必要です。 アニメーション方法やデフォルト時のパネル展開の有無などを指定することができます。
設置イメージjQuery Accordion Pluginの設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.dimensions-1.2.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.1.1.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.accordion.js"></script>
<script type="text/javascript">
$(function(){
/* example1 */
$('#list1a').accordion();
$('#list1b').accordion({
autoheight: false
});
/* マウスオーバーで開閉 */
$('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});
$('#navigation a').click(function(){
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* example1 */
.basic {
width: 260px;
font-family: verdana;
border: 1px solid black;
}
.basic div {
background-color: #eee;
}
.basic p {
margin-bottom : 10px;
border: none;
text-decoration: none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 10px;
}
.basic a {
cursor:pointer;
display:block;
padding:5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: black;
background-color: #00a0c6;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #999;
background-image: url(/content/img/ajax/AccordionTab0.gif);
}
.basic a:hover {
background-color: white;
background-image: url(/content/img/ajax/AccordionTab2.gif);
}
.basic a.selected {
color: black;
background-color: #80cfe2;
}
/* example2 */
#navigation {
border:1px solid #5263ab;
margin:0px;
padding:0px;
text-indent:0px;
background-color:#e2e2e2;
width:200px;
}
#navigation a.head {
cursor:pointer;
border:1px solid #cccccc;
background:#5263ab url(/content/img/ajax/collapsed.gif) no-repeat scroll 3px 4px;
color:#ffffff;
display:block;
font-weight:bold;
margin:0px;
padding:5px;
text-indent:14px;
text-decoration: none;
}
#navigation a.head:hover {
color:#ffff99;
}
#navigation a.selected {
background-image: url(/content/img/ajax/expanded.gif);
}
#navigation a.current {
background-color:#ffff99;
}
#navigation ul {
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li {
list-style:none outside none; display:inline;
}
#navigation li li a {
padding:2px;
color:#000000;
display:block;
text-indent:10px;
text-decoration: none;
}
#navigation li li a:hover {
background-color:#ffff99;
color:#ff0000;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://bassistance.de/jquery-plugins/jquery-plugin-accordion/'>jQuery plugin: Accordion</a></p>
<!-- CODE -->
<h2>例1：基本（クリックでパネル展開）</h2>
<div class="basic" style="float:left;" id="list1a">
<a>There is one obvious advantage:</a>
<div>
<p>
You've seen it coming!<br/>
Buy now and get nothing for free!<br/>
Well, at least no free beer. Perhaps a bear,<br/>
if you can afford it.
</p>
</div>
<a>Now that you've got...</a>
<div>
<p>
your bear, you have to admit it!<br/>
No, we aren't selling bears.
</p>
</div>
<a>Rent one bear, ...</a>
<div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div><!-- #list1a -->
<div class="basic" style="float:left; margin-left: 2em;" id="list1b">
<a>There is one obvious advantage:</a>
<div>
<p>
You've seen it coming!<br/>
Buy now and get nothing for free!<br/>
Well, at least no free beer. Perhaps a bear,<br/>
if you can afford it.
</p>
</div>
<a>Now that you've got...</a>
<div>
<p>
your bear, you have to admit it!<br/>
No, we aren't selling bears.
</p>
</div>
<a>Rent one bear, ...</a>
<div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div><!-- #list1b -->
<br clear="all" />
<h2>例2：マウスオーバーでパネル展開（jquery.dimensions.js v1.2、jquery.easing.js v1.1.1 使用）</h2>
<div style="height:250px;margin-bottom:1em;">
<ul id="navigation">
<li>
<a class="head" href="#">menu 1</a>
<ul>
<li><a href="#">menu 1-1</a></li>
<li><a href="#">menu 1-2</a></li>
<li><a href="#">menu 1-3</a></li>
<li><a href="#">menu 1-4</a></li>
<li><a href="#">menu 1-5</a></li>
<li><a href="#">menu 1-6</a></li>
<li><a href="#">menu 1-7</a></li>
</ul>
</li>
<li>
<a class="head" href="#">menu 2</a>
<ul>
<li><a href="#">menu 2-1</a></li>
<li><a href="#">menu 2-2</a></li>
<li><a href="#">menu 2-3</a></li>
<li><a href="#">menu 2-4</a></li>
<li><a href="#">menu 2-5</a></li>
<li><a href="#">menu 2-6</a></li>
<li><a href="#">menu 2-7</a></li>
</ul>
</li>
<li>
<a class="head" href="#">menu 3</a>
<ul>
<li><a href="#">menu 3-1</a></li>
<li><a href="#">menu 3-2</a></li>
<li><a href="#">menu 3-3</a></li>
</ul>
</li>
</ul>
</div><!-- #navigation -->
<br clear="all" />
<!-- / CODE -->
</div>
</body>
</html>
jQuery MagicLine Navigation
スライド式のナビゲーションバー
2010/2/11
jQuery MagicLine Navigation
スライド式に移動するナビゲーションバーをjQueryを使用して実装する方法が掲載されています。
ハイライト部分は、バースタイル、ランプスタイル（CSS3使用で角丸）のサンプルがあります。 ナビゲーションの各リンクにマウスオーバーするとハイライトスタイルがスライド式にそのリンクに移動します。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $el, leftPos, newWidth,
$mainNav = $("#example-one"),
$mainNav2 = $("#example-two");
/* example1 */
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
$mainNav2.append("<li id='magic-line-two'></li>");
var $magicLineTwo = $("#magic-line-two");
$magicLineTwo
.width($(".current_page_item_two").width())
.height($mainNav2.height())
.css("left", $(".current_page_item_two a").position().left)
.data("origLeft", $(".current_page_item_two a").position().left)
.data("origWidth", $magicLineTwo.width())
.data("origColor", $(".current_page_item_two a").attr("rel"));
/* example2 */
$("#example-two li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth,
backgroundColor: $el.attr("rel")
})
}, function() {
$magicLineTwo.stop().animate({
left: $magicLineTwo.data("origLeft"),
width: $magicLineTwo.data("origWidth"),
backgroundColor: $magicLineTwo.data("origColor")
});
});
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/img/ajax/jquery/css_pirobox/white/style.css" />
<style type="text/css">
body { background:#333; color:#fff; }
/* example1 */
.nav-wrap {
margin:20px auto; padding:0;
background-color:rgba(0,0,0,0.6);
border-top:2px solid #fff;
border-bottom:2px solid #fff;
}
#example-one {
position:relative;
margin:0 auto; padding:0;
list-style:none;
width:960px;
}
#example-one li {
margin:0; padding:0;
list-style:none;
display:inline-block; /* inline->inline-block */
}
#example-one li a {
color:#bbb;
display:block; float:left;
padding:4px 10px 2px 10px;
text-decoration:none;
text-transform:uppercase;
font-size:14px;
}
#example-one li a:hover {
color:#fff;
}
#magic-line {
position:absolute;
bottom:-2px; left:0;
width:100px; height:2px;
background:#fe4902;
z-index:9999px;
}
/* example2 */
#example-two {
margin:0 auto; padding:0;
list-style:none;
position:relative;
width:960px;
}
#example-two li {
margin:0; padding:0;
list-style:none;
display:inline-block; /* inline->inline-block */
}
#example-two li a {
position:relative;
z-index:200;
color:#bbb; font-size:14px;
display:block;
float:left;
padding:4px 10px 2px 10px;
text-decoration:none;
text-transform:uppercase;
}
#example-two li a:hover {
color:#fff;
}
#example-two #magic-line-two {
position:absolute;
top:0; left:0;
width:100px;
background:rgba(220, 133, 5, 0.9);
z-index:100;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://css-tricks.com/jquery-magicline-navigation/'>jQuery MagicLine Navigation</a></p>
<!-- CODE -->
<h2>例1</h2>
<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Buy Tickets</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">The Show</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Magic Shop</a></li>
</ul>
</div>
<h2>例2</h2>
<div class="nav-wrap">
<ul class="group" id="example-two">
<li><a rel="#fe4902" href="#">Home</a></li>
<li><a rel="rgba(50,69,12,0.9)" href="#">Buy Tickets</a></li>
<li><a rel="rgba(113,116,0,0.9)" href="#">Group Sales</a></li>
<li class="current_page_item_two"><a rel="rgba(220,133,5,0.9)" href="#">Reviews</a></li>
<li><a rel="rgba(236,85,25,0.9)" href="#">The Show</a></li>
<li><a rel="rgba(190,40,5,0.9)" href="#">Videos</a></li>
<li><a rel="rgba(123,91,230,0.9)" href="#">Photos</a></li>
<li><a rel="rgba(255,255,255,0.4)" href="#">Magic Shop</a></li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jQuery Menu plugin
アプリケーションメニューのようなドロップダウンメニュー
2009/4/4
jQuery Menu plugin
アプリケーションメニューのようなドロップダウンメニューを作成するjQueryプラグイン。
右または下線に十分なスペースがない場合は、可視領域内にそのサブメニューが配置されます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Menu plugin | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.dimensions-1.2.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.menu.js"></script>
<script type="text/javascript">
$(function(){
/***** 例1 */
var options = {minWidth:120, arrowSrc:'/content/img/ajax/jquery_menu/arrow_right.gif', onClick:function(e, menuItem){
alert('"' + $(this).text() + 'がクリックされました"');
}};
$('#menuone').menu(options);
/***** 例2 */
var options2 = {minWidth:120, arrowSrc:'/content/img/ajax/jquery_menu/arrow_right.gif'};
var items = [
{src:'test', url:'http://www.jquery.com'},
{src:''}, /* separator */
{src:'test2', subMenu:[
{src:'sub 1'},
{src:'sub 2', url:'http://p.sohei.org', target:'_blank'},
{src:'sub 3'}
]}
];
$('#menutwo').menu(options2, items);
/***** 例3 */
var options3 = {minWidth:120, arrowSrc:'/content/img/ajax/jquery_menu/arrow_right.gif'};
$('#menuthree').menu(options3);
/***** 例4 */
var options4 = {minWidth:120, arrowSrc:'/content/img/ajax/jquery_menu/arrow_right.gif'};
//creating a menu without items
var menu = new $.Menu('#menufour', null, options4);
//adding items to the menu
menu.addItems([
new $.MenuItem({src:'test', url:'http://www.jquery.com'}, options4),
new $.MenuItem({src:''}) /* separator */
]);
var itemWithSubmenu = new $.MenuItem({src:'test2'}, options4);
//creating a menu with items (as child of itemWithSubmenu)
new $.Menu(itemWithSubmenu, [
new $.MenuItem({src:'sub 1'}, options4),
new $.MenuItem({src:'sub 2', url:'http://p.sohei.org', target:'_blank'}, options4),
new $.MenuItem({src:'sub 3'}, options4)
], options4);
//adding the submenu to the main menu
menu.addItem(itemWithSubmenu);
/***** 例5 */
var options5 = {minWidth:120, arrowSrc:'arrow_right.gif', copyClassAttr:true};
$('#menufive>img').menu(options5, '#menufivelist');
});
</script>
<!-- CSS -->
<style type="text/css" media="screen">
ul, li { margin:0; padding:0; list-style:none; }
#root-menu-div ul { border:1px solid #000; }
#root-menu-div li { white-space:nowrap; }
* html #root-menu-div li { height:1.5em; }
ul.menu, #root-menu-div ul { background-color:#fff; }
li.menu-separator.active{ background-color:transparent; }
li.active { background-color:#888; }
.activetarget { background-color:#fff; }
* html div.menu-item { display:inline; }
li.menumain { float:left; padding:0 10px; }
div.menu-item { padding:1px 10px 1px 4px; }
img.menu-item-arrow{ position:absolute; right:4px; top:8px; }
li.menu-separator{ border-bottom:1px solid #000; font-size:0; height:0; line-height:0; margin:2px 0; }
li.red { color:red; }
li.blue { color:blue; }
.demo { border:1px solid #000;background:#eee;overflow:hidden; }
.demo p { margin:0 10px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.chromasynthetic.com/blog/emenu-a-jquery-plugin/'>jQuery Menu plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>例1</h2>
<p>リストからメニューバーを作成します。空のli要素は区切り線として使用されます。</p>
<div class="demo">
<ul id="menuone" class="menu">
<li class="menumain">File
<ul><li>New window</li>
<li></li> <!-- separator -->
<li>Save...</li>
<li>Print...</li>
<li></li> <!-- separator -->
<li>Exit</li>
</ul>
</li>
<li class="menumain">Edit
<ul><li>Undo</li>
<li>Redo</li>
<li></li> <!-- separator -->
<li>Cut</li>
<li>Copy</li>
<li>Paste<ul><li>All</li><li>Something</li></ul></li>
<li>Delete</li>
</ul>
</li>
<!-- ...and even more... -->
</ul>
</div>
<br><br><br><br><br><br><br>
<h2>例2</h2>
<p>JavaScriptからメニューを作成し、ID名が「menutwo」の要素上でクリックした時に開きます。第2引数をアイテムに渡すと、プラグインはメニューコンテンツとしてそれを使用します。</p>
<div class="demo">
<p>..some content..</p>
<p><span id="menutwo">Menu Button</span></p>
<p>..some content..</p>
</div>
<h2>例3</h2>
<p>例2と同じですが、パラメータとしてアイテムをプラグインに渡さず、メニュー部分の内部にあるリスト要素を調べてメニューを作成しています。</p>
<div class="demo">
<div id="menuthree"><p>Menu Button</p>
<ul>
<li><a href="http://www.jquery.com">test</a></li>
<li></li> <!-- separator -->
<li>test2
<ul>
<li>sub 1</li>
<li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
<li>sub 3</li>
</ul>
</li>
</ul>
</div>
</div>
<h2>例4</h2>
<p>例2と同じですが、$.Menuと$.MenuItemクラスとメソッドを使用してメニューを作成しています。</p>
<div class="demo">
<p>..some content..</p>
<p><span id="menufour">Menu Button</span></p>
<p>..some content..</p>
</div>
<h2>例5</h2>
<p>
メニューアイテムをjqueryセレクタ（ul要素）として渡すことができます。
</p>
<div class="demo">
<p>..some content..</p>
<p id="menufive">Menu Button <img src="/content/img/ajax/jquery_menu/arrowdown.png" /> - Menu Button <img src="/content/img/ajax/jquery_menu/arrowdown.png" /> - Menu Button <img src="/content/img/ajax/jquery_menu/arrowdown.png" /></p>
<ul id="menufivelist" style="display:none;">
<li>one</li>
<li class="red">two</li>
<li class="blue">three</li>
<li>four
<ul>
<li>four.1
<ul>
<li>four.1.1</li>
<li>four.1.2</li>
<li>four.1.3</li>
</ul>
</li>
<li>four.2</li>
<li>four.3</li>
</ul>
</li>
</ul>
<p>..some content..</p>
</div>
<!-- CODE / -->
</div>
</body>
</html>
LavaLamp for jQuery lovers!
ランプがともるようなエフェクト効果のあるナビゲーション
2008/12/2
LavaLamp for jQuery lovers!
jquery.js v1.1.3.1+、jquery.easing.js v1.3、jquery.lavalamp.js
画像使用でランプがともるようなエフェクト効果のあるナビゲーションを実装できるjQueryプラグイン。 その他、画像を使わないタイプ、下線スタイルのナビゲーションのサンプルも掲載されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>LavaLamp for jQuery lovers! | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.lavalamp.js"></script>
<script type="text/javascript">
$(function() {
$("#nav1, #nav2, #nav3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
<!-- CSS -->
<link rel="stylesheet" href="/content/lib/jquery/lavalamp_test.css" type="text/css" />
</head>
<body>
<div id="wrap">
<h1><a href='http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/'>LavaLamp for jQuery lovers!</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>画像使用</h2>
<ul class="lavaLampWithImage" id="nav1">
<li class="current"><a href="#">PHP</a></li>
<li><a href="#">JavaScript/DOM</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">音声・動画配信</a></li>
</ul>
<h2>画像不使用</h2>
<ul class="lavaLampNoImage" id="nav2">
<li class="current"><a href="#">PHP</a></li>
<li><a href="#">JavaScript/DOM</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">音声・動画配信</a></li>
</ul>
<h2>下線スタイル</h2>
<ul class="lavaLampBottomStyle" id="nav3">
<li class="current"><a href="#">PHP</a></li>
<li><a href="#">JavaScript/DOM</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">音声・動画配信</a></li>
</ul>
<!-- CODE / -->
</div>
</body>
</html>
Navitation Effect Using jQuery
jQeryを使用してMootoolsサイト風のナビゲーションを作成する方法
unknown
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery - NETTUTS
jquery.js、sliding_effect.js
jQeryを使用してMootoolsサイト風のナビゲーションを作成する方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery - NETTUTS ||設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/sliding_effect.js"></script>
<style type="text/css">
#demo {
margin:0; padding:10px;
width:50%;
background:#1d1d1d;
font-family:"Lucida Grande", Verdana, sans-serif;
font-size:100%;
}
#navigation-block {
position:relative;
top:200px; left:200px;
}
#hide {
position:absolute;
top:30px; left:-190px;
}
ul#sliding-navigation {
list-style:none;
margin:0; padding:0;
overflow:hidden;
}
ul#sliding-navigation li {
list-style:none;
margin:0; padding:0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a {
display:block;
width:150px;
margin:0 0 5px 0; padding:5px 18px;
}
ul#sliding-navigation li.sliding-element h3 {
color:#fff;
background:#333 url("sliding_effect/heading_bg.jpg") repeat-y;
font-weight:normal;
}
ul#sliding-navigation li.sliding-element a {
color:#999;
background:#222 url("sliding_effect/tab_bg.jpg") repeat-y;
border:1px solid #1a1a1a;
text-decoration:none;
}
ul#sliding-navigation li.sliding-element a:hover {
color:#ffff66;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/'>How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery - NETTUTS</a> | 設置サンプル</h1>
<!-- CODE -->
<div id="demo">
<ul id="sliding-navigation">
<li class="sliding-element"><h3>ナビゲーションタイトル</h3></li>
<li class="sliding-element"><a href="#">Link 1</a></li>
<li class="sliding-element"><a href="#">Link 2</a></li>
<li class="sliding-element"><a href="#">Link 3</a></li>
<li class="sliding-element"><a href="#">Link 4</a></li>
<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
Self-resizing navigation
ナビゲーションの幅を任意のピクセルサイズに動的に変更
2010/2/12
Self-resizing navigation
jquery.js
ナビゲーションの幅を任意のピクセルサイズに動的に変更する方法が掲載されています。
サイズを変更しても、ナビゲーションの各アイテムのサイズが均一になるよう変更時に、全体幅に合わせて、jQueryで各アイテム（li要素）の幅を調整しています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
changeWidth(500);
$('#buttons input').click(function(){
changeWidth($(this).val());
});
});
function changeWidth(menuWidth){
var menuItems = $('#menu li').size();
var itemWidth = (menuWidth/menuItems)-2;
$('#menu').css({'width': menuWidth +'px'});
$('#menu a').css({'width': itemWidth +'px'});
}
</script>
<!-- CSS -->
<style type="text/css">
.codropsmenu1{
margin:30px 0; padding:3px;
height:30px;
background-color:#333;
}
.codropsmenu1 ul{
list-style:none;
margin:0; padding:0;
}
.codropsmenu1 ul li{
list-style:none;
margin:0; padding:0;
display:inline;
position:relative;
}
.codropsmenu1 ul li a{
float:left;
height:28px;
line-height:30px;
text-align:center;
text-decoration:none;
display:block;
background-color:#333;
font-size:12px;
color:#dddfdf;
text-shadow: 0 1px 0 #000;
border-right:1px solid #000;
border-left:1px solid #404040;
border-top:1px solid #333;
border-bottom:1px solid #333;
outline:none;
cursor:pointer;
overflow:hidden;
}
.codropsmenu1 ul li a.last{
border-right:1px solid #333;
}
.codropsmenu1 ul li a.first{
border-left:1px solid #333;
}
.codropsmenu1 ul li a:hover,
.codropsmenu1 ul li a.selected{
background-color:#404;
border-top:1px solid #111;
border-bottom:1px solid #111;
color:#fff;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://tympanus.net/codrops/2010/01/12/self-resizing-navigation-menu-with-jquery/'>Self-resizing navigation</a></p>
<!-- CODE -->
<div class="codropsmenu1" id="menu">
<ul>
<li><a href="" class="first"><span>Home</span></a></li>
<li><a href=""><span>About</span></a></li>
<li><a href=""><span>Portfolio</span></a></li>
<li><a href=""><span>Contact</span></a></li>
<li><a href=""><span>Support</span></a></li>
<li><a href="" class="last"><span>Login</span></a></li>
</ul>
</div>
<h3>▼クリックするとナビゲーションの幅が変わります。</h3>
<p id="buttons">
<input type="button" value="400" />
<input type="button" value="500" />
<input type="button" value="600" />
<input type="button" value="700" />
<input type="button" value="800" />
<input type="button" value="900" />
<input type="button" value="1000" />
</p>
<!-- / CODE -->
</div>
</body>
</html>
Simple jQuery Dropdowns
シンプルなドロップダウン型ナビゲーション
2010/2/12
Simple jQuery Dropdowns
IE6含むクロスブラウザ対応
jquery.js
最小限のスクリプトでシンプルなドロップダウン型ナビゲーションを実装する方法が掲載されています。
hover()を使用して、ナビゲーションの各アイテムにマウスオーバーした時にその子メニューを展開するCSSクラスを指定し、マウスアウト時にその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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/piroBox.1_2.js"></script>
<script type="text/javascript">
$(function(){
/* アイテムの開閉 */
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
/* 入れ子のリストがあるアイテムに「>>」を付加 */
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/img/ajax/jquery/css_pirobox/white/style.css" />
<style type="text/css">
body { background:#fff; }
ul,li { list-style:none; margin:0; padding:0; }
/* 第1階層 */
ul.dropdown { position:relative; height:500px;}
ul.dropdown li { font-weight:bold; float:left; zoom:1; background:#ccc; }
ul.dropdown a:hover { color:#000; }
ul.dropdown a:active { color:#ffa500; }
ul.dropdown li a { display:block; padding:4px 8px; border-right:1px solid #333; text-decoration:none; color:#222; }
ul.dropdown li:last-child a { border-right:none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { background:#F3D673; color:black; position:relative; }
ul.dropdown li.hover a { color:black; }
/* 第2階層 */
ul.dropdown ul { width:23em; visibility:hidden; position:absolute; top:100%; left:0; }
ul.dropdown ul li { font-weight:normal; background:#eee; color:#000; border-bottom:1px solid #ccc; float:none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right:none; width:100%; display:inline-block; }
/* 第3階層 */
ul.dropdown ul ul { left:100%; top:0; }
ul.dropdown li:hover >ul { visibility:visible; }
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://css-tricks.com/simple-jquery-dropdowns/'>Simple jQuery Dropdowns</a></p>
<!-- CODE -->
<ul class="dropdown">
<li><a href="#">携帯サイトの作り方</a>
<ul class="sub_menu">
<li><a href='./?t=mobile&p=spec'>携帯コンテンツ作成技術情報・開発ツール</a>
<ul>
<li><a href='./?t=mobile&p=spec#a_spec'>各キャリア公式サイトの技術情報</a></li>
<li><a href='./?t=mobile&p=spec#a_emulator'>エミュレータ</a></li>
<li><a href='./?t=mobile&p=spec#a_addon'>携帯サイト制作に便利なFirefoxアドオン</a></li>
</ul>
</li>
<li><a href='./?t=mobile&p=xhtmlbasic11'>携帯対応HTML/XHTMLタグ一覧</a>
<ul>
<li><a href='./?t=mobile&p=xhtmlbasic11#a_tag'>使用可能なタグ一覧</a></li>
<li><a href='./?t=mobile&p=xhtmlbasic11#a_support'>各キャリアのHTML/XHTML対応状況</a></li>
</ul>
</li>
<li><a href='./?t=mobile&p=rule'>XHTMLの記述ルール</a></li>
<li><a href='./?t=mobile&p=common_attribute'>共通属性</a></li>
<li><a href='./?t=mobile&p=data_type'>属性型／独自拡張属性</a>
<ul>
<li><a href='./?t=mobile&p=data_type#a_attribute_type'>属性型</a></li>
<li><a href='./?t=mobile&p=data_type#a_data_type'>データ型</a></li>
<li><a href='./?t=mobile&p=data_type#a_extention_attribute'>独自拡張属性（キャリア共通）</a></li>
<li><a href='./?t=mobile&p=data_type#a_extention_attribute_docomo'>独自拡張属性（docomoのみ）</a></li>
<li><a href='./?t=mobile&p=data_type#a_extention_attribute_au'>独自拡張属性（auのみ）</a></li>
<li><a href='./?t=mobile&p=data_type#a_attribute'>その他の属性</a></li>
<li><a href='./?t=mobile&p=data_type#a_property'>プロパティ</a></li>
</ul>
</li>
<li><a href='./?t=mobile&p=speclimit'>携帯サイト作成時の注意点（制限事項含む）</a>
<ul>
<li><a href='./?t=mobile&p=speclimit#a_imageformat'>画像フォーマット</a></li>
<li><a href='./?t=mobile&p=speclimit#a_filesize'>ファイルサイズなどの容量制限</a></li>
<li><a href='./?t=mobile&p=speclimit#a_script'>JavaScript・スタイルシート（CSS）対応状況</a></li>
<li><a href='./?t=mobile&p=speclimit#a_charset'>文字コード</a></li>
<li><a href='./?t=mobile&p=speclimit#a_caution'>携帯サイト作成上の注意点</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">携帯対応HTML/XHTMLタグ</a>
<ul class="sub_menu">
<li><a href='./?t=mobile&p=basic'>コメント／XML宣言／DOCTYPE宣言</a></li>
<li><a href='./?t=mobile&p=structure_module'>構造モジュール</a>
<ul>
<li><a href='./?t=mobile&p=structure_module#a_html'>html〔(X)HTML文書のルート〕</a></li>
<li><a href='./?t=mobile&p=structure_module#a_head'>head〔ページのヘッダ情報 〕</a></li>
<li><a href='./?t=mobile&p=structure_module#a_title'>title〔ページのタイトル〕</a></li>
<li><a href='./?t=mobile&p=structure_module#a_body'>body〔ページの本文〕</a></li>
</ul>
</li>
<li><a href='./?t=mobile&p=text_module'>テキストモジュール</a></li>
<li><a href='./?t=mobile&p=hypertext_module'>ハイパーテキストモジュール</a></li>
<li><a href='./?t=mobile&p=list_module'>リストモジュール</a></li>
<li><a href='./?t=mobile&p=forms_module'>フォームモジュール</a></li>
<li><a href='./?t=mobile&p=basic_tables_module'>基本テーブルモジュール</a></li>
<li><a href='./?t=mobile&p=image_module'>イメージモジュール</a></li>
<li><a href='./?t=mobile&p=object_module'>オブジェクトモジュール</a></li>
<li><a href='./?t=mobile&p=presentation_module'>視覚効果モジュール</a></li>
<li><a href='./?t=mobile&p=metainformation_module'>メタ情報モジュール</a></li>
<li><a href='./?t=mobile&p=link_module'>関連リンクモジュール</a></li>
<li><a href='./?t=mobile&p=base_module'>基準モジュール</a></li>
<li><a href='./?t=mobile&p=stylesheet_module'>スタイルシートモジュール</a></li>
<li><a href='./?t=mobile&p=html'>その他</a></li>
<li><a href='./?t=mobile&p=frame'>フレームモジュール</a></li>
<li><a href='./?t=mobile&p=emoji'>絵文字</a></li>
</ul>
</li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
Smooth Animated jQuery Menu
垂直方向にストンと広がるアニメーションメニュー
2009/4/8
Smooth Animated jQuery Menu
jquery.js、jquery.easing.js v1.3
jQueryを使用して、メニューにマウスオーバーした時に、垂直方向にストンと広がるアニメーションメニューを作成する方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Smooth Animated jQuery Menu | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
/* マウスオーバー時 */
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
/* マウスアウト時 */
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
</script>
<!-- CSS -->
<style type="text/css">
ul { margin:0; padding:0; list-style:none; height:100px; }
li { margin:0; padding:0; list-style:none; width:100px; height:50px; float:left; color:#191919; text-align:center; overflow:hidden; }
li a { color:#fff; text-decoration:none; font-weight:bold; }
p { padding:0 5px; }
.subtext { padding-top:15px; }
/* メニューの色 */
.green { background:#6aa63b; }
.yellow { background:#fbc700; }
.red { background:#d52100; }
.purple { background:#5122b4; }
.blue { background:#0292c0; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/'>Smooth Animated jQuery Menu</a> | 設置サンプル</h1>
<p>▼メニューにマウスオーバーするとメニューが広がります。</p>
<!-- CODE -->
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
<!-- CODE / -->
</div>
</body>
</html>
Superfish - jQuery menu plugin by Joel Birch
シャドウ付きのドロップダウンメニュー
2009/4/5
Superfish
［JS］jquery.js、hoverIntent.js、superfish.js v1.4.8、jquery.bgiframe.min.js（オプション：IE6対応）、supersubs.js（オプション：ナビゲーションバー）
［CSS］superfish.css、superfish-vertical.css（オプション：垂直型）、superfish-navbar.css（オプション：ナビゲーションバー）
［画像］arrows-ffffff.png、shadow.png
［CSS］superfish.css、superfish-vertical.css（オプション：垂直型）、superfish-navbar.css（オプション：ナビゲーションバー）
［画像］arrows-ffffff.png、shadow.png
入れ子のリスト要素からシャドウ付きのドロップダウンメニューを作成するjQueryプラグイン。
オプションで、シャドウや矢印アイコンの有無、アニメーションスピードなどをカスタマイズすることが出来ます。 また、IE6でSelect要素の下にメニューが隠れてしまうのを防ぐには、「jquery.bgiframe.min.js」を使用します。 スタイルは水平型ドロップダウンメニュー、垂直型ドロップダウンメニュー、ナビゲーションバーの3タイプが用意されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Superfish | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/superfish/hoverIntent.js"></script>
<script type="text/javascript" src="/content/lib/jquery/superfish/jquery.bgiframe.min.js"></script><!-- for 例3 -->
<script type="text/javascript" src="/content/lib/jquery/superfish/supersubs.js"></script><!-- for 例5 -->
<script type="text/javascript" src="/content/lib/jquery/superfish/superfish.js"></script>
<script type="text/javascript">
$(function(){
/* 例1 */
$('ul.sf-menu').superfish();
/* 例2 */
$('#exp2').superfish({
delay: 2000, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'slow', // faster animation speed
autoArrows: true, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
/* 例3 */
$("#exp3").superfish().find('ul').bgIframe({opacity:false});
/* 例4 */
$("#exp4").superfish({
animation: {height:'show'}, // slide-down effect without fade-in
delay: 1200 // 1.2 second delay on mouseout
});
/* 例5 */
$("#exp5").superfish({
pathClass: 'current'
});
});
</script>
<!-- CSS -->
<link rel="stylesheet" href="/content/lib/jquery/superfish/superfish.css" type="text/css" />
<link rel="stylesheet" href="/content/lib/jquery/superfish/superfish-vertical.css" type="text/css" /><!-- for 例4 -->
<link rel="stylesheet" href="/content/lib/jquery/superfish/superfish-navbar.css" type="text/css" /><!-- for 例5 -->
</head>
<body>
<div id="wrap">
<h1><a href='http://users.tpg.com.au/j_birch/plugins/superfish/'>Superfish</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>例1：デフォルト</h2>
<div class="cf">
<ul class="sf-menu">
<li class="current">
<a href="#a">MENU 1</a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">MENU 1-1</a>
<ul>
<li class="current"><a href="#">MENU 1-1-1</a></li>
<li><a href="#aba">MENU 1-1-2</a></li>
<li><a href="#abb">MENU 1-1-3</a></li>
<li><a href="#abc">MENU 1-1-4</a></li>
<li><a href="#abd">MENU 1-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-2</a>
<ul>
<li><a href="#">MENU 1-2-1</a></li>
<li><a href="#">MENU 1-2-2</a></li>
<li><a href="#">MENU 1-2-3</a></li>
<li><a href="#">MENU 1-2-4</a></li>
<li><a href="#">MENU 1-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-3</a>
<ul>
<li><a href="#">MENU 1-3-1</a></li>
<li><a href="#">MENU 1-3-2</a></li>
<li><a href="#">MENU 1-3-3</a></li>
<li><a href="#">MENU 1-3-4</a></li>
<li><a href="#">MENU 1-3-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 2</a>
</li>
<li>
<a href="#">MENU 3</a>
<ul>
<li>
<a href="#">MENU 3-1</a>
<ul>
<li><a href="#">MENU 3-1-1</a></li>
<li><a href="#">MENU 3-1-2</a></li>
<li><a href="#">MENU 3-1-3</a></li>
<li><a href="#">MENU 3-1-4</a></li>
<li><a href="#">MENU 3-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-2</a>
<ul>
<li><a href="#">MENU 3-2-1</a></li>
<li><a href="#">MENU 3-2-2</a></li>
<li><a href="#">MENU 3-2-3</a></li>
<li><a href="#">MENU 3-2-4</a></li>
<li><a href="#">MENU 3-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-3</a>
<ul>
<li><a href="#">MENU 3-3-1</a></li>
<li><a href="#">MENU 3-3-2</a></li>
<li><a href="#">MENU 3-3-3</a></li>
<li><a href="#">MENU 3-3-4</a></li>
<li><a href="#">MENU 3-3-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-4</a>
<ul>
<li><a href="#">MENU 3-4-1</a></li>
<li><a href="#">MENU 3-4-2</a></li>
<li><a href="#">MENU 3-4-3</a></li>
<li><a href="#">MENU 3-4-4</a></li>
<li><a href="#">MENU 3-4-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-5</a>
<ul>
<li><a href="#">MENU 3-5-1</a></li>
<li><a href="#">MENU 3-5-2</a></li>
<li><a href="#">MENU 3-5-3</a></li>
<li><a href="#">MENU 3-5-4</a></li>
<li><a href="#">MENU 3-5-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 4</a>
</li>
</ul>
</div>
<form action="#" method="post">
<p>
<select><option>a test select box</option><option>a test select box</option></select>
<select><option>a test select box</option><option>a test select box</option></select>
<select><option>a test select box</option><option>a test select box</option></select>
<select><option>a test select box</option><option>a test select box</option></select>
</p>
</form>
<h2>例2：オプション指定</h2>
<div class="cf">
<ul class="sf-menu" id="exp2">
<li class="current">
<a href="#a">MENU 1</a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">MENU 1-1</a>
<ul>
<li class="current"><a href="#">MENU 1-1-1</a></li>
<li><a href="#aba">MENU 1-1-2</a></li>
<li><a href="#abb">MENU 1-1-3</a></li>
<li><a href="#abc">MENU 1-1-4</a></li>
<li><a href="#abd">MENU 1-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-2</a>
<ul>
<li><a href="#">MENU 1-2-1</a></li>
<li><a href="#">MENU 1-2-2</a></li>
<li><a href="#">MENU 1-2-3</a></li>
<li><a href="#">MENU 1-2-4</a></li>
<li><a href="#">MENU 1-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-3</a>
<ul>
<li><a href="#">MENU 1-3-1</a></li>
<li><a href="#">MENU 1-3-2</a></li>
<li><a href="#">MENU 1-3-3</a></li>
<li><a href="#">MENU 1-3-4</a></li>
<li><a href="#">MENU 1-3-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 2</a>
</li>
<li>
<a href="#">MENU 3</a>
<ul>
<li>
<a href="#">MENU 3-1</a>
<ul>
<li><a href="#">MENU 3-1-1</a></li>
<li><a href="#">MENU 3-1-2</a></li>
<li><a href="#">MENU 3-1-3</a></li>
<li><a href="#">MENU 3-1-4</a></li>
<li><a href="#">MENU 3-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-2</a>
<ul>
<li><a href="#">MENU 3-2-1</a></li>
<li><a href="#">MENU 3-2-2</a></li>
<li><a href="#">MENU 3-2-3</a></li>
<li><a href="#">MENU 3-2-4</a></li>
<li><a href="#">MENU 3-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-3</a>
<ul>
<li><a href="#">MENU 3-3-1</a></li>
<li><a href="#">MENU 3-3-2</a></li>
<li><a href="#">MENU 3-3-3</a></li>
<li><a href="#">MENU 3-3-4</a></li>
<li><a href="#">MENU 3-3-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-4</a>
<ul>
<li><a href="#">MENU 3-4-1</a></li>
<li><a href="#">MENU 3-4-2</a></li>
<li><a href="#">MENU 3-4-3</a></li>
<li><a href="#">MENU 3-4-4</a></li>
<li><a href="#">MENU 3-4-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-5</a>
<ul>
<li><a href="#">MENU 3-5-1</a></li>
<li><a href="#">MENU 3-5-2</a></li>
<li><a href="#">MENU 3-5-3</a></li>
<li><a href="#">MENU 3-5-4</a></li>
<li><a href="#">MENU 3-5-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 4</a>
</li>
</ul>
</div>
<h2>例3：jquery.bgiframe.min.js使用</h2>
<p>IE6でselect要素の背後にメニューが隠れてしまうのを防ぎます。</p>
<div class="cf">
<ul class="sf-menu" id="exp3">
<li class="current">
<a href="#a">MENU 1</a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">MENU 1-1</a>
<ul>
<li class="current"><a href="#">MENU 1-1-1</a></li>
<li><a href="#aba">MENU 1-1-2</a></li>
<li><a href="#abb">MENU 1-1-3</a></li>
<li><a href="#abc">MENU 1-1-4</a></li>
<li><a href="#abd">MENU 1-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-2</a>
<ul>
<li><a href="#">MENU 1-2-1</a></li>
<li><a href="#">MENU 1-2-2</a></li>
<li><a href="#">MENU 1-2-3</a></li>
<li><a href="#">MENU 1-2-4</a></li>
<li><a href="#">MENU 1-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-3</a>
<ul>
<li><a href="#">MENU 1-3-1</a></li>
<li><a href="#">MENU 1-3-2</a></li>
<li><a href="#">MENU 1-3-3</a></li>
<li><a href="#">MENU 1-3-4</a></li>
<li><a href="#">MENU 1-3-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 2</a>
</li>
<li>
<a href="#">MENU 3</a>
<ul>
<li>
<a href="#">MENU 3-1</a>
<ul>
<li><a href="#">MENU 3-1-1</a></li>
<li><a href="#">MENU 3-1-2</a></li>
<li><a href="#">MENU 3-1-3</a></li>
<li><a href="#">MENU 3-1-4</a></li>
<li><a href="#">MENU 3-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-2</a>
<ul>
<li><a href="#">MENU 3-2-1</a></li>
<li><a href="#">MENU 3-2-2</a></li>
<li><a href="#">MENU 3-2-3</a></li>
<li><a href="#">MENU 3-2-4</a></li>
<li><a href="#">MENU 3-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-3</a>
<ul>
<li><a href="#">MENU 3-3-1</a></li>
<li><a href="#">MENU 3-3-2</a></li>
<li><a href="#">MENU 3-3-3</a></li>
<li><a href="#">MENU 3-3-4</a></li>
<li><a href="#">MENU 3-3-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-4</a>
<ul>
<li><a href="#">MENU 3-4-1</a></li>
<li><a href="#">MENU 3-4-2</a></li>
<li><a href="#">MENU 3-4-3</a></li>
<li><a href="#">MENU 3-4-4</a></li>
<li><a href="#">MENU 3-4-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-5</a>
<ul>
<li><a href="#">MENU 3-5-1</a></li>
<li><a href="#">MENU 3-5-2</a></li>
<li><a href="#">MENU 3-5-3</a></li>
<li><a href="#">MENU 3-5-4</a></li>
<li><a href="#">MENU 3-5-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 4</a>
</li>
</ul>
</div>
<form action="#" method="post">
<p>
<select><option>a test select box</option><option>a test select box</option></select>
<select><option>a test select box</option><option>a test select box</option></select>
<select><option>a test select box</option><option>a test select box</option></select>
<select><option>a test select box</option><option>a test select box</option></select>
</p>
</form>
<h2>例4：垂直型のドロップダウンメニュー（superfish-vertical.css使用）</h2>
<div class="cf">
<ul class="sf-menu sf-vertical sf-js-enabled sf-shadow" id="exp4">
<li class="current">
<a href="#a">MENU 1</a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">MENU 1-1</a>
<ul>
<li class="current"><a href="#">MENU 1-1-1</a></li>
<li><a href="#aba">MENU 1-1-2</a></li>
<li><a href="#abb">MENU 1-1-3</a></li>
<li><a href="#abc">MENU 1-1-4</a></li>
<li><a href="#abd">MENU 1-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-2</a>
<ul>
<li><a href="#">MENU 1-2-1</a></li>
<li><a href="#">MENU 1-2-2</a></li>
<li><a href="#">MENU 1-2-3</a></li>
<li><a href="#">MENU 1-2-4</a></li>
<li><a href="#">MENU 1-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-3</a>
<ul>
<li><a href="#">MENU 1-3-1</a></li>
<li><a href="#">MENU 1-3-2</a></li>
<li><a href="#">MENU 1-3-3</a></li>
<li><a href="#">MENU 1-3-4</a></li>
<li><a href="#">MENU 1-3-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 2</a>
</li>
<li>
<a href="#">MENU 3</a>
<ul>
<li>
<a href="#">MENU 3-1</a>
<ul>
<li><a href="#">MENU 3-1-1</a></li>
<li><a href="#">MENU 3-1-2</a></li>
<li><a href="#">MENU 3-1-3</a></li>
<li><a href="#">MENU 3-1-4</a></li>
<li><a href="#">MENU 3-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-2</a>
<ul>
<li><a href="#">MENU 3-2-1</a></li>
<li><a href="#">MENU 3-2-2</a></li>
<li><a href="#">MENU 3-2-3</a></li>
<li><a href="#">MENU 3-2-4</a></li>
<li><a href="#">MENU 3-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-3</a>
<ul>
<li><a href="#">MENU 3-3-1</a></li>
<li><a href="#">MENU 3-3-2</a></li>
<li><a href="#">MENU 3-3-3</a></li>
<li><a href="#">MENU 3-3-4</a></li>
<li><a href="#">MENU 3-3-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-4</a>
<ul>
<li><a href="#">MENU 3-4-1</a></li>
<li><a href="#">MENU 3-4-2</a></li>
<li><a href="#">MENU 3-4-3</a></li>
<li><a href="#">MENU 3-4-4</a></li>
<li><a href="#">MENU 3-4-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-5</a>
<ul>
<li><a href="#">MENU 3-5-1</a></li>
<li><a href="#">MENU 3-5-2</a></li>
<li><a href="#">MENU 3-5-3</a></li>
<li><a href="#">MENU 3-5-4</a></li>
<li><a href="#">MENU 3-5-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 4</a>
</li>
</ul>
</div>
<h2>例5：ナビゲーションバー（superfish-navbar.css、supersubs.js使用）</h2>
<div class="cf">
<ul class="sf-menu sf-navbar sf-js-enabled sf-shadow" id="exp5">
<li class="current">
<a href="#a">MENU 1</a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">MENU 1-1</a>
<ul>
<li class="current"><a href="#">MENU 1-1-1</a></li>
<li><a href="#aba">MENU 1-1-2</a></li>
<li><a href="#abb">MENU 1-1-3</a></li>
<li><a href="#abc">MENU 1-1-4</a></li>
<li><a href="#abd">MENU 1-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-2</a>
<ul>
<li><a href="#">MENU 1-2-1</a></li>
<li><a href="#">MENU 1-2-2</a></li>
<li><a href="#">MENU 1-2-3</a></li>
<li><a href="#">MENU 1-2-4</a></li>
<li><a href="#">MENU 1-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 1-3</a>
<ul>
<li><a href="#">MENU 1-3-1</a></li>
<li><a href="#">MENU 1-3-2</a></li>
<li><a href="#">MENU 1-3-3</a></li>
<li><a href="#">MENU 1-3-4</a></li>
<li><a href="#">MENU 1-3-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 2</a>
</li>
<li>
<a href="#">MENU 3</a>
<ul>
<li>
<a href="#">MENU 3-1</a>
<ul>
<li><a href="#">MENU 3-1-1</a></li>
<li><a href="#">MENU 3-1-2</a></li>
<li><a href="#">MENU 3-1-3</a></li>
<li><a href="#">MENU 3-1-4</a></li>
<li><a href="#">MENU 3-1-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-2</a>
<ul>
<li><a href="#">MENU 3-2-1</a></li>
<li><a href="#">MENU 3-2-2</a></li>
<li><a href="#">MENU 3-2-3</a></li>
<li><a href="#">MENU 3-2-4</a></li>
<li><a href="#">MENU 3-2-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-3</a>
<ul>
<li><a href="#">MENU 3-3-1</a></li>
<li><a href="#">MENU 3-3-2</a></li>
<li><a href="#">MENU 3-3-3</a></li>
<li><a href="#">MENU 3-3-4</a></li>
<li><a href="#">MENU 3-3-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-4</a>
<ul>
<li><a href="#">MENU 3-4-1</a></li>
<li><a href="#">MENU 3-4-2</a></li>
<li><a href="#">MENU 3-4-3</a></li>
<li><a href="#">MENU 3-4-4</a></li>
<li><a href="#">MENU 3-4-5</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3-5</a>
<ul>
<li><a href="#">MENU 3-5-1</a></li>
<li><a href="#">MENU 3-5-2</a></li>
<li><a href="#">MENU 3-5-3</a></li>
<li><a href="#">MENU 3-5-4</a></li>
<li><a href="#">MENU 3-5-5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">MENU 4</a>
</li>
</ul>
</div>
<!-- CODE / -->
</div>
</body>
</html>
Using jQuery for Background Image Animations
背景画像の位置を移動してナビゲーションがアニメーションしているように見せる
2008/12/3
Using jQuery for Background Image Animations
jquery.js v1.2.6、jquery.backgroundPosition-1.02.js
画像を使用したアニメーション効果付きのロールオーバーナビゲーションを実装できるjQueryプラグイン。 グラデーションの背景画像を使用してフェード効果を付けることもできます。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery plugin: wSlide | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="/content/lib/jquery/jquery.backgroundPosition-1.02.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/* 例A: 上から下へアニメーション */
$('#navA a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
/* 例B: 右から左へアニメーション */
$('#navB a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
/* 例C: 1色フェード */
$('#navC a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
/* 例C: 2色フェード */
$('#navD a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
</script>
<!-- CSS -->
<style type="text/css">
h2 { clear:both; }
ul {list-style:none;margin:0;padding:0;overflow:hidden;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;list-style:none;}
li a {display:block;padding:5px 10px;height:100%;color:#fff;text-decoration:none;border-right:1px solid #FFF;}
li a {background:url("/content/img/ajax/background_image_animation_bg.jpg") repeat 0 0;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}
#navA a {background:url("/content/img/ajax/background_image_animation_bg2.jpg") repeat -20px 35px;}
#navB a {background:url("/content/img/ajax/background_image_animation_bg.jpg") repeat 0 0;}
#navC a {background:url("/content/img/ajax/background_image_animation_bg3.jpg") repeat 0 0;}
#navD a {background:url("/content/img/ajax/background_image_animation_bg3.jpg") repeat 0 0;}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://snook.ca/archives/javascript/jquery-bg-image-animations/'>Using jQuery for Background Image Animations</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>例: スクリプトなし（CSSのみ）</h2>
<ul id="noscript">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>例A: 上から下へアニメーション</h2>
<ul id="navA">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>例B: 右から左へアニメーション</h2>
<ul id="navB">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>例C: 1色フェード</h2>
<ul id="navC">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>例D: 2色フェード</h2>
<ul id="navD">
<li><a href="#">TOP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- CODE / -->
</div>
</body>
</html>
垂直型アコーディオンメニュー
unknown
Making accordion menu using jquery
jquery.js
メニューにマウスオーバーあるいは、メニューをクリックした時にスライドする垂直型アコーディオンメニューを作成する方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Making accordion menu using jquery | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/* menu_headクラスを持つp要素がクリックされた時に、menu_bodyクラスを持つ要素をスライドする */
$("#firstpane p.menu_head").click(function(){
$(this).css({backgroundImage:"url(/content/img/icon/color/arrow_down.gif)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(/content/img/icon/color/arrow_back.gif)"});
});
/* menu_headクラスを持つp要素にマウスオーバーされた時に、menu_bodyクラスを持つ要素をスライドする */
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(/content/img/icon/color/arrow_down.gif)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(/content/img/icon/color/arrow_back.gif)"});
});
});
</script>
<!-- CSS -->
<style type="text/css">
.menu_list { width:150px; }
.menu_head { padding:5px 10px; cursor:pointer; position:relative; margin:1px; font-weight:bold; background:#eef4d3 url("/content/img/icon/color/arrow_back.gif") center right no-repeat; }
.menu_body { display:none; }
.menu_body a { display:block; color:#006699; background-color:#efefef; padding-left:10px; font-weight:bold; text-decoration:none; }
.menu_body a:hover { color:#000; text-decoration:underline; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html'>Making accordion menu using jquery</a></h1>
<!-- CODE -->
<div class="cf" style="height:500px;">
<div style="float:left; width:300px;">
<h2>クリックするとメニューが展開します</h2>
<div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
</div><!-- #firstpane -->
</div>
<div style="float:left; width:300px;">
<h2>マウスオーバーするとメニューが展開します</h2>
<div id="secondpane" class="menu_list">
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
</div><!-- #secondpane -->
</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>
Bullet List Accordion Menu
jquery.js、ddaccordion.js
jQueryを使用して、リスト要素から垂直型アコーディオンメニューを作成する方法が掲載されています。
メニューのヘッダ（h3要素）をクリックするとサブメニュー（ul要素）がスライドアップ・ダウンします。 ページのURLに「menu.html?expandable=0」のURLにパラメータを指定することで、展開するメニューを指定することができます。 メニュー番号の先頭は0始まりです。
設置イメージ設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Bullet List Accordion Menu | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "expandable", /* Shared CSS class name of headers group that are expandable */
contentclass: "categoryitems", /* Shared CSS class name of contents group */
revealtype: "click", /* Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" */
mouseoverdelay: 200, /* if revealtype="mouseover", set delay in milliseconds before header expands onMouseover */
collapseprev: true, /* Collapse previous content (so only one open at any time)? true/false */
defaultexpanded: [0], /* index of content(s) open by default [index1, index2, etc]. [] denotes no content */
onemustopen: false, /* Specify whether at least one header should be open always (so never all headers closed) */
animatedefault: false, /* Should contents open by default be animated into view? */
persiststate: true, /* persist state of opened contents within browser session? */
toggleclass: ["", "openheader"], /* Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] */
togglehtml: ["prefix", "", ""], /* Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) */
animatespeed: "fast", /* speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" */
oninit:function(headers, expandedindices){ /* custom code to run when headers have initalized */
/* 何らかの処理 */
},
onopenclose:function(header, index, state, isuseractivated){ /* custom code to run whenever a header is opened or closed */
/* 何らかの処理 */
}
});
</script>
<!-- CSS -->
<style type="text/css">
.arrowlistmenu { width:180px; margin:20px 0; }
.arrowlistmenu .menuheader { color:#fff; background:black url(/content/img/ajax/ddaccordion/titlebar.png) repeat-x center left; margin:0 0 10px 0; padding:4px 0 4px 10px; text-transform:uppercase; cursor:hand,pointer; }
.arrowlistmenu .openheader { background-image:url(/content/img/ajax/ddaccordion/titlebar-active.png); }
.arrowlistmenu ul { list-style-type:none; margin:0 0 8px 0; padding:0; }
.arrowlistmenu ul li { padding-bottom:2px; }
.arrowlistmenu ul li a { color:#a70303; background:url(/content/img/ajax/ddaccordion/arrowbullet.png) no-repeat center left; display:block; padding:2px 0 2px 19px; border-bottom:1px solid #dadada; text-decoration:none; font-weight:bold; font-size:90%; }
.arrowlistmenu ul li a:visited { color:#a70303; }
.arrowlistmenu ul li a:hover { color:#a70303; background-color:#f3f3f3; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html'>Bullet List Accordion Menu</a> | 設置サンプル</h1>
<!-- CODE -->
<ul>
<li><a href="example3.php?expandable=0&f=include/ajax/jquery_plugin_navigationmenu/ddaccordion.inc">URLパラメータで1番目のメニューを展開</a></li>
<li><a href="example3.php?expandable=1&f=include/ajax/jquery_plugin_navigationmenu/ddaccordion.inc">URLパラメータで2番目のメニューを展開</a></li>
<li><a href="example3.php?expandable=2&f=include/ajax/jquery_plugin_navigationmenu/ddaccordion.inc">URLパラメータで3番目のメニューを展開</a></li>
</ul>
<div class="arrowlistmenu">
<h3 class="menuheader expandable">MENU 1</h3>
<ul class="categoryitems">
<li><a href="#">Link 1-1</a></li>
<li><a href="#">Link 1-2</a></li>
<li><a href="#">Link 1-3</a></li>
<li><a href="#">Link 1-4</a></li>
<li><a href="#">Link 1-5</a></li>
<li><a href="#">Link 1-6</a></li>
<li><a href="#">Link 1-7</a></li>
<li><a href="#">Link 1-8</a></li>
</ul>
<h3 class="menuheader expandable">MENU 2</h3>
<ul class="categoryitems">
<li><a href="#">Link 2-1</a></li>
<li><a href="#">Link 2-2</a></li>
<li><a href="#">Link 2-3</a></li>
<li><a href="#">Link 2-4</a></li>
<li><a href="#">Link 2-5</a></li>
</ul>
<h3 class="menuheader expandable">MENU 3</h3>
<ul class="categoryitems">
<li><a href="#">Link 3-1</a></li>
<li><a href="#">Link 3-2</a></li>
<li><a href="#">Link 3-3</a></li>
<li><a href="#">Link 3-4</a></li>
<li><a href="#">Link 3-5</a></li>
</ul>
<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>
</div><!-- .arrowlistmenu -->
<!-- CODE / -->
</div>
</body>
</html>