質問編集履歴
1
コードを見やすくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
アコーディオンメニューを作っています。HTMLでは、liの中にulを入れ、さらにliを入れたものを作成しました。
|
|
4
4
|
実現したい動きとしては、ハンバーガーメニューの三本線のアイコンをタップすると、下に、4つのメニュー（トップページ、店舗情報、お知らせ、ブログ）が現れ、さらに、特定のメニュー（店舗情報、ブログ）には、右側にプラスのアイコンがあり、そこをタップするとその項目のメニュー（◎◎店・・・）がさらに現れるという形のものを作りたいです。三本線のアイコンを必要な位置に配置することはできています。ちなみにこの後は、Javascriptで、アイコンをタップしたらメニューが開いたり閉じたりを作ろうと考えています。
|
|
5
5
|
|
|
6
|
-
|
|
7
6
|
### 聞きたい事
|
|
8
7
|
|
|
9
8
|
①HTMLの書き方としては、以下でよいものか。
|
|
@@ -14,7 +13,8 @@
|
|
|
14
13
|
### 該当のソースコード
|
|
15
14
|
|
|
16
15
|
HTML↓
|
|
16
|
+
```ここに言語を入力
|
|
17
|
-
|
|
17
|
+
<div class="overlay-menu">
|
|
18
18
|
<ul>
|
|
19
19
|
<li class="nonicon"><a href="">トップページ</a></li>
|
|
20
20
|
<li class="icon"><a href="">店舗情報</a><div><i class="fas fa-plus-circle"></i></div>
|
|
@@ -34,8 +34,10 @@
|
|
|
34
34
|
</li>
|
|
35
35
|
</ul>
|
|
36
36
|
</div>
|
|
37
|
+
```
|
|
37
38
|
|
|
38
39
|
CSS↓
|
|
40
|
+
```ここに言語を入力
|
|
39
41
|
.overlay-menu a{
|
|
40
42
|
display: block;
|
|
41
43
|
line-height: 50px;
|
|
@@ -56,7 +58,9 @@
|
|
|
56
58
|
background-color: orange;
|
|
57
59
|
}
|
|
58
60
|
|
|
61
|
+
```
|
|
59
62
|
|
|
63
|
+
|
|
60
64
|
### 試したこと
|
|
61
65
|
|
|
62
66
|
②については、display:flexをしてみるなど試行錯誤してみましたが、うまくいきませんでした。
|