leafletマップにドロワーメニュー設置によってlayersコントロールの配置が崩れる

以下のコードでlayersコントロールクリックで
地図選択ラベルの配置が崩れるます。
leaflet.cssをそのままでstyleに加えるコードが不明です
どなたか御指示下さい

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>ドロアーメニュー</title>
6
7<link rel="stylesheet" href="leaflet/leaflet.css">
8
9<style>
10body {
11	margin: 0;
12}
13![イメージ説明](b2328d62e915377183ee3bbcabb32ca9.png)
14#map {
15    margin-top: 60px;
16    width:  auto;
17    height: 510px; 
18    /*background: #f5deb3;*/
19} 
20
21/****************************************
22 CSSのドロワーメニューのウエブサイト
23 https://lopan.jp/css-animation-drawer/
24*****************************************/
25
26#navTgl:checked ~ .contents {
27	transform: translateX(250px);
28}
29
30/* :::::: toggle button :::::: */
31#navTgl {
32	display: none;
33}
34label {
35	cursor: pointer;
36	position: fixed;
37	top: 0;
38	left: 0;
39}
40.open {
41	z-index: 2000; /*2*/
42	width: 48px;
43	height: 48px;
44	background: lightSeaGreen;
45	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
46}
47.open::before, .open::after {
48	content: "";
49}
50.open span, .open::before, .open::after {
51	content: "";
52	position: absolute;
53	top: calc(50% - 1px);
54	left: 30%;
55	width: 40%;
56	border-bottom: 2px solid white;
57	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
58}
59.open::before {
60	transform: translateY(-8px);
61}
62.open::after {
63	transform: translateY(8px);
64}
65.close {
66	z-index: 1000; /*1*/
67	width: 100%;
68	height: 100%;
69	pointer-events: none;
70	transition: background .6s;
71}
72#navTgl:checked + .open {
73	background: indianRed;
74	transform: translateX(250px);
75}
76#navTgl:checked + .open span {
77	transform: scaleX(0);
78}
79#navTgl:checked + .open::before {
80	transform: rotate(45deg);
81}
82#navTgl:checked + .open::after {
83	transform: rotate(-45deg);
84}
85#navTgl:checked ~ .close {
86	pointer-events: auto;
87	background: rgba(0,0,0,.3);
88}
89
90/* :::::: drawer menu :::::: */
91.menu {
92	z-index: 1000; /*1*/
93	position: fixed;
94	overflow: auto;
95	top: 0;
96	left: 0;
97	width: 250px;
98	height: 100%;
99	margin: 0;
100	padding: 10px;
101	box-sizing: border-box;
102	background: rgba(0,0,0,.6);
103	transform: translateX(-100%);
104	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
105}
106
107.menu h2, .menu a {
108	color: white;
109}
110
111.menu a:hover {
112	background: black;
113}
114
115#navTgl:checked ~ .menu {
116	transform: none;
117}
118
119/* :::::: change mechanism :::::: */
120@media screen and (min-width: 768px) {
121	.open {
122		display: none;
123	}
124}
125@media screen and (max-width: 767px) {
126	header nav {
127		display: none;
128	}
129}
130
131</style>
132</head>
133<body>
134
135<input type="checkbox" id="navTgl">
136<label for="navTgl" class="open"><span></span></label>
137<label for="navTgl" class="close"></label>
138
139<nav class="menu">
140	<h2>menu</h2>
141	<ul>
142		<li><a href="#article1">きりぎりす。</a></li>
143		<li><a href="#article2">紙テクスチャ。</a></li>
144	</ul>
145</nav>
146
147
148<!--  マップ  -->   
149  <div id="map"></div>
150  
151<script src="leaflet/leaflet.js"></script>
152<script>  
153 /* ------------ onload ----------- */
154  window.onload = function () {
155      map = L.map('map', { zoomControl: false });
156      map.setView([33.58, 133.58], 10);
157      
158      //スケールコントロールを最大幅200px、左下、m単位で地図に追加
159      //L.control.scale({ maxWidth: 200, position: 'bottomleft', imperial: false }).addTo(map);
160      //ズームコントロールを右下で地図に追加
161      //L.control.zoom({ position: 'bottomright' }).addTo(map);	
162 
163  
164          //地理院地図の標準地図
165          var gsi =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', 
166            {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"})
167          //地理院地図の淡色地図  
168          var lig = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', 
169            {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"})  
170          //地理院地図の写真地図
171          var hoto =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', 
172            {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"})
173          //オープンストリートマップのタイル
174          var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
175            {attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors"});
176           
177          //baseMapsオブジェクトのプロパティを設定
178          var baseMaps = {
179            "地理院地図 標準" : gsi,
180            "地理院地図 淡色" : lig,
181            "地理院地図 写真" : hoto,
182            "OpenStreetMap"   : osm
183          };
184          
185          //layersコントロールにbaseMapsオブジェクトを設定して地図に追加
186          L.control.layers(baseMaps).addTo(map);
187          gsi.addTo(map); 
188  };
189</script>          
190  
191</body>
192</html>

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

回答1件

自己解決

別案　JQによるdrawer menu　で解決しました
全code　upしときます

JQ
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>ドロワーメニュー</title>
6
7<link rel="stylesheet" href="leaflet/leaflet.css">
8
9<style>
10body {
11	margin: 0;
12}
13
14#map {
15    margin-top: 0px;
16    width:  auto;
17    height: 510px; 
18    /*background: #f5deb3;*/
19} 
20
21
22/****** JQ drawer menu *****/
23 /* jquery-drawer v3.2.2 */
24 /* Flexible drawer menu using jQuery, iScroll and CSS. */
25 /* http://git.blivesta.com/drawer */
26 /* License : MIT */
27 /* Author : blivesta <design@blivesta.com> (http://blivesta.com/) */
28
29/*-------- Base --------*/
30.drawer-open {
31  overflow: hidden !important;
32}
33.drawer-nav {
34  position: fixed;
35  z-index: 1001; /*←101*/
36  top: 0;
37  overflow: hidden;
38  width: 8rem; /*16.25rem; ------------------------この数値変更可*/
39  height: 100%;
40  color: #222;
41  background-color: #fff;
42}
43.drawer-brand {
44  font-size: 1.5rem;
45  font-weight: bold;
46  line-height: 3.75rem;
47  display: block;
48  padding-right:.75rem;
49  padding-left: .75rem;
50  text-decoration: none;
51  color: #222;
52}
53.drawer-menu {
54  margin: 0;
55  padding: 0;
56  list-style: none;
57}
58.drawer-menu-item {
59  font-size: 1rem;
60  display: block;
61  padding: .75rem;
62  text-decoration: none;
63  color: #222;
64}
65.drawer-menu-item:hover {
66  text-decoration: underline;
67  color: #555;
68  background-color: transparent;
69}
70
71/*-------- roverlay --------*/
72.drawer-overlay {
73  position: fixed;
74  z-index: 1000; /*←100*/
75  top: 0;
76  left: 0;
77  display: none;
78  width: 100%;
79  height: 100%;
80  background-color: rgba(0, 0, 0, .2);
81}
82.drawer-open .drawer-overlay {
83  display: block;
84}
85
86/*-------- Left --------*/
87.drawer--left .drawer-nav {
88  left: -8rem; /*16.25rem; kokohenkou*/
89  -webkit-transition: left .8s cubic-bezier(0.190, 1.000, 0.520, 1.000); 
90  transition: left .8s cubic-bezier(0.190, 1.000, 0.520, 1.000);
91}
92.drawer--left.drawer-open .drawer-nav,
93.drawer--left .drawer-hamburger,
94.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
95  left: 0;
96}
97.drawer--left.drawer-open .drawer-hamburger {
98  left: 8rem; /*16.25rem; -----------------------------この数値変更可*/
99}
100
101/*-------- Hamburger --------*/
102.drawer-hamburger {
103  position: fixed;
104  z-index: 1004; /*←104*/
105  top: 0;
106  display: block;
107  box-sizing: content-box;
108  width: 2rem;
109  padding: 0;
110  padding-top: 10px;
111  padding-right: .55rem;
112  padding-bottom: 22px;
113  padding-left: .55rem;
114  
115  -webkit-transition: all .8s cubic-bezier(0.190, 1.000, 0.520, 1.000);
116  transition: all .8s cubic-bezier(0.190, 1.000, 0.520, 1.000);
117  
118  -webkit-transform: translate3d(0, 0, 0);
119          transform: translate3d(0, 0, 0);
120  border: 0;
121  outline: 0;
122  /*background-color: transparent;*/
123  background-color: lightSeaGreen;  /*add*/
124}
125.drawer-hamburger:hover {
126  cursor: pointer;
127  /*background-color: transparent;*/
128  background-color: lightSeaGreen;  /*add*/
129}
130.drawer-hamburger-icon {
131  position: relative;
132  display: block;
133  margin-top: 10px;
134}
135.drawer-hamburger-icon,
136.drawer-hamburger-icon:before,
137.drawer-hamburger-icon:after {
138  width: 100%;
139  height: 2px;
140  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
141  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
142  /*background-color: #222;*/
143  background-color: white;   /*add*/
144}
145.drawer-hamburger-icon:before,
146.drawer-hamburger-icon:after {
147  position: absolute;
148  top: -10px;
149  left: 0;
150  content: ' ';
151}
152.drawer-hamburger-icon:after {
153  top: 10px;
154}
155.drawer-open .drawer-hamburger-icon {
156  background-color: transparent;
157}
158.drawer-open .drawer-hamburger-icon:before,
159.drawer-open .drawer-hamburger-icon:after {
160  top: 0;
161}
162.drawer-open .drawer-hamburger-icon:before {
163  -webkit-transform: rotate(45deg);
164          transform: rotate(45deg);
165}
166.drawer-open .drawer-hamburger-icon:after {
167  -webkit-transform: rotate(-45deg);
168          transform: rotate(-45deg);
169}
170
171/*-------- toggle --------*/
172.sr-only {
173  position: absolute;
174  overflow: hidden;
175  clip: rect(0, 0, 0, 0);
176  width: 1px;
177  height: 1px;
178  margin: -1px;
179  padding: 0;
180  border: 0;
181}
182
183/*-------- @media screen --------*/
184@media screen and (min-width: 768px) {
185  .drawer-hamburger {
186    display: none;
187  }
188}
189@media screen and (max-width: 767px) {
190  header nav {
191    //display: none;
192  }
193}
194
195</style>
196
197</head>
198<body class="drawer drawer--left">
199
200  <!--  ドロワーメニュー  --> 
201  <button type="button" class="drawer-toggle drawer-hamburger">
202    <span class="sr-only">toggle navigation</span>
203    <span class="drawer-hamburger-icon"></span>
204  </button>
205
206  <nav class="drawer-nav">
207    <ul class="drawer-menu">
208        <li><a href="#">menu1</a></li>
209        <li><a href="#">menu2</a></li>
210        <li><a href="#">menu3</a></li>
211    </ul>
212  </nav>
213
214<!--  マップ  -->   
215  <div id="map"></div>
216
217<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
218<script src="iscroll.js"></script>
219<script src="drawer.js"></script>
220<script>
221  $(function() {
222      $('.drawer').drawer();
223  });
224</script>
225
226
227<script src="leaflet/leaflet.js"></script>
228<script>  
229 /* ------------ onload ----------- */
230  window.onload = function () {
231      map = L.map('map', { zoomControl: false });
232      map.setView([33.58, 133.58], 10);
233      
234      //スケールコントロールを最大幅200px、左下、m単位で地図に追加
235      L.control.scale({ maxWidth: 200, position: 'bottomleft', imperial: false }).addTo(map);
236      //ズームコントロールを右下で地図に追加
237      L.control.zoom({ position: 'bottomright' }).addTo(map);	
238 
239  
240          //地理院地図の標準地図
241          var gsi =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', 
242            {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"})
243          //地理院地図の淡色地図  
244          var lig = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', 
245            {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"})  
246          //地理院地図の写真地図
247          var hoto =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', 
248            {attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"})
249          //オープンストリートマップのタイル
250          var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
251            {attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors"});
252           
253          //baseMapsオブジェクトのプロパティを設定
254          var baseMaps = {
255            "地理院地図 標準" : gsi,
256            "地理院地図 淡色" : lig,
257            "地理院地図 写真" : hoto,
258            "OpenStreetMap"   : osm
259          };
260          
261          //layersコントロールにbaseMapsオブジェクトを設定して地図に追加
262          L.control.layers(baseMaps).addTo(map);
263          gsi.addTo(map); 
264  };
265</script>          
266  
267</body>
268</html>