#navi(../)
# suckerfish.inc.php

|     |     |
| --- | --- |
|<span style="font-size:12px">RIGHT:100|LEFT:360|c</span>
|~サマリ|Suckerfish Dropdownを用いたナビゲーションメニュー|
|~リビジョン|1.0|
|~対応バージョン|1.4.7以上|
|~投稿者|[Logue](/Logue)|
|~投稿日|&new{2007-05-19 (土) 21:55:34};|

# 概要
<span style="color:Red">※PukiPlusではデフォルトで含まれます。</span>

[Suckerfish Dropdowns](http://alistapart.com/articles/dropdowns/)を用いた階層ナビゲーションメニューを描画するプラグインです。デザインなどは、スタイルシート上で行うため、navibar2.inc.phpよりも動作は軽量です。

PukiWiki Plus!用のスキンであれば、navibar2をsukerfishに書き換えるだけでsukerfishに切り替えることができます。

1.0より本家のPukiWikiでも正式に使えるようになりました。

# インストール
基本的に、IE7以降、FireFox2以降、WebKit（Safari、Google Chrome）であれば、スタイルシートの設定のみで、JavaScriptいらずのポップアップメニューを作れます。以下のスタイルシートや、xxxLogue、White Flowのスタイルシートを参考にデザインしてください。

デフォルトのIDはnavですが、プラグイン側で変更することも可能です。

## JavaScriptの設定
基本的にスタイルシートのみで問題ありませんがIE6に対応させたり、アニメーションさせたい場合は入れる必要があります。

### IE6の場合
[れぶろぐ - [JavaScript] suckerfish.js の改良](http://www.revulo.com/blog/20100110.html)を参考に以下のコードをヘッダーに入れてください。
#code(JavaScript)
(function() {

try {
```
 document.execCommand("BackgroundImageCache", false, true);
```
} catch(e) {}

var sfhover = / sfhover\b/;

onMouseEnter = function() {
```
 var target = window.event.srcElement;
 target.className += " sfhover";
```
}

onMouseLeave = function() {
```
 var target = window.event.srcElement;
 target.className = target.className.replace(sfhover, "");
```
}

onLoad = function() {
```
 window.detachEvent("onload", onLoad);
```

```
 var lis = document.getElementById("nav").getElementsByTagName("LI");
 for (var i = 0, n = lis.length; i < n; ++i) {
   var li = lis[i];
   li.onmouseenter = onMouseEnter;
   li.onmouseleave = onMouseLeave;
 }
```
}

window.attachEvent("onload", onLoad);

})();
}}

### jQueryを使用している場合
[jquery.suckerfish.js](http://be.twixt.us/jquery/suckerFish.php)もしくは、[jquery.superfish.js](http://users.tpg.com.au/j_birch/plugins/superfish/)を入れることを推奨します。後者はアニメーションの種類なども指定できます。ヘッダーには、以下のコードを入れてください。
:jQuery.suckerfishを使用する場合|
#code(JavaScript)
$(document).ready(function(){
```
	$("#nav li").hover(
		function(){
			$("ul", this).fadeIn("fast");	// ここの値を変えるとアニメーションが変更できます。
		}, 
		function() { } 
	);
	if (document.all) {
		$("#nav li").hoverClass ("sfHover");
	}
```
});
$.fn.hoverClass = function(c) {
```
	return this.each(function(){
		$(this).hover( 
			function() { $(this).addClass(c);  },
			function() { $(this).removeClass(c); }
		);
	});
```
};
}}
:Superfishを使用する場合（推奨）|
この例では、下に伸びながらフェードインして表示される。（透過PNGを使っている場合は、opacityは指定しないこと。IEで悲惨な目に合います）
#code(JavaScript)
$(document).ready(function(){
```
	$('ul#nav').superfish({animation:   {opacity:'show',height:'show'} });
```
});
}}
### dojoを使用する場合
#code(JavaScript)
dojo.addOnload(function(){
```
	dojo.connect(dojo.byId('nav'),'onmouseover',function(elem){
		dojo.addClass(elem, "sfHover");
	});
	dojo.connect(dojo.byId('nav'),'onMouseOut',function(elem){
		dojo.removeClass(elem, "sfHover");
	});
```
});
}}

## スタイルシートの記述例
:縦（xxxLogueのようなメニューの場合）|
#code(css)
ul { /* all lists */
```
	padding: 0;
	margin: 0;
	list-style: none;
```
}

li { /* all list items */
```
	float: left;
	position: relative;
	width: 10em;
```
}

li ul { /* second-level lists */
```
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
```
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
```
	top: auto;
	left: auto;
```
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
```
	display: block;
```
}
}}

:横に伸びるポップアップメニュー（White Flow Plus!のようなメニュー場合）|
#code(css)
#nav, #nav ul {
```
	position:relative;
	list-style-type:none;
	margin:0;
	padding:0;
```
}
#nav, #nav a, #nav a:visited {
```
	display:block;
	text-decoration:none;
```
}
#nav li {
```
	position:relative;
```
}

#nav a{
```
	padding: 3px;
	text-decoration: none;
```
}

#nav *:hover > a {
```
	background:#5796e9;
	color:white;
```
}

#nav li ul {
```
	display:none;
```
}

#nav li:hover > ul {
```
	display:block;
	position:absolute;
	top: -0.5em;
	left:100%;	/* 左にメニューを表示したい場合はここをright:100%;にする */
	width: 230px; 
	border: 1px solid #aaa;
	background-color: white;
	padding: 10px 0px;
	text-indent: 0.5em;
	opacity: 0.95;
```
}

#nav img{
```
	display:inline;
	vertical-align:middle;
```
}
}}
# Tips
上記のスタイルシートに、以下のように追記するとデザインが崩れません。たぶん。
#code(css)
#nav li a, #nav span.noexists {
```
	略
```
}

#nav span.noexists {
```
	color:#CCCCCC;
	background-color:transparent;
```
}

#nav span.noexists a{
```
	display:inline;
	background:#999;
	padding:0;
```
}
}}

# 使用方法
基本的にnavibar2.inc.phpと同じです。以下のコードで呼び出し、内容は[Navigation](/Navigation)で指定します。
```
#suckerfish(ページ名)
```

基本的にスタイルシートによるデザインなので、スキンの一部として使うことを推奨します。メニューを呼び出したい箇所に
```
<?php if (exist_plugin('suckerfish')) echo do_plugin_convert('suckerfish'); ?>
```
と入れてください。

# サンプル
このサイトの上部を参照。

※新開発のスキンを作る途上で開発したプラグインです。
# ダウンロード
|     |     |     |
| --- | --- | --- |
|~ver|~変更点|~ファイル|
|1.0|・Gui Edit、TrackBackなどにアイコンが表示されてないバグを修正。  
・PukiWiki本家にも対応。|[suckerfish.inc.php.3](/attachment/66d5e2884b8138004c2701ed)|
|0.3|・アイコンが定義されていない場合、項目が表示されないバグを修正。|[suckerfish.inc.php.2](/attachment/66d5e2854b8138004c2701ec)|
|0.2|・アイコン表示に対応。|[suckerfish.inc.php.1](/attachment/66d5e2824b8138004c2701eb)|
|0.1|・初回リリース。  
・とりあえず、navibar2.inc.phpとリプレース可能な完成度。|[suckerfish.inc.php](/attachment/66d5e27f4b8138004c2701ea)|

# TODO
* 理論上３段以上のサブメニューも可能だが、コードの補正を行っていないため、コードが乱れる可能性大。現状は、navibar2.inc.phpと同程度のことしかできない。
* アイコン表示処理をスクリプト側にやらせる必要があるのだろうか？class属性を変更してスタイルシートによって指定する方がいいかもしれない。
# 関連リンク
* [A List Apart](/ Articles: Suckerfish Dropdowns>http://alistapart.com/articles/dropdowns/)
* [Built from source. » Blog Archive » A fix for Suckerfish dropdowns in IE 7](http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/) - IE7における表示バグ修正
* [Sons of suckerfish dropdown IE fix (JavaScript)](http://snipplr.com/view/2567/sons-of-suckerfish-dropdown-ie-fix/)
* [http://www.cssnite.jp/vol17/CSSNiteVol17_takano.pdf](http://www.cssnite.jp/vol17/CSSNiteVol17_takano.pdf) - 日本語によるSukerfish Dropdownの解説
* [れぶろぐ - [JavaScript] suckerfish.js の改良](http://www.revulo.com/blog/20100110.html)
* [Dropdown Menu CSS Generator](http://pixopoint.com/products/suckerfish_css/) - sukerfishのCSSを自動生成してくれる
* [jquery.suckerfish.js](http://be.twixt.us/jquery/suckerFish.php) - jQuery版のsuckerfish
  * [superfish](http://users.tpg.com.au/j_birch/plugins/superfish/) - 改良版。アニメーションの種類が多い。結局のところCSS次第ということで・・・

# コメント
#pcomment


---

## Page Navigation

- Canonical URL: https://logue.be/Web素材/PukiWiki/suckerfish.inc.php
- Permalink: https://logue.be/66d5d5874b8138004c26fc47
- Parent: [PukiWiki](/66d5d56c4b8138004c26fc2c.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 13 total
  - [blogs.inc.php](/66d5d56e4b8138004c26fc2e.md)
  - [gimage.inc.php](/66d5d5704b8138004c26fc30.md)
  - [google.inc.php](/66d5d5724b8138004c26fc32.md)
  - [jimakuin.inc.php](/66d5d5744b8138004c26fc34.md)
  - [legend](/66d5d5764b8138004c26fc36.md)
  - [mabi_avatar.inc.php](/66d5d5784b8138004c26fc38.md)
  - [mabimml](/66d5d57a4b8138004c26fc3b.md)
  - [mml.inc.php](/66d5d57c4b8138004c26fc3d.md)
  - [navibar3.inc.php](/66d5d57f4b8138004c26fc3f.md)
  - [nicovideo.inc.php](/66d5d5814b8138004c26fc41.md)
  - [puny.inc.php](/66d5d5834b8138004c26fc43.md)
  - [rss10pp.inc.php](/66d5d5854b8138004c26fc45.md)
  - [zoome.inc.php](/66d5d5894b8138004c26fc49.md)
- Last updated: 2024-09-02T16:49:26.189Z by 
- Full page listing (all children regardless of count): https://logue.be/_api/v3/page-listing/children?id=66d5d5874b8138004c26fc47