アコーディオンメニューを開いた際の回り込みを回避したい。

html
1<style>
2.menu {
3	max-width: 400px;
4	margin: 0 auto;
5	padding: 0;
6}
7
8.menu a {
9  display: block;
10  padding: 10px;
11	text-decoration: none;
12	color: #000;
13  line-height: 1;
14}
15
16label {
17  display: block;
18  margin: 0 0 2px 0;
19	padding :12px;
20  line-height: 1;
21	color :#fff;
22  background :#007bbb;
23	cursor :pointer;
24}
25
26input {
27	display: none;
28}
29
30.menu ul {
31	margin: 0;
32	padding: 0;
33  background :#f4f4f4;
34	list-style: none;
35}
36
37.menu li {
38  max-height: 0;
39  overflow-y: hidden;
40  -webkit-transition: all 0.5s;
41	-moz-transition: all 0.5s;
42	-ms-transition: all 0.5s;
43	-o-transition: all 0.5s;
44	transition: all 0.5s;
45}
46
47#menu_bar01:checked ~ #links01 li,
48#menu_bar02:checked ~ #links02 li {
49	max-height: 46px;
50  opacity: 1;
51}
52
53	.menu{
54		width: 100%;
55	}
56
57	label{
58		width:50%;
59		padding:12px 0;
60		float:left;
61	}
62	.menu ul{
63		width:50%;
64	}
65	
66</style>
67
68
69
70
71<div class="menu">
72    <label for="menu_bar01">MENU01</label>
73    <input type="checkbox" id="menu_bar01" class="accordion" />
74    <ul id="links01">
75        <li><a href="">Link01</a></li>
76        <li><a href="">Link02</a></li>
77        <li><a href="">Link03</a></li>
78        <li><a href="">Link04</a></li>
79    </ul>
80    <label for="menu_bar02">MENU02</label>
81    <input type="checkbox" id="menu_bar02" class="accordion" />
82    <ul id="links02">
83        <li><a href="">Link01</a></li>
84        <li><a href="">Link02</a></li>
85        <li><a href="">Link03</a></li>
86        <li><a href="">Link04</a></li>
87    </ul>
88</div>

アコーディオンをfloatを利用して2列表示にしているのですが、開いた際に回り込みが発生して、2列目のアコーディオンメニューが動いてしまいます。
アコーディオンを開いた際に、MENU2が同じ位置にありながら、MENU１だけ下へドロップダウンさせたいのですが、どのように記述するかご教示ください。

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

回答2件

グリッドレイアウトを使った場合の CSS 差分。とはいえ HTML を扱いやすいように変えたほうがいいかもしれません。

CSS
1.menu {
2  display: grid;
3  grid-template-rows: 1fr 0;
4  grid-auto-flow: column;
5}
6
7.menu label,
8.menu ul {
9  width: auto;
10}
11
12.menu ul {
13  z-index: 1;
14}
15
16.menu ul li {
17  background: inherit;
18}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

投稿2019/12/02 05:56

編集2019/12/02 06:09

x_x

総合スコア13749

ベストアンサー

floatは仰っているように回り込みがめんどくさいので、別の方法を使います。

CSS
1label{
2    width:50%;
3    padding:12px 0;
4    /* float:left; */
5}

labelの float:leftを削除して、下記のコードを追記してください。

CSS
1.menu {
2    font-size: 0; /* 隙間を消すために親要素のフォントサイズを0に */
3}
4.menu label,
5.menu ul {
6    display: inline-block;
7    vertical-align: top;
8    font-size: 1rem; /* 任意の値を必ず指定！ */
9}

display: inline-blockで要素が横並びするようにしてみました。
ただinline-blockだと要素のあいだに若干隙間ができてしまうので、
親要素のフォントサイズをゼロにして隙間を消し、子要素に再度フォントサイズを定義してあげてください。

あと、このままだとlabel→ul→label→ulの順で横並びしてしまうので、
コードの順番も変更してください。

HTML
1    <div class="menu">
2        <label for="menu_bar01">MENU01</label>
3        <label for="menu_bar02">MENU02</label> <!-- 移動 -->
4        
5        <input type="checkbox" id="menu_bar01" class="accordion" />
6        <ul id="links01">
7            <li><a href="">Link01</a></li>
8            <li><a href="">Link02</a></li>
9            <li><a href="">Link03</a></li>
10            <li><a href="">Link04</a></li>
11        </ul>
12        
13        <input type="checkbox" id="menu_bar02" class="accordion" />
14        <ul id="links02">
15            <li><a href="">Link01</a></li>
16            <li><a href="">Link02</a></li>
17            <li><a href="">Link03</a></li>
18            <li><a href="">Link04</a></li>
19        </ul>
20    </div>