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

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

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

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

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

Document

ドロワーメニュー用の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を入れる裏技のように禁止タグをすり抜けてください。全て禁止タグなのでw

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

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で開閉させるとハンバーガーメニュー(アコーディオンメニュー)の開閉ボタンをアニメーション付きで変化させる方法 ナビゲーションメニュー関連記事 ...

コメント

  1. 市村 より:

    上のソースを使って設定したら、デザインが崩れました。
    下記のページみたいな商品ページのメニューにしたいのですが、どうすればいいでしょうか?
    参考サイトA
    http://item.rakuten.co.jp/oga/ke1m_m/

    参考サイトB
    通常は楽天が用意したメニューが表示
    http://item.rakuten.co.jp/extolevel/01-1502-01-01-11-04/

    (※スマホで見ないと分かりません)

    問題はこのページ情報を参考に設定を施しただけでは、デザインが崩れてしまうことです。なので、もし参考サイトAのように作れるのであればお願いをしたいです。

    • むぅ より:

      参考サイトAのソースを良く見るとbタグとfontタグを使ってほかのタグに影響が出ないようにしていますね。

      現時点でデザインが崩れているようには見えなかったのでコメントしようがありませんが、
      一度商品ページを複製して説明文に直接コードを入れてみると本番環境に影響を出さずにテストできると思いますので試してみてください。

タイトルとURLをコピーしました