Template Party

メニューなどの開閉ブロックを最初は開いた状態にしておく方法

常に開いた状態と、開閉のタイミングを逆(最初は開いた状態)にする方法をご紹介します。

常に開いたままにする方法

htmlの下の方にある
<!--メニューの3本バー-->
・・・
</script>

の数行を削除すればOKです。
※テンプレートによっては使っているタグが異なります。うまくいかない場合はサポート掲示板からお問い合わせください。

開閉のタイミングを逆(最初は開いた状態)にする方法

※biz46で解説します。完成サンプルはこちら。

html下部の、

<!--メニューの3本バー-->
<div id="menubar_hdr" class="close"><span></span><span></span><span></span></div>
<!--メニューの開閉処理条件設定 800px以下-->
<script type="text/javascript">
if (OCwindowWidth() <= 800) {
open_close("menubar_hdr", "menubar-s");
}
</script>

を以下に変更。

<!--メニューアイコン-->
<div id="menubar_hdr" class="open"></div>
<!--メニューの開閉処理条件設定 800px以下-->
<script type="text/javascript">
if (OCwindowWidth() <= 800) {
// open_close("menubar_hdr", "menubar-s");
document.getElementById("menubar_hdr").addEventListener("click", function() { do_onoff("menubar_hdr", "menubar-s"); }, false);
}
</script>

※「800」のサイズ指定はお手元のテンプレートの基準に合わせてください。
補足:元々あるopencloseの指定を//でコメントアウトし、新規にタグを追加した形になります。

次に、cssフォルダのstyle.cssの後半にある、

/*3本バーブロック*/
・・・
/*3本のバー(1本あたり)*/
・・・

を、以下に変更してください。※色などは調整して下さい。

/*3本バーブロック*/
#menubar_hdr {
display: block;
position: absolute;
top: 28px;
right: 2%;
border: 1px solid #000;
background: #fff;
text-align: center;
font-size: 24px;
color: #000;
width: 40px;
line-height: 40px;
}
#menubar_hdr.close::before {
content: "+";
}
#menubar_hdr.open::before {
content: "−";
}

最後の「+」や「−」は開閉用のアイコン画像の代わりですが、そのまま出力されるので好きに変更してもらって構いません。