ドロワーメニューの幅を固定化したい（CSSの"right: ??px"を動的にしたい）

実現したいこと

後述のプログラムを実行するとこのようになります。

＜ウインドウサイズ　大＞

＜ウインドウサイズ　小＞

【現状】
ウインドウサイズによって、ドロワーメニューの幅が変わってしまう。
→ウインドウサイズ大だと、ドロワーメニューの白余白が多く出てしまう。

【なりたい姿】
ウインドウサイズに寄らず、ドロワーメニューの白い幅は固定にしたい。
これを、ウインドウサイズに寄らずドロワーメニューの幅が固定幅で配置するようにしたい。

（なりたい姿　ウインドウサイズ　小）

（なりたい姿　ウインドウサイズ　大）

また、レスポンシブ表示時であっても同様の幅間でドロワーメニューが出るようにしたいです。

発生している問題・分からないこと

ドロワーメニューの幅を決定しているのは後述プログラムの★１★２の箇所です。
ここが％表記になっているために、ウインドウサイズに応じてドロワーメニューの幅が増減しているのですが、そこをどう設定すればウインドウサイズに寄らずドロワーメニューの幅が一定幅になるのかが分かりません。

該当のソースコード

HTML
1<!doctype html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8    <link href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
9    <title></title>
10    <style>
11        .menu-btn {
12            top: 0;
13            right: 1px;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            z-index: 90;
18            background-color: transparent;
19        }
20
21        .menu-btn span,
22        .menu-btn span:before,
23        .menu-btn span:after {
24            content: '';
25            display: block;
26            height: 5px;
27            width: 25px;
28            border-radius: 5px;
29            background-color: red;
30            position: absolute;
31        }
32
33        .menu-btn span:before {
34            bottom: 8px;
35        }
36        .menu-btn span:after {
37            top: 8px;
38        }
39
40        #menu-btn-check {
41            display: none;
42        }
43
44        .menu-content {
45            width: 50%;               /*★１*/
46            height: 100%;
47            position: fixed;
48            top: 0;
49            right: 100%;
50            z-index: 80;
51            background-color: white;
52            transition: all 0.5s;
53
54            overflow: scroll;
55            -webkit-overflow-scrolling: touch;
56        }
57
58        .menu-content ul li {
59            border-bottom: solid 1px lightgray;
60            list-style: none;
61        }
62
63        .menu-content ul li a {
64            display: block;
65            width: 100%;
66            font-size: 15px;
67            box-sizing: border-box;
68            color:#000;
69            text-decoration: none;
70            padding: 19px 25px 20px 10px;
71            position: relative;
72        }
73
74        .menu-content ul li a::before {
75            content: "";
76            width: 7px;
77            height: 7px;
78            border-top: solid 2px #ffffff;
79            border-right: solid 2px #ffffff;
80            transform: rotate(45deg);
81            position: absolute;
82            right: 52%;
83            top: 16px;
84        }
85
86        #menu-btn-check:checked ~ .menu-content {
87            right: 50%;     /*★２*/
88        }
89        .close {
90            width: 100%;
91            height: 100%;
92            position: fixed;
93            top: 0;
94            left: 100%;
95            z-index: 50;
96            background-color: gray;
97        }
98
99        #menu-btn-check:checked ~ .close {
100            left:0;
101        }
102    </style>
103</head>
104<body class="">
105<div id="app">
106    <nav class="navbar navbar-expand-md navbar-light shadow-sm bg-white fixed-top">
107        <div class="container justify-content-center">
108            <div class="row col-xl-10 pl-0 pr-0">
109                <div class="col-12 pl-0 pr-0">
110                    <div class="row">
111                        <div class="col-4">
112                            <ul class="nav list-inline">
113                                <div class="hamburger-menu">
114                                    &emsp;
115                                    <input type="checkbox" id="menu-btn-check">
116                                    <label for="menu-btn-check" class="menu-btn"><span></span></label>
117                                    <label for="menu-btn-check" class="close"></label>
118
119                                    <div class="menu-content">
120                                        <ul>
121                                            <li>
122                                                <a class="" href="">メニューいち</a>
123                                            </li>
124                                            <li>
125                                                <a class="" href="">メニューに</a>
126                                            </li>
127                                            <li>
128                                                <a class="" href="">メニューさん</a>
129                                            </li>
130                                            <li>
131                                                <a class="" href="">メニューし</a>
132                                            </li>
133                                            <li>
134                                                <a class="" href="">メニューじゅうさん</a>
135                                            </li>
136                                        </ul>
137                                        <div class="mt-5">
138                                            <p class="mt-5 ml-4">
139                                                <a class="m-0" href="">コメントいち</a>
140                                                <a class="" href="">コメントに</a>
141                                                <a class="" href="">コメントさん</a>
142                                            </p>
143                                        </div>
144                                    </div>
145                                </div>
146                            </ul>
147                        </div>
148                    </div>
149                </div>
150            </div>
151        </div>
152    </nav>
153</div>
154</body>
155</html>
156

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

試しに

★１を165pxに、
★２を85%にしたのが下記図です。

★１を165pxに、
★２を165pxにしたのが下記図です。

以上のように、%やpxでいじってみましたが、なかなかうまい配置になりません。

補足

特になし

juner

2025/01/01 20:45

css のウインドウの横幅である 100vw と計算するための calc() は試されましたでしょうか？ https://developer.mozilla.org/ja/docs/Web/CSS/calc

meex

2025/01/02 11:02

calcもあるのですね。試していませんでした。cakcは初知りなので自分なりに調べてみます。

行動規範の内容に同意します

回答1件

ベストアンサー

現状のrightを基準にするならcalcを使えば可能ですが、

css
1#menu-btn-check:checked ~ .menu-content {
2  right: calc(100% - 165px); /*★２*/
3}

ドロワーを左側から出すのですから、
leftを基準にしてアニメーションさせるのがシンプルだと思います。

css
1.menu-content {
2  width: 165px; /*★ 幅固定値 */
3  height: 100%;
4  position: fixed;
5  top: 0;
6 left: -165px; /*★ 幅の分だけ左外側に移動 */
7  z-index: 80;
8  background-color: white;
9  transition: all 0.5s;
10  overflow: scroll;
11  -webkit-overflow-scrolling: touch;
12}
13
14/*★ 中略 */
15#menu-btn-check:checked ~ .menu-content {
16  left: 0; /*★ 左端の位置に移動 */
17}