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

質問編集履歴

8

修正

2017/07/13 23:00

投稿

Birdsfly
Birdsfly

スコア15

title CHANGED
File without changes
body CHANGED
@@ -44,4 +44,38 @@
44
44
  ![イメージ説明](7d84550f7040cd5c44145dbc3160fba6.gif)
45
45
 
46
46
 
47
+
48
+ ```<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
49
+ <script>
50
+ $(function(){
51
+ var rwdMenu = $('#menuList'),
52
+ switchPoint = 480,
53
+ slideSpeed = 500;
54
+ var menuSouce = rwdMenu.html();
55
+ $(window).load(function(){
56
+ function menuSet(){
57
+ if(window.innerWidth <= switchPoint){
58
+ if(!($('#rwdMenuWrap').length)){
59
+ $('body').prepend('<div id="rwdMenuWrap"><div id="switchBtnArea"><a href="javascript:void(0);" id="switchBtn"><span></span><span></span><span></span></a></div></div>');
60
+ $('#rwdMenuWrap').append(menuSouce);
61
+ var menuList = $('#rwdMenuWrap > ul');
62
+ $('#switchBtn').on('click', function(){
63
+ menuList.slideToggle(slideSpeed);
64
+ $(this).toggleClass('btnClose');
65
+ });
66
+ }
67
+ } else {
68
+ $('#rwdMenuWrap').remove();
69
+ }
70
+ }
71
+ $(window).on('resize', function(){
72
+ menuSet();
73
+ });
74
+ menuSet();
75
+ });
76
+ });
77
+ </script>
78
+ ```
79
+
80
+
47
81
  どうぞよろしくお願いいたします。

7

編集

2017/07/13 23:00

投稿

Birdsfly
Birdsfly

スコア15

title CHANGED
File without changes
body CHANGED
@@ -37,4 +37,11 @@
37
37
  }
38
38
  ```
39
39
 
40
+ ■現在
41
+ ![イメージ説明](e62068ed1040cad5970e278c1ab37826.gif)
42
+
43
+ ■ロゴの下からブルダウンを設定したい
44
+ ![イメージ説明](7d84550f7040cd5c44145dbc3160fba6.gif)
45
+
46
+
40
47
  どうぞよろしくお願いいたします。

6

編集

2017/07/13 16:26

投稿

Birdsfly
Birdsfly

スコア15

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  3本ラインの場所は可動するのですが、プルダウンの開始位置がどうしてもページ最上部から動かす事ができません。。
5
5
 
6
+ ```
6
7
  #menuList {
7
8
  display: none;
8
9
  }
@@ -34,5 +35,6 @@
34
35
  border-radius: 5px;
35
36
  transition: all 0.2s linear;
36
37
  }
38
+ ```
37
39
 
38
40
  どうぞよろしくお願いいたします。

5

修正

2017/07/13 16:10

投稿

Birdsfly
Birdsfly

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,8 @@
1
- レスポンシブ対応にするとプルダウンに押されて、元々のページが下がってしまいます。ヘッダーのロゴ下からプルダウンが出るようにしたいのですが、どのようにしたらよろしいですか?下記にテストでアップしました。
1
+ レスポンシブ対応にするとプルダウンに押されて、元々のページが下がってしまいます。ヘッダーのロゴは動かさず、ロゴ位置からプルダウンが出るようにしたいのですが、どのようにしたらよろしいですか?下記にテストでアップしました。
2
2
  http://www.futako.com/test/
3
3
 
4
- -------------------------
4
+ 3本ラインの場所は可動するのですが、プルダウンの開始位置がどうしてもページ最上部から動かす事ができません。。
5
+
5
6
  #menuList {
6
7
  display: none;
7
8
  }
@@ -33,5 +34,5 @@
33
34
  border-radius: 5px;
34
35
  transition: all 0.2s linear;
35
36
  }
36
- -------------------------
37
+
37
38
  どうぞよろしくお願いいたします。

4

編集

2017/07/13 16:08

投稿

Birdsfly
Birdsfly

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  レスポンシブ対応にするとプルダウンに押されて、元々のページが下がってしまいます。ヘッダーのロゴの下からプルダウンが出るようにしたいのですが、どのようにしたらよろしいですか?下記にテストでアップしました。
2
2
  http://www.futako.com/test/
3
+
3
4
  -------------------------
4
5
  #menuList {
5
6
  display: none;

3

編集

2017/07/13 15:58

投稿

Birdsfly
Birdsfly

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,11 +1,36 @@
1
- アコーディオタイプのメニューからプルダウンする時の位置が、3本ラインの下から開始したいのですが、現在は背面にプルダウン用のナビゲーションがあって、前面にページがあり、3本ラインをクリックすると前面ページが下がって、背面ページが表示される状態です。なので、ヘッダー下がってす。
1
+ レスポシブ対応にするプルダウンに押されて、元々のページが下がってしまいます。ヘッダーのロゴのからプルダウン出るようにのでが、どのようにしたらよろしいですか?下記にテストでアップしました
2
-
2
+ http://www.futako.com/test/
3
+ -------------------------
4
+ #menuList {
5
+ display: none;
6
+ }
7
+ #rwdMenuWrap #switchBtnArea {
8
+ width: 100%;
9
+ height: 10px;
10
+ position: absolute;
11
+ top:3px;
12
+ left:0px;
3
13
  z-index: 1000;
4
-
5
- どのようにしたらよいか...教えて下さい。
6
-
7
- こちらにテストアップしてみました。
14
+ }
8
- レスポンシブ対応にするとプルダウンに押されて、元々のページが下がってしまいます。
15
+ #rwdMenuWrap #switchBtnArea #switchBtn {
16
+ top: 5px;
17
+ right: 10px;
18
+ width: 40px;
19
+ height: 40px;
20
+ display: block;
21
+ position: absolute;
22
+ border-radius: 5px;
23
+ z-index: 1000;
24
+ }
9
- http://www.futako.com/test/
25
+ #rwdMenuWrap #switchBtnArea #switchBtn span {
10
-
26
+ left: 20%;
27
+ width: 60%;
28
+ height: 2px;
29
+ display: block;
30
+ position: absolute;
31
+ background-color: #88abda;
32
+ border-radius: 5px;
33
+ transition: all 0.2s linear;
34
+ }
35
+ -------------------------
11
36
  どうぞよろしくお願いいたします。

2

追記

2017/07/13 15:57

投稿

Birdsfly
Birdsfly

スコア15

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
  どのようにしたらよいか...教えて下さい。
6
6
 
7
7
  こちらにテストアップしてみました。
8
- プルダウンに押されて、元々のページが下がってしまいます。
8
+ レスポンシブ対応にするとプルダウンに押されて、元々のページが下がってしまいます。
9
9
  http://www.futako.com/test/
10
10
 
11
11
  どうぞよろしくお願いいたします。

1

追加

2017/07/13 11:31

投稿

Birdsfly
Birdsfly

スコア15

title CHANGED
File without changes
body CHANGED
@@ -2,4 +2,10 @@
2
2
 
3
3
  z-index: 1000;
4
4
 
5
- どのようにしたらよいか...教えて下さい。
5
+ どのようにしたらよいか...教えて下さい。
6
+
7
+ こちらにテストアップしてみました。
8
+ プルダウンに押されて、元々のページが下がってしまいます。
9
+ http://www.futako.com/test/
10
+
11
+ どうぞよろしくお願いいたします。