ハンバーガーメニューからドロワースタイルで可変標示させる手順

drawerメニューの表示法

ハンバーグメニューはシリウスレスポンシブテンプレートの標準装備でスマートフォンレイアウト
でプルダウン形状表示されますが、何かしらの事情でお気に召さない...

もしくは、パソコン画面でも他サイトへの読者誘導か？ブログも読んでほしいなどとの
配慮構築に役立てるなら、もう一つのメニュー表示法...ドロワーメニュー一覧を表示させて
みるのも一考でしょうか？

今回のカスタマイズは、サルカワサイト様掲載のコンテンツを利用させていただきまして
シリウス用にカスタマイズしております..ご了承ください..

サルカワ様サイトも御覧下さい...
https://saruwakakun.com/html-css/reference/nav-drawer

参照

当サイトをスマートフォンで、もしくはパソコン画面を狭めると作動は確認できます...

通常、スマートフォン対応の仕様かと思われますが、まれに通常レイアウト状態でも
ハンバーガーメニューを表示させている例もあるのでいくつかの表示手順を書き足しますね

ご注意
drawerメニューは、シリウス機能ではありません...外部CSSを入れ込みますのでメニュー等は
手動で追加することになります...

前置き
当サイトはgnaviをシリウス機能以外で構築しているため..レスポン時のハンバーガーメニューが
うまく表示されないなど..その他障害アリでして、致し方なく？drawerメニューへ移行して
おります..
当サイトでプルダウン形状のグローバルナビをお取り付けになられた方は...ごめんなさい...
以下の対処を参考にしてお役立てください

使用条件

シリウスのデフォルトレスポンシブテンプレートのみの前提ですが、ある程度のカスタマイズを
施行していてもなんとか反映すると理解しています..?
デフォルトグローバルナビ表示の設定、あるなしは外部導入なのでどちらでも無関係..

スマートフォンでの対応

シリウスのデフォルトハンバーガーメニューを表示させないでドロワーのみ表示する際は、
スタイルシートの以下項目を削除します..
削除しない場合は、二つのハンバーガーが表示されます..

@media screen and (max-width: 640px) {
#nav {
border-bottom: none;
background-color: none;
}
#topmenubox {
padding: 0;
position: relative;
margin: 0;
}
#topmenubox #topmenubtn {
color: #333333;
cursor: pointer;
display: block;
font-size: 10px;
height: 20px;
padding-top: 15px;
position: absolute;
right: 10px;
text-align: center;
top: -45px;
width: 40px;
}
#topmenubox #topmenubtn:before {
border-bottom: 3px solid #333333;
border-top: 3px solid #333333;
content: "";
height: 3px;
left: 7px;
position: absolute;
top: 0;
width: 26px;
}
#topmenubox #topmenubtn:after {
border-top: 3px solid #333333;
content: "";
height: 0;
left: 7px;
position: absolute;
top: 12px;
width: 26px;
}
#topmenu ul {
display: none;
table-layout: auto;
margin: 0;
padding: 0;
}
#topmenu ul.menuon {
display: block;
}
#topmenu li {
border-bottom: 1px solid #777777;
display: block;
text-align: left;
}
#topmenu li:last-child {
border-bottom: none;
}
#topmenu li a {
color: #fff;
padding: 8px 45px 8px 20px;
position: relative;
text-align: left;
}
#topmenu li a:before {
border-bottom: none;
border-left: none;
border-right: 2px solid #ffffff;
border-top: 2px solid #ffffff;
background-color: transparent;
height: 5px;
margin-top: -4px;
right: 20px;
top: 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 5px;
}
#topmenu li:first-child a:after {
background-color: transparent;
left: 0;
width: 0;
}
#topmenu li:last-child{
border-right: none;
}
}
ここまでが削除範囲

追加CSS..以下をスタイルシートに張り付け

header {
padding:30px;
　display:none;
}

#nav-drawer {

z-index: 2000;
position:fixed;

}

.nav-unshown {
display:none;
}

/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #FF0A0A;
display:none;
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%;
display:none;
opacity: 0;
transition: .3s ease-in-out;
}

/*内容*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;
max-width: 330px;/*最大幅表示*/
height: 100%;
background: #ffffff;/*背景色*/
transition: .3s ease-in-out;/*スピード*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に格納指示く*/
}

#nav-input:checked ~ #nav-close {
display:none;;/*カバーを表示*/
opacity: .5;
}

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*右へスライド*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*メディアコードで以下サイズで作動指示*/
@media screen and (max-width: 640px) {

header {
padding:30px;
display: block;

}

/*メニューの固定化と重なり、右位置の調整*/
#nav-drawer {

z-index: 2000;
position:fixed;
padding:20px;
right: 10px;
}

/*リンクカラーとホバーカラー...注意以下に詳細あり*/

a { color: #ffffff; }
a:hover {
color: #C50000;
text-decoration: none;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}

/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height:30px;
vertical-align: middle;
}

/*ハンバーガーのアイコンをCSSで表示*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position:absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #0A8FFF;
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: .3s ease-in-out;
}

/*構築内*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 330px;/*最大幅（調整してください）*/
height: 100%;
background: #0A8FFF;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}

#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 25px rgba(0,0,0,.15);
}
}

ここまで

パソコン画面でも表示させる際は、メディア指示コードは不要ですが、上部コードで
display: none;指示の箇所をdisplay: blockに書き換える...

リンクカラーとホバーカラー...注意以下に詳細あり...について
シリウスのデフォルトリンクカラーはブルーですね
スライドの背景カラーが白であればなんら問題ないのですが、当サイトのように色付けした際は、
文字色を白とかの明るい色にしませんと認識ずらくなります...

その際のカラー変更として使えるものですが、極端なレイアウト変更やカスタマイズを施工した場合
状況によりますが、スライドでの表示以外..サイト全体に置くリンクカラーを変えてしまう障害を招く
事もございます...

白背景でリンク文字は白とかですね...認識できません..とかですね（記載時前の出来事あり）

その際の対応としては、指示項目はすべて削除して、一メニューテキストごとシリウス装飾で
カラー指定してください...

当サイトリンク例..テキストの範囲でカラーコード指定（リンクを含めて囲むと反映しない）
<a href="http://www.affiliateno1.com/"><span style="color:#FFFFFF">シリウスカスタマイズ | オンラインマニュアルLibrary</span></a>

参照
ＣＳＳ指定のカラーは背景がブルー、フォントを白にしておりますが、白背景で＃333フォントカラーに
する際は、

a { color: #ffffff; }..ここを＃３３３にします
a:hover {
color: #C50000;
text-decoration: none;
}

/*構築内*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 330px;/*最大幅（調整してください）*/
height: 100%;
background: #0A8FFF;/*背景色*/...ここを＃ＦＦFFFＦにします
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}
2か所の変更で切り替え完了...

HTMLソース

以下ソースを記事書き込みスペースに張り付け編集してください
テキストは複数取り付け可能ですが、数に限度ありますのでサイト内記事でしたら
サイトマップへ転送が良いかと思われます..

注意事
テキストごとにborderで区切ってますが、改行のためです...
改行されないと文字が区切りなしのチェーン表示、ですが、ｄｉｖコードで行ごとに囲えば
例<div>テキストリンク</div>の配列で...
整列　改行されますので、borderは削除してもＯＫ..

<div 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">
<hr style="border-bottom:solid 3px f#fff" border="0" />
<a href="<% pageDepth %>">テキストメニュー</a>
<hr style="border-bottom:solid 1px #fff" border="0" />
<a href="<% pageDepth %>">テキストメニュー</a>
<hr style="border-bottom:solid 1px #fff" border="0" />
<a href="<% pageDepth %>">テキストメニュー</a>
</div>
</div>

取り付ける場所は以下...すべてのテンプレートに張り付け...

<body>
<div id="wrapper">
<div id="top">
<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>
<% topMenu2 | tag_put(<div id="topmenubtn">MENU</div>) | tag_insert(div id="topmenubox") | tag_insert(div id="nav") %>
<div id="headerbox">

ここから

<div class="inner">
<div id="header">
<img src="<% pageDepth %>img/header.jpg" />
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>

ここまでがデフォルトテンプレート対応です..

当サイトのご案内でプルダウン形状ナビを取り付けている方は、HTMLの位置に
多少の違いがあるのでソースでご確認ください。

以下関連記事より、ハンバーガーメニューのカスタマイズ（カラー変更編）も参照ください。

ハンバーガーメニューからドロワースタイルで可変標示させる手順
 グローバル　ナビゲーションカスタマイズまとめ
 トップページ

drawerメニューの表示法

関連ページ

スポンサー広告

ＭＥＮＵ一覧

ＣＳＳ追加カスタマイズ

youtube関連

アドセンス

サポート