ハンバーガーメニューでクリックできる範囲を広くしたい。

Question

前提・実現したいこと

ハンバーガーメニューの3本線の部分のクリックできる範囲を広くしたいです。

該当のソースコード

HTML
<div id="drawer">
	  <input id="input" type="checkbox" class="unshown">
  		<label id="open" for="input"><span></span></label>
  		<label class="unshown" id="close" for="input"></label>
    <div id="menu-content">
		<ul>
		<li class="menulistright"><a href="#"><span class="menulistweight ">TikTok</span></a></li>
		<li class="menulist"><a href="#"><span class="menulistweight ">TVCM＆Web Movie</span></a></li>
		<li class="menulist"><a href="#"><span class="menulistweight ">Graphic</span></a></li>
		<li class="menulist"><a href="#"><span class="menulistweight ">Products</span></a></li>
		</ul>
	  </div>
		</div>

CSS
#drawer {
    position: relative;
    background: #4cade0;
    padding: 1%;
	height:33px; 
	margin: 0 0 0 auto;
  　border-radius: 50%;
   padding-top:5%;
	padding-bottom:5%;
  }

  #open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  #open span, #open span::before, #open span::after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: white;
    display: block;
    content: "";
    cursor: pointer;
  }
  #open span::before {
    bottom: -8px;
  }
  #open span::after {
    bottom: -16px;
  }
  #close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4cade0;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  #menu-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 270px;
    height: 100%;
    background: #4cade0;
    transition: .3s ease-in-out;
    transform: translateX(-105%);
  }
  #input:checked ~ #close {
    display: block;
    opacity: .5;
  }
  #input:checked ~ #menu-content {
    transform: translateX(0%);
	 box-shadow: 6px 0 25px rgba(0, 0, 0, .15);

  }

試したこと

#open span, #open span::before, #open span::after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: white;
    display: block;
    content: "";
    cursor: pointer;
　　　　　　　　padding:5%;
  }

この部分に　padding:5%;を入れましたしたが、3本線が太くなるだけでクリック範囲は広くなりませんでした。

Comments

[Rwight]

チェックボックスの場合であれば
transform: scale(0);
というソースコードを打てば大きさを変更することが可能なので試してみてはいかがでしょうか？
((0)という数字の部分は自分が想像しているサイズに指定させれば良いと思います。)

[退会済みユーザー]

ありがとうございます。今試していますが、キャッシュの関係で全然ハンバーガーメニューが反映されないので反映されてうまくいったらお知らせします。

[Rwight]

申し訳ありません...
まだ私は未熟なので、上手く助ける事が出来ずに申し訳ありません...

[退会済みユーザー]

いえいえ、昨日からどんだけキャッシュを消しても反映が遅すぎるので、反映されたらコメントします。

[Rwight]

ありがとうございます、本日の件が解決すると良いですね...
頑張って下さい！。

[退会済みユーザー]

多分アドバイスいただいた件はうまくいってるはずなんですが、なにせ反映されないもので確認ができませんw

[Rwight]

多分反映が遅いではなく、そのチェックボックス自体がないというふうに思ったので、
多分ですが、hatena19さんの回答を参考にすれば上手くいくと思います。
お互い頑張りましょう。
自分の仕事がある為ここで失礼します。

[退会済みユーザー]

ありがとうございます。

Answer 1

現状は#openの範囲をクリックしたらメニューが開くようになってます。
ただし、マウスが指マークになるのが、3本線の上だけになっています。
クリック可能範囲つまり #open で指マークにしたいということだと推測しました。

解決法は、cursor: pointer; を #openの方へ移動させればいいでしょう。

  #open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
    cursor: pointer;    /* 追加 */
  }
  #open span, #open span::before, #open span::after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: white;
    display: block;
    content: "";
/*  cursor: pointer;  削除*/
  }

Comments

[退会済みユーザー]

ありがとうございます。参考になります。