cssだけ！jQueryを使わないスマホでよくある横から出てくるドロワーメニュー

checkboxとlabel、cssだけでつくる！jQueryを使わずに、スマホでよくある横から出てくるドロワーメニュー

ナビゲーションメニュー関連記事

• 

  cssで要素を上下左右に中央寄せするサンプル

• 

  スクロールしてもコンテンツの範囲内を固定されて追従するサイドメニューの作り方【jQuery】

• 

  スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】

• 

  jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる

• 

  cssで作る、横並びナビゲーションバーのサンプル4種類

• 

  【jQuery】コピペでできる！クリックで開閉するアコーディオンメニューサンプル8選

• 

  cssだけ！jQueryを使わないスマホでよくある横から出てくるドロワーメニュー

開くボタンを押すと画面外の横からするりとでてくるサイドメニューを実装してみます！
まずはデモから！スマホで確認してください！

Document

mugenweb-note.com

ドロワーメニュー用のhtml

<label for="sample">open</label>
<input type="checkbox" id="sample">
<div id="cover">
	<iframe src="left.html" frameborder="0"></iframe>
</div>

なるべくシンプルにしてあります。
ifremeの箇所はhtmlで記述しても大丈夫です。
RMS上に設置する場合は【RMS】楽天スマホにiframeを入れる裏技のように禁止タグをすり抜けてください。全て禁止タグなのでｗ

【RMS】楽天スマホに禁止タグのiframeを入れる裏技

楽天スマホで使える！禁止タグが多い楽天スマホ(RMS)にiframeなどを入れる裏技のまとめ。 楽天Tips関連記事 情報が古い場合があるので、自己責任でご利用ください。 禁止タグをすり抜ける裏技 ...

mugenweb-note.com

2016.03.07

iframeのhtml

<ul class="test">
	<li></li><!--たくさん-->
</ul>

スクロールさせたかったので縦長に作ってますが、ここは自由に変更して下さい。ulでリスト作ったらスマホっぽいですね！

開くボタン(input/label)のcss

/*開くボタン*/
label[for="sample"]{
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 999;
    font-size: 30px;
    color: #fff;
}

/*inputは隠す*/
input[type="checkbox"]#sample {
    visibility: hidden;
}

/*疑似要素で背景*/
input[type="checkbox"]#sample:checked:before{
	width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40);
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    visibility: visible;
    z-index: 2147483645;
}

/*疑似要素で閉じるボタン*/
input[type="checkbox"]#sample:checked:after{
	width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.80);
    content: "\00d7";
	color: #000;
    text-align: center;
    font-size: 40px;
    line-height: 40px;
    border-radius: 50%;
	visibility: visible;
	display: block;
	z-index: 2147483647;
    position: fixed;
    top: 5px;
    left: 80%;
}

ポイントはvisibility: hidden;でinputタグを隠していること。
inputの疑似要素でオープン時の背景と閉じるボタンを作っているので、display: none;だと疑似要素まで隠れてしまうのですが、visibility: hidden;なら個別で設定でき、input要素のみに適用するため、表示したい要素はvisibility: visible;とすることで疑似要素のみ表示できます！

飛び出す側(div/iframe)のcss

/*iframeを格納*/
input[type="checkbox"]#sample + #cover { 
	width: 80%;
	height: 100%;
	background:rgba(245, 245, 245, 0.1);
    transition: 0.1s ease-in-out;
    position:fixed;
    top:0;
    left: -80%;
}

/*iframeを格納(オープン時)*/
input[type="checkbox"]#sample:checked + #cover {
    overflow:scroll;
	-webkit-overflow-scrolling:touch;
    z-index: 2147483646;
    left: 0;
}

/*iframe*/
input[type="checkbox"]#sample + #cover > iframe {
    width: 100%;
    height: 100%;
    background:rgba(245, 245, 245, 0.95);
    border:none;
    z-index: 2147483646;
}

iOSで重要なのが-webkit-overflow-scrolling:touch;で慣性スクロールができるようになるらしいです。
ないとiframeがスクロールできなかったので必要だと思います！
またOSによってはバグとかあるらしいですけど、社内のiphoneでバグは出なかったのでとりあえずよしとしてます！
気になる方は調べてみて下さい！

概要は、チェックボックスの:checkedをつかってサイドメニューの開閉を判別しています。
あとはそれに合わせてサイドメニューの位置をずらしておしゃれ感を出すためにtransitionを指定しています。

JavaScriptを使わずにcssのみで実装できるのでRMSでもつかえますね！

開閉ボタンをハンバーガーメニューにする

下の記事を参考にすれば、ドロワーメニューの開閉ボタンを、動きがおしゃれなハンバーガーメニューにすることができます。

jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる

cssでシュッと動かす動きをつけて、jQueryで開閉させるとハンバーガーメニュー(アコーディオンメニュー)の開閉ボタンをアニメーション付きで変化させる方法 ナビゲーションメニュー関連記事 ...

mugenweb-note.com

2017.05.23