![[PukiWiki-official]](image/pukiwiki-official.png "[PukiWiki-official]")
| サマリ | Wikiでカスタマイズ可能なCSSだけで作るポップアップメニュー |
|---|---|
| リビジョン | 1.0 |
| 対応バージョン | 1.4.7 |
| 投稿者 | Logue |
| 投稿日 | 2010-06-07 (月) 12:41:47 |
基本的にスキンから直接読み込むことを前提としています。スキン上でポップアップメニューを表示したい場所に以下のコードを入れてください。
<?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対応版となります。
|
Site admin: PukiWiki Development Team
PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 8.2.12. HTML convert time: 1.288 sec. |
|