suckerfish.inc.php

サマリWikiでカスタマイズ可能なCSSだけで作るポップアップメニュー
リビジョン1.0
対応バージョン1.4.7
投稿者Logue
投稿日2010-06-07 (月) 12:41:47

種別

  • CSSだけで作るポップアップメニュー

概要

  • Navigationページで定義したメニューを表示するプラグインです。
  • メニューのだしかたはCSSで定義します。

書式

基本的にスキンから直接読み込むことを前提としています。スキン上でポップアップメニューを表示したい場所に以下のコードを入れてください。

<?php if (exist_plugin('suckerfish'))echo do_plugin_convert('suckerfish'); ?>

次にスタイルシートを設定します。sukerfishでデフォルトで使用するIDはnavです。縦に伸びるポップアップメニューの場合・・・

ul#nav { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

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

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

ul#nav 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;
}

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

横に伸びるポップアップメニューの場合

#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;
}

という感じになります。色やボーダーなどは任意に変更してください。

また、リンクが作成されていない場合表示が化けることがあります。その場合は以下のスタイルを入れてください。

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

最後にNavigationページを作成し、以下のように入れてください。topなどの文字は自動的に変換されます。

-top
--[[MenuBar]]
--[[Navigation]]
-reload
--edit
--diff
--backup
--source
--upload
--new
--template
--copy
--add
--freeze
--rename
-list
--search
--trackback
--refer
-recent
--rss
-[[リンク]]
--[[InterWikiName]]
--[[AutoAliasName]]
-help
--[[用語集>Glossary]]
--[[テキストの整形ルール]]
--[[Plugin>PukiWiki/1.4/Manual/Plugin]]

基本的にPukiWiki標準の記法で反映されますが、外部リンクに限り

-[URL LogueWiki]

のように、[URL 名前]という形式で入力する必要があります。

ダウンロード

1.0以降がPukiWiki対応版となります。

コメント

  • リンク先でDL出来ません。 -- 2011-05-18 (水) 14:07:51
  • エラーでページが表示されてないだけっぽい。とりあえず、1.0の直リンク http://logue.be/?cmd=attach&pcmd=open&refer=Web%E7%B4%A0%E6%9D%90%2FPukiWiki%2Fsuckerfish.inc.php&age=0&file=suckerfish.inc.php.3 -- 2011-05-18 (水) 21:39:24

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-01-22 (木) 21:16:04
Site admin: PukiWiki Development Team

PukiWiki 1.5.2+ © 2001-2019 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u7. HTML convert time: 0.252 sec.

OSDN