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

質問編集履歴

4

HTML、CSSコード追加。

2018/11/20 13:41

投稿

kameo
kameo

スコア12

title CHANGED
File without changes
body CHANGED
@@ -14,31 +14,45 @@
14
14
  <div class="container">
15
15
 
16
16
  <p>コンテンツ</p>
17
+ <p>コンテンツ</p>
18
+ <p>コンテンツ</p>
19
+ <p>コンテンツ</p>
20
+ <p>コンテンツ</p>
21
+ <p>コンテンツ</p>
22
+ <p>コンテンツ</p>
23
+ <p>コンテンツ</p>
24
+ <p>コンテンツ</p>
25
+ <p>コンテンツ</p>
26
+ <p>コンテンツ</p>
27
+ <p>コンテンツ</p>
28
+ <p>コンテンツ</p>
29
+ <p>コンテンツ</p>
30
+ <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p>
17
31
 
18
32
  <div class="gnav">
19
33
  <div id="menu-list">
20
34
  <ul>
21
35
  <li>メニュー内容</li>
22
- <li>メニュー内容</li>
36
+ <li>メニュー内容</li>
23
- <li>メニュー内容</li>
37
+ <li>メニュー内容</li>
24
- <li>メニュー内容</li>
38
+ <li>メニュー内容</li>
25
- <li>メニュー内容</li>
39
+ <li>メニュー内容</li>
26
- <li>メニュー内容</li>
40
+ <li>メニュー内容</li>
27
- <li>メニュー内容</li>
41
+ <li>メニュー内容</li>
28
- <li>メニュー内容</li>
42
+ <li>メニュー内容</li>
29
- <li>メニュー内容</li>
43
+ <li>メニュー内容</li>
30
- <li>メニュー内容</li>
44
+ <li>メニュー内容</li>
31
- <li>メニュー内容</li>
45
+ <li>メニュー内容</li>
32
- <li>メニュー内容</li>
46
+ <li>メニュー内容</li>
33
- <li>メニュー内容</li>
47
+ <li>メニュー内容</li>
34
- <li>メニュー内容</li>
48
+ <li>メニュー内容</li>
35
- <li>メニュー内容</li>
49
+ <li>メニュー内容</li>
36
- <li>メニュー内容</li>
50
+ <li>メニュー内容</li>
37
- <li>メニュー内容</li>
51
+ <li>メニュー内容</li>
38
- <li>メニュー内容</li>
52
+ <li>メニュー内容</li>
39
- <li>メニュー内容</li>
53
+ <li>メニュー内容</li>
40
- <li>メニュー内容</li>
54
+ <li>メニュー内容</li>
41
- <li>メニュー内容</li>
55
+ <li>メニュー内容</li>
42
56
  </ul>
43
57
  <p class="list-close menu-btn" title="close">閉じるボタン</p>
44
58
  </div>
@@ -64,6 +78,7 @@
64
78
  position: absolute;
65
79
  width: 100%;
66
80
  z-index: 2;
81
+ background-color: #FFFFFF;
67
82
  }
68
83
 
69
84
  #menu-list {display: none;}

3

HTML、CSSコード追加。

2018/11/20 13:41

投稿

kameo
kameo

スコア12

title CHANGED
File without changes
body CHANGED
@@ -8,11 +8,13 @@
8
8
 
9
9
 
10
10
  ```ここに言語を入力
11
+
12
+ <p class="menu-btn gmenu">MENU</p>
13
+
11
14
  <div class="container">
12
15
 
13
16
  <p>コンテンツ</p>
14
17
 
15
- <p class="menu-btn gmenu">MENU</p>
16
18
  <div class="gnav">
17
19
  <div id="menu-list">
18
20
  <ul>

2

HTML、CSSコード追加。

2018/11/20 12:15

投稿

kameo
kameo

スコア12

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,12 @@
8
8
 
9
9
 
10
10
  ```ここに言語を入力
11
+ <div class="container">
12
+
13
+ <p>コンテンツ</p>
14
+
11
15
  <p class="menu-btn gmenu">MENU</p>
16
+ <div class="gnav">
12
17
  <div id="menu-list">
13
18
  <ul>
14
19
  <li>メニュー内容</li>
@@ -35,11 +40,30 @@
35
40
  </ul>
36
41
  <p class="list-close menu-btn" title="close">閉じるボタン</p>
37
42
  </div>
43
+ </div>
44
+
45
+
46
+
47
+
48
+ </div>
38
49
  ```
39
50
 
40
51
  ##CSS
41
52
 
42
53
  ```ここに言語を入力
54
+ .container {
55
+ position: relative;
56
+ width: 100%;
57
+ }
58
+
59
+ .gnav {
60
+ clear: both;
61
+ top:0px;
62
+ position: absolute;
63
+ width: 100%;
64
+ z-index: 2;
65
+ }
66
+
43
67
  #menu-list {display: none;}
44
68
  ```
45
69
 

1

メニューボタンでも開閉できるようになっております。

2018/11/20 12:13

投稿

kameo
kameo

スコア12

title CHANGED
File without changes
body CHANGED
@@ -8,6 +8,7 @@
8
8
 
9
9
 
10
10
  ```ここに言語を入力
11
+ <p class="menu-btn gmenu">MENU</p>
11
12
  <div id="menu-list">
12
13
  <ul>
13
14
  <li>メニュー内容</li>
@@ -18,6 +19,19 @@
18
19
  <li>メニュー内容</li>
19
20
  <li>メニュー内容</li>
20
21
  <li>メニュー内容</li>
22
+ <li>メニュー内容</li>
23
+ <li>メニュー内容</li>
24
+ <li>メニュー内容</li>
25
+ <li>メニュー内容</li>
26
+ <li>メニュー内容</li>
27
+ <li>メニュー内容</li>
28
+ <li>メニュー内容</li>
29
+ <li>メニュー内容</li>
30
+ <li>メニュー内容</li>
31
+ <li>メニュー内容</li>
32
+ <li>メニュー内容</li>
33
+ <li>メニュー内容</li>
34
+ <li>メニュー内容</li>
21
35
  </ul>
22
36
  <p class="list-close menu-btn" title="close">閉じるボタン</p>
23
37
  </div>