[倉田 ともか]

【お使いの Snow Monkey のバージョン】バージョン: 16.4.6
【お使いのブラウザ】Crome

いつもお世話になっております。

### 実現したいこと

ドロワーナビゲーション（デフォルト）が開いたときに、
コンテンツ部分を暗くする実装を試行錯誤しております。

### 試したこと

最初はmy snow monkey に

add_action(
'snow_monkey_prepend_drawer_nav',
function() {
?>
<div class="drawer-nav-cover"></div>
<?php
}
);

とnavの中に挿入して、
以下のCSSで黒い透過背景を設定しました。

.drawer-nav-cover {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(3,3,3,.5);
z-index: 0;
}

ただこれだとドロワーナビゲーションの下ではなく上に表示されてしまいます。
（親要素navがz-indexを指定しているので子要素のz-indexは効かない。）

そこでnavとは別のところに黒い透過背景を挿入して
ハンバーガーアイコンをクリックしたら
同じようにaria-hidden=falseと追加出来きれば
あとはCSSで調整ができるなと考えています。

上記のようなことはできますでしょうか。

また上記よりももっとシンプルな方法があったりしますでしょうか。

どうぞよろしくお願いします。

♥ 0

いいねをした人: 居ません

[まーちゅう]

ドロワーナビゲーションのタイプを「オーバーオール」にする方法もありますが、
「デフォルト」のままでいくなら、.c-drawer-close-zone[aria-hidden=false]にスタイルを当てるのはダメでしょうか？

♥ 1

いいねをした人:

[GONSY]

@倉田さん

@まーちゅうさんのアドバイスに近いと思いますが、私のサイトが似たようなことをやっています。
ただし、ヘッダーのすべてを含めると、ハンバーガーボタンも暗くなってしまうので、それを除いてぼかしと明るさを調整しています。

.c-site-branding,
.l-contents {
	/* ふわっと表示させるためのtransition */
	transition: all　.2s linear;
}
/* ドロワーが開くとbodyに付与される「u-noscroll」を利用 */
.u-noscroll .c-site-branding,
.u-noscroll .l-contents {
	/* filterでぼかしと明るさを適用 */
	filter: blur(4px) brightness(30%);
}

希望と違うかもしれませんが、なにかヒントになれば幸いです。

♥ 2

いいねをした人:

[倉田 ともか]

ありがとうございます！
お二人のヒントのお陰様で無事に実装することが出来ました。
どちらの方法でも実装できたので、
今後同じように実装したい方のためにコードメモしておきます。

@まーちゅうさん
お客様のご要望で今回は「オーバーオール」ではなく「デフォルト」のままでの実装でした。
なのでヒントいただいた以下のようにして、無事実装することができました。

.c-drawer-close-zone[aria-hidden=false] {
	background: rgba(3,3,3,.5);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

navのところばかり見ていて.c-drawer-close-zone[aria-hidden=false]を利用するのは気が付かず
どんどん難しく考えてしまってました。
ありがとうございました。

@GONSYさん
サイト参考になりました！
bodyに付与される「u-noscroll」を利用するのは全く思いつかなかったです。
教えていただいたコードからヒントを得まして以下のように実装できました。

.u-noscroll .c-site-branding,
.u-noscroll .l-contents,
.u-noscroll .c-page-header{
	filter: brightness(50%);
}

.u-noscroll .l-contents {
	background: rgba(3,3,3,.5);
}

また一つ知識が増えました。
ありがとうございました。

解決しましたのでトピックも閉じますね。
@まーちゅうさん、@GONSYさん、ありがとうございました！

♥ 4

いいねをした人:

[投稿者]

投稿