#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 LogueWiki] のように、[URL 名前]という形式で入力する必要があります。 *ダウンロード [#t00f2ea7] 1.0以降がPukiWiki対応版となります。 -[[LogueWiki:Web素材/PukiWiki/suckerfish.inc.php]] *コメント [#rdf103a6] - リンク先でDL出来ません。 -- &new{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 -- &new{2011-05-18 (水) 21:39:24}; - 1 -- [[1]] &new{2015-01-22 (木) 15:53:29}; - 1 -- [[-1']] &new{2015-01-22 (木) 15:53:38}; -- 1' -- [[1]] &new{2015-01-22 (木) 15:53:39}; - 1 -- [[1]] &new{2015-01-22 (木) 15:53:40}; - エラーでページが表示されてないだけっぽい。とりあえず、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 -- &new{2011-05-18 (水) 21:39:24}; #comment //#comment