#navi(../)
** suckerfish.inc.php [#v3fca2b1]
|RIGHT:100|LEFT:360|c
|~サマリ|Wikiでカスタマイズ可能なCSSだけで作るポップアップメニュー|
|~リビジョン|1.0|
|~対応バージョン|1.4.7|
|~投稿者|[[Logue]]|
|~投稿日|&new{2010-06-07 (月) 12:41:47};|
**種別 [#q8aec6fe]
-CSSだけで作るポップアップメニュー
**概要 [#of4a781f]
-Navigationページで定義したメニューを表示するプラグインです。
-メニューのだしかたはCSSで定義します。
**書式 [#u5150f3c]
基本的にスキンから直接読み込むことを前提としています。スキン上でポップアップメニューを表示したい場所に以下のコードを入れてください。
 <?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標準の記法で反映されますが、外部リンクに限り
 -[http://logue.be/ LogueWiki]
のように、[URL 名前]という形式で入力する必要があります。

*ダウンロード [#t00f2ea7]
1.0以降がPukiWiki対応版となります。
-[[LogueWiki:Web素材/PukiWiki/suckerfish.inc.php]]

*コメント [#rdf103a6]
- リンク先でDL出来ません。 --  &new{2011-05-18 (水) 14:07:51};

#comment

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.038 sec.

OSDN