- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-09-08T14:46:04+09:00","default:tgoto","tgoto")
#author("2019-11-11T00:56:00+09:00;2019-09-08T14:46:04+09:00","default:tgoto","tgoto")
[[pukiwikiカスタマイズ箇所/2019]]のカスタマイズに加えて、モバイルブラウザなど幅が狭い場合のみ表示されるレスポンシブメニュー（ハンバーガーメニュー）を設置した。これはモバイルブラウザではサイトバーをdysplay:none;で非表示としているが、そうなるとトップページやサイト内検索などへのリンクが消えてしまうためにサイト内移動が不便となっていたためである。
javascriptでレスポンシブメニューを作成する方法が非常に多くのサイトで公開されているが、今回はjavascriptではなくCSSのみで作成する方法を採用した（javascriptを使用する方法を避けたのには特に深い理由はなく、単に当Pukiwikiの管理者の得手不得手の問題）。[[こちらのサイト:https://saruwakakun.com/html-css/reference/nav-drawer]]を参考に、Pukiwikiでも使用できるように改変して当サイトに設置させていただいた。
''関連ページ：'' https://saruwakakun.com/html-css/reference/nav-drawer
#ogp(https://saruwakakun.com/html-css/reference/nav-drawer,amp)
*スキン
下記の記号を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);
> }