質問するログイン新規登録

質問編集履歴

1

コードと画像を添付させて頂きました。初心者のため見辛いかと思いますがよろしくお願い致します。

2020/02/26 11:49

投稿

lululu
lululu

スコア5

title CHANGED
File without changes
body CHANGED
@@ -2,17 +2,128 @@
2
2
 
3
3
  下の画像のようなハンバーガーメニューのコーディングをしているのですが、
4
4
  ハンバーガーボタンを押しても下に画像のようなメニューが表示されません。
5
- https://gyazo.com/ee48200c4a49f25b06440ba233b8f95f
5
+ ![イメージ説明](5e72bedc4c33cc42206a0f9ed0522d50.png)
6
6
 
7
7
 
8
8
 
9
9
  ### 該当のソースコード
10
+ ``` <header>
11
+ <div id="header_in" class="container">
12
+ <div class="row">
13
+ <div class="six columns logo">
10
14
 
11
- 実際のコードが添付の通りです。
12
- https://gyazo.com/43d9f150bee383609ec014e964a0222c
15
+ <h1><img class="u-max-full-width" src="images/top_sp/logo.png" alt="APPLE BERRY"></h1>
13
- https://gyazo.com/5ac5098ba39d886879c115e5d92cc85a
14
16
 
17
+ </div>
15
18
 
19
+ <div class="six columns navi">
20
+ <div class="sp_navi">
21
+ <ul>
22
+ <li><img id="facebook" class="u-max-full-width" src="images/top_sp/fb.png" alt="facebook"></li>
23
+ <li><img id="instagram" class="u-max-full-width" src="images/top_sp/insta.png" alt="instagram"></li>
24
+ <li><img id="sp_navi_btn" class="u-max-full-width" src="images/top_sp/menu_icon.png" alt="sp_navi"></li>
25
+ </ul>
26
+
27
+ <ul class="sp_navi_li">
28
+ <li><a>ログイン</a></li>
29
+ <li><a>カート</a></li>
30
+ <li><a>マイページ</a></li>
31
+ <li><a>ショッピングガイド</a></li>
32
+
33
+ </ul>
34
+ </div>
35
+ </div>
36
+ <!-- sp_navi -->
37
+ <div class="pc_navi">
38
+ <ul class="pc_navi_li clearfix">
39
+ <li><img id="login" class="u-max-full-width" src="images/top/menu_login.png"></li>
40
+ <li><img id="cart" class="u-max-full-width" src="images/top/menu_cart.png"></li>
41
+ <li><img id="my page" class="u-max-full-width" src="images/top/menu_mypage.png"></li>
42
+ <li><img id="shopping guide" class="u-max-full-width" src="images/top/menu_guide.png"></li>
43
+ </ul>
44
+ </div>
45
+ <!-- pc_navi -->
46
+ </div>
47
+ <!-- row -->
48
+ </div>
49
+ <!-- header_in -->
50
+ </header>
51
+ ```
52
+ ```header {
53
+
54
+
55
+ @media (max-width: 549px) {
56
+
57
+ .logo {
58
+ max-width: 100%;
59
+ text-align: center;
60
+ display: block;
61
+
62
+ h1{
63
+ margin: 0;
64
+ }
65
+ }
66
+
67
+ ul {
68
+ list-style: none;
69
+ overflow: hidden;
70
+ text-align: center;
71
+
72
+ margin: 0 auto;
73
+ display: block;
74
+
75
+
76
+ li{
77
+ display: inline;
78
+ text-align: center;
79
+ padding: 5px;
80
+
81
+
82
+ }
83
+
84
+
85
+
86
+ }
87
+ }
88
+ #header_in {
89
+ padding: 10px 20px 4px 20px;
90
+ align-items: center;
91
+ }
92
+
93
+ .sp_navi_li {
94
+ width: 180px;
95
+ position: absolute;
96
+ top: 50px;
97
+ right: 2%;
98
+ border: 1px solid #eee;
99
+ background: #ff6d77;
100
+ margin: 0;
101
+ padding: 0;
102
+ display: none;
103
+ z-index: 100;
104
+
105
+ li {
106
+
107
+ list-style: none;
108
+ margin: 0;
109
+ padding: 0;
110
+ a{
111
+ display: block;
112
+ padding: 10px 8px;
113
+ border-bottom: 1px solid #eee;
114
+ font-size: 14px;
115
+ text-de![イメージ説明](c903063c44da54bc91950cb6a92f76e3.png)on: none;
116
+ }
117
+ }
118
+
119
+
120
+ }
121
+ }
122
+ ```
123
+
124
+
125
+
126
+
16
127
  ### 試したこと
17
128
 
18
129
  以前にも試したことがあるので、そちらのコードを参考にして書きました。