レスポンシブメニュー
pukiwikiカスタマイズ箇所/2019のカスタマイズに加えて、モバイルブラウザなど幅が狭い場合のみ表示されるレスポンシブメニュー（ハンバーガーメニュー）を設置した。これはモバイルブラウザではサイトバーをdysplay:none;で非表示としているが、そうなるとトップページやサイト内検索などへのリンクが消えてしまうためにサイト内移動が不便となっていたためである。
javascriptでレスポンシブメニューを作成する方法が非常に多くのサイトで公開されているが、今回はjavascriptではなくCSSのみで作成する方法を採用した（javascriptを使用する方法を避けたのには特に深い理由はなく、単に当Pukiwikiの管理者の得手不得手の問題）。こちらのサイトを参考に、Pukiwikiでも使用できるように改変して当サイトに設置させていただいた。
https://saruwakakun.com/html-css/reference/nav-drawer
（Internet archive）
スキン
下記の記号をpukiwiki.skin.phpの任意の場所に埋め込む。なお、当サイトでは<body>の直下に配置している。
<nav id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">
<div align="center" style="margin:16px 0px 8px 0px; "><a href="./"><img src="./skin/logo.svg" width="32px" height="32px" /><br /><h1 style="font-size:120%; margin: 4px 0 0 0; border: 0; font-color: #000;"><?php echo $page_title ?></h1></a></div>
<?php if (exist_plugin_convert('menu')) { ?>
<?php echo do_plugin_convert('menu') ?>
<?php } ?>
</div>
</nav>
スタイルシート
下記をスタイルシート内に記載する。なお幅が狭いモバイルブラウザのみで表示するように画面幅で表示と非表示を区別しているが、そのブレイクポイントは840pxとしている。
@media screen and (min-width: 840px) {
nav#nav-drawer{
display: none;
}
}
@media screen and (max-width: 839px) {
nav#nav-drawer{
overflow: hidden;
padding: 10px;
}
}
#nav-drawer {
position: relative;
display:flex;
justify-content: flex-end;
}
.nav-unshown {
display:none;
}
#nav-open {
display: inline-block;
width: 28px;
height: 10px;
vertical-align: middle;
}
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: display 0.4s ease-in-out;
}
/*中身*/
#nav-content {
line-height: 1.5em;
vertical-align:top;
overflow: auto;
position: fixed;
padding: 0px 8px 0px 12px;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 60%;/*右側に隙間を作る（閉じるカバーを表示）*/
min-width: 280px;/*最大幅（調整してください）*/
max-width: 330px;/*最大幅（調整してください）*/
height: 100%;
background: #fff;/*背景色*/
transition: 0.4s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
/* transition-delay: 0.1s; */
transform: translateX(-105%);/*左に隠しておく*/
}
#nav-content ul
{
font-size: 90%;
margin:0px 0px 0px 0em;
padding:0px 0px 0px 0em;
}
#nav-content li{
list-style-type: none;
list-style-position:outside;
}
#nav-input:checked ~ #nav-close {
display: block;/*カバーを表示*/
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 45px rgba(0,0,0,.45);
}
AMP対応（2019.11.10追記）
このレスポンシブメニューはJavaScriptを使用せずCSS3だけで作られているので、AMP化されたサイトでも問題なく動作するはずである。しかし上記のデフォルトのままではなぜかうまくメニューの中身が表示されない。
z-indexが9999と高すぎるのが問題あるのか、z-indexが90と99のレイヤーだけ表示されてz-indexが9999のメニューの中身が消えてしまうのだ。そこで、上記のz-indexの90、99、9999をそれぞれ10、20、21と低い数字に書き換えたところ、メニューの中身が見えるようになった。
なお、AMPの表示の仕様は現在も改良が続けられているようなので、この対応は近日中に不要になるかもしれないし、あるいはこの対応では表示できないように戻ってしまうかもしれないので、これはあくまで一時的な応急処置です。
この記事に対するコメント
このページには、まだコメントはありません。
更新日：2020-05-04 閲覧数：2142 views.