teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問wheelnav.jsを使ったページ内リンクを<a>で機能させたい

編集履歴

質問編集履歴

3

補足

2016/09/23 10:58

投稿

kurotobi
kurotobi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  ###発生している問題・エラーメッセージ
8
8
 
9
- <a href~>で割り振ると番号が1つ飛ばしでずれてしまいます。ずれてしまった番号をクリックしても反応がありませんでした。
9
+ <a href~>でメニューにidを割り振っているのに番号が1つ飛ばしでずれてしまいます。ずれてしまった番号をクリックしても反応がありませんでした。
10
10
 
11
11
  (例: ナビ1→リンク1、ナビ2→反応なし、ナビ3→リンク2...)
12
12
 
@@ -14,6 +14,8 @@
14
14
 
15
15
  ###該当のソースコード
16
16
 
17
+ (追記3) circle-menu.cssを外した状態でも同じ現象が起きた為,circle-menu.cssを削除し、html内も修正いたしました。
18
+
17
19
  ```HTML
18
20
 
19
21
  <!doctype html>
@@ -24,25 +26,11 @@
24
26
 
25
27
  <meta charset="utf-8">
26
28
 
27
- <link href="css/normalize.css" rel="stylesheet" type="text/css">
28
-
29
- <link href="css/circle-menu.css" rel="stylesheet" type="text/css">
30
-
31
29
  <style>
32
30
 
33
- html, body{
34
-
35
- height: 100%;
36
-
37
- }
38
-
39
- section {
40
-
41
- height: 100vh;
31
+ section {height: 100vh;}
42
-
43
- }
32
+
44
-
45
- #wrap,#top,#page1,#page2,#page3,#page4,#page5,#page6,#page7,#circle-menu{
33
+ #wrap,#top,#p1,#p2,#p3,#circle-menu{
46
34
 
47
35
  display: -webkit-flex;
48
36
 
@@ -56,11 +44,7 @@
56
44
 
57
45
  }
58
46
 
59
- #wrap{
60
-
61
- flex-direction:column;
47
+ #wrap{flex-direction:column;}
62
-
63
- }
64
48
 
65
49
  #circle-menu{
66
50
 
@@ -84,53 +68,27 @@
84
68
 
85
69
  }
86
70
 
87
- #p1{
71
+ #p1{background-color:#e74c3c;}
72
+
88
-
73
+ #p2{background-color:#e67e22;}
74
+
89
- background-color:rgb(231, 76, 60);
75
+ #p3{background-color:#f1c40f;}
76
+
90
-
77
+ #piemenu {
78
+
79
+ height: 400px;
80
+
81
+ width: 400px;
82
+
83
+ margin:auto;
84
+
91
- }
85
+ }
92
-
93
- #p2{
86
+
94
-
95
- background-color:rgb(230, 126, 34);
87
+
96
-
97
- }
98
-
99
- #p3{
100
-
101
- background-color:rgb(241, 196, 15);
102
-
103
- }
104
-
105
- #p4{
106
-
107
- background-color:rgb(46, 204, 113);
108
-
109
- }
110
-
111
- #p5{
112
-
113
- background-color:rgb(46, 141, 239);
114
-
115
- }
116
-
117
- #p6{
118
-
119
- background-color:rgb(9, 74, 178);
120
-
121
- }
122
-
123
- #p7{
124
-
125
- background-color:rgb(155, 89, 182);
126
-
127
- }
128
88
 
129
89
  @media screen and (max-width: 479px) {
130
90
 
131
- #circle-menu{
132
-
133
- bottom:-80px;}
91
+ #circle-menu{bottom:-80px;}
134
92
 
135
93
  }
136
94
 
@@ -142,7 +100,7 @@
142
100
 
143
101
  <div id="wrap">
144
102
 
145
- <section id="top"><h1>top</h1></section>
103
+ <section id="top"></section>
146
104
 
147
105
  <section id="p1"></section>
148
106
 
@@ -150,47 +108,29 @@
150
108
 
151
109
  <section id="p3"></section>
152
110
 
153
- <section id="p4"></section>
154
-
155
- <section id="p5"></section>
156
-
157
- <section id="p6"></section>
158
-
159
- <section id="p7"></section>
160
-
161
111
 
162
112
 
163
113
  <div id="circle-menu">
164
114
 
165
115
  <div id="piemenu" data-wheelnav
166
116
 
167
- data-wheelnav-slicepath="CogSlice"
117
+ data-wheelnav-slicepath="PieSlice"
168
-
169
- data-wheelnav-spreader data-wheelnav-spreaderpath="PieSpreader"
118
+
170
-
171
- data-wheelnav-marker data-wheelnav-markerpath="DropMarker"
119
+ data-wheelnav-colors="#ccc,#e74c3c,#e67e22,#f1c40f"
172
120
 
173
121
  data-wheelnav-navangle="270"
174
122
 
175
- data-wheelnav-titleheight="35"
176
-
177
- data-wheelnav-cssmode
178
-
179
123
  data-wheelnav-init>
180
124
 
125
+ <div data-wheelnav-navitemtext="top"><a href="#top"></a></div>
126
+
181
- <div data-wheelnav-navitemtext="1"><a href="#p1"></a></div>
127
+ <div data-wheelnav-navitemtext="1"><a href="#p1"></a></div>
182
-
128
+
183
- <div data-wheelnav-navitemtext="2"><a href="#p2"></a></div>
129
+ <div data-wheelnav-navitemtext="2"><a href="#p2"></a></div>
184
-
130
+
185
- <div data-wheelnav-navitemtext="3"><a href="#p3"></a></div>
131
+ <div data-wheelnav-navitemtext="3"><a href="#p3"></a></div>
186
-
187
- <div data-wheelnav-navitemtext="4"><a href="#p4"></a></div>
132
+
188
-
189
- <div data-wheelnav-navitemtext="5"><a href="#p5"></a></div>
133
+
190
-
191
- <div data-wheelnav-navitemtext="6"><a href="#p6"></a></div>
192
-
193
- <div data-wheelnav-navitemtext="7"><a href="#p7"></a></div>
194
134
 
195
135
  </div><!--/#pie-menu-->
196
136
 
@@ -198,13 +138,13 @@
198
138
 
199
139
  </div><!--/#wrap-->
200
140
 
201
- <!--script-->
141
+ <!-- -----script----- -->
202
142
 
203
143
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
204
144
 
205
- <!--menu-->
145
+ <!--円メニュー-->
206
-
146
+
207
- <script type="text/javascript" src="js/wheelnav.min.js"></script>
147
+ <script type="text/javascript" src="js/wheelnav.js"></script>
208
148
 
209
149
  <script type="text/javascript" src="js/raphael.min.js"></script>
210
150
 
@@ -214,14 +154,6 @@
214
154
 
215
155
  var piemenu = new wheelnav('piemenu');
216
156
 
217
- piemenu.spreaderInTitle = icon.plus;
218
-
219
- piemenu.spreaderOutTitle = icon.cross;
220
-
221
- piemenu.spreaderRadius = piemenu.wheelRadius * 0.13;
222
-
223
- piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
224
-
225
157
  piemenu.createWheel();
226
158
 
227
159
  </script>
@@ -234,117 +166,51 @@
234
166
 
235
167
  ```
236
168
 
169
+ wheelnav.jsのコードはそのままだとオーバーになるようなので補足にリンクを載せています。
170
+
237
- circle-menu.cssです
171
+ ###試したこと
172
+
173
+
174
+
238
-
175
+ [公式サイト](http://wheelnavjs.softwaretailoring.net/documentation/html5.html)で書かれていたonmouseupを使う方法では1～7それぞれのページ内リンクへ飛ばすことが出来ました。
176
+
177
+
178
+
179
+
180
+
239
- ```CSS
181
+ ```ここに言語を入力
240
-
241
- #piemenu > svg { width: 100%; height: 100%; }
182
+
242
-
243
- #piemenu { height: 400px; width: 400px; margin:auto; }
244
-
245
- @media (max-width: 400px) { #piemenu { height: 300px; width: 300px; } }
246
-
247
-
248
-
249
- [class|=wheelnav-piemenu-title-basic] { fill: #333; stroke: none; }
250
-
251
- [class|=wheelnav-piemenu-title-selected] { fill: #fff; stroke: none; }
252
-
253
- [class|=wheelnav-piemenu-title-hover] { fill: #222; stroke: none; cursor: pointer; }
254
-
255
- [class|=wheelnav-piemenu-title] > tspan { font-family: Impact, Charcoal, sans-serif; font-size: 24px; }
256
-
257
- .wheelnav-piemenu-spreader-in,
258
-
259
- .wheelnav-piemenu-spreader-out { fill: #444; stroke: #444; stroke-width: 2; cursor: pointer; }
260
-
261
- .wheelnav-piemenu-spreadertitle-in,
262
-
263
- .wheelnav-piemenu-spreadertitle-out { fill: #eee; stroke: #444; cursor: pointer; }
264
-
265
-
266
-
267
- .wheelnav-piemenu-marker { fill: #444; stroke: #444; stroke-width: 2; }
268
-
269
-
270
-
271
- [class|=wheelnav-piemenu-slice-basic-0] { fill: rgb(231, 76, 60); stroke: none; }
272
-
273
- [class|=wheelnav-piemenu-slice-selected-0] { fill: rgb(231, 76, 60); stroke: none; }
274
-
275
- [class|=wheelnav-piemenu-slice-hover-0] { fill: rgb(231, 76, 60); stroke: none; fill-opacity: 0.77; cursor: pointer; }
276
-
277
- [class|=wheelnav-piemenu-slice-basic-1] { fill: rgb(230, 126, 34); stroke: none; }
278
-
279
- [class|=wheelnav-piemenu-slice-selected-1] { fill: rgb(230, 126, 34); stroke: none; }
280
-
281
- [class|=wheelnav-piemenu-slice-hover-1] { fill: rgb(230, 126, 34); stroke: none; fill-opacity: 0.77; cursor: pointer; }
282
-
283
- [class|=wheelnav-piemenu-slice-basic-2] { fill: rgb(241, 196, 15); stroke: none; }
284
-
285
- [class|=wheelnav-piemenu-slice-selected-2] { fill: rgb(241, 196, 15); stroke: none; }
286
-
287
- [class|=wheelnav-piemenu-slice-hover-2] { fill: rgb(241, 196, 15); stroke: none; fill-opacity: 0.77; cursor: pointer; }
288
-
289
- [class|=wheelnav-piemenu-slice-basic-3] { fill: rgb(46, 204, 113); stroke: none; }
290
-
291
- [class|=wheelnav-piemenu-slice-selected-3] { fill: rgb(46, 204, 113); stroke: none; }
292
-
293
- [class|=wheelnav-piemenu-slice-hover-3] { fill: rgb(46, 204, 113); stroke: none; fill-opacity: 0.77; cursor: pointer; }
294
-
295
- [class|=wheelnav-piemenu-slice-basic-4] { fill: rgb(46, 141, 239); stroke: none; }
296
-
297
- [class|=wheelnav-piemenu-slice-selected-4] { fill: rgb(46, 141, 239); stroke: none; }
298
-
299
- [class|=wheelnav-piemenu-slice-hover-4] { fill: rgb(46, 141, 239); stroke: none; fill-opacity: 0.77; cursor: pointer; }
300
-
301
- [class|=wheelnav-piemenu-slice-basic-5] { fill: rgb(9, 74, 178); stroke: none; }
302
-
303
- [class|=wheelnav-piemenu-slice-selected-5] { fill: rgb(9, 74, 178); stroke: none; }
304
-
305
- [class|=wheelnav-piemenu-slice-hover-5] { fill: rgb(9, 74, 178); stroke: none; fill-opacity: 0.77; cursor: pointer; }
183
+ <div data-wheelnav-navitemtext="1" onmouseup="window.location.href = '#p1';" ></div>
306
-
307
- [class|=wheelnav-piemenu-slice-basic-6] { fill: rgb(155, 89, 182); stroke: none; }
184
+
308
-
309
- [class|=wheelnav-piemenu-slice-selected-6] { fill: rgb(155, 89, 182); stroke: none; }
310
-
311
- [class|=wheelnav-piemenu-slice-hover-6] { fill: rgb(155, 89, 182); stroke: none; fill-opacity: 0.77; cursor: pointer; }
185
+ <div data-wheelnav-navitemtext="2" onmouseup="window.location.href = '#p2';" ></div>
186
+
312
-
187
+ <div data-wheelnav-navitemtext="3" onmouseup="window.location.href = '#p3';" ></div>
188
+
313
-
189
+ <div data-wheelnav-navitemtext="4" onmouseup="window.location.href = '#p4';" ></div>
190
+
191
+ <div data-wheelnav-navitemtext="5" onmouseup="window.location.href = '#p5';" ></div>
192
+
193
+ <div data-wheelnav-navitemtext="6" onmouseup="window.location.href = '#p6';" ></div>
194
+
195
+ <div data-wheelnav-navitemtext="7" onmouseup="window.location.href = '#p7';" ></div>
314
196
 
315
197
  ```
316
198
 
317
-
318
-
319
- ###試したこと
320
-
321
-
322
-
323
- [公式サイト](http://wheelnavjs.softwaretailoring.net/documentation/html5.html)で書かれていたonmouseupを使う方法では1～7それぞれのページ内リンクへ飛ばすことが出来ました。
324
-
325
199
  (追記)ナビの数を増減させることもしましたが、1つ飛ばしは数に関係なく起きました。
326
200
 
327
- (追記2)normalize.cssのみ、内部cssのみ、両方、などCSSを外した状態で試しましたが1つ飛ばしは変わりませんでした。またcircle-menu.cssを外すとナビ自体がクリックをしても反応しない状態になりました。ご指摘ありがとうございました。
201
+ (追記2)normalize.cssのみ、内部cssのみ、両方、などCSSを外した状態で試しましたが1つ飛ばしは変わりませんでした。ご指摘ありがとうございました。
202
+
203
+
204
+
328
-
205
+ (追記3)ご回答いただいた通りcircle-menu.cssをチェックし直したところ、
206
+
329
-
207
+ ×「circle-menu.cssを外すとナビ自体がクリックをしても反応しない状態になりました」
208
+
330
-
209
+ ○「circle-menu.cssを外すとナビの数字部分をクリックしたら回転はする。1つ飛ばしは変わらない」
210
+
331
- ```ここに言語を入力
211
+ でした。申し訳ありません
332
-
212
+
333
- <div data-wheelnav-navitemtext="1" onmouseup="window.location.href = '#p1';" ></div>
213
+ またwheelnav.jsを新しいv1.6.2に上げても改善はなかったです。
334
-
335
- <div data-wheelnav-navitemtext="2" onmouseup="window.location.href = '#p2';" ></div>
336
-
337
- <div data-wheelnav-navitemtext="3" onmouseup="window.location.href = '#p3';" ></div>
338
-
339
- <div data-wheelnav-navitemtext="4" onmouseup="window.location.href = '#p4';" ></div>
340
-
341
- <div data-wheelnav-navitemtext="5" onmouseup="window.location.href = '#p5';" ></div>
342
-
343
- <div data-wheelnav-navitemtext="6" onmouseup="window.location.href = '#p6';" ></div>
344
-
345
- <div data-wheelnav-navitemtext="7" onmouseup="window.location.href = '#p7';" ></div>
346
-
347
- ```
348
214
 
349
215
 
350
216
 
@@ -352,6 +218,8 @@
352
218
 
353
219
  wheelnav.jsは1.6.1を使っています
354
220
 
221
+ →1.6.2へ変更しました。コードは[こちら](https://github.com/softwaretailoring/wheelnav/blob/master/js/dist/wheelnav.js)です
222
+
355
223
  (追記2)normalize.cssは[こちら](https://github.com/necolas/normalize.css)のv4.1.1を使っています
356
224
 
357
225
 

2

追記

2016/09/23 10:58

投稿

kurotobi
kurotobi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -314,6 +314,8 @@
314
314
 
315
315
  ```
316
316
 
317
+
318
+
317
319
  ###試したこと
318
320
 
319
321
 
@@ -322,6 +324,10 @@
322
324
 
323
325
  (追記)ナビの数を増減させることもしましたが、1つ飛ばしは数に関係なく起きました。
324
326
 
327
+ (追記2)normalize.cssのみ、内部cssのみ、両方、などCSSを外した状態で試しましたが1つ飛ばしは変わりませんでした。またcircle-menu.cssを外すとナビ自体がクリックをしても反応しない状態になりました。ご指摘ありがとうございました。
328
+
329
+
330
+
325
331
  ```ここに言語を入力
326
332
 
327
333
  <div data-wheelnav-navitemtext="1" onmouseup="window.location.href = '#p1';" ></div>
@@ -344,7 +350,9 @@
344
350
 
345
351
  ###補足情報(言語/FW/ツール等のバージョンなど)
346
352
 
347
- wheelnav.jsは1.6.1を使っています。
353
+ wheelnav.jsは1.6.1を使っています
354
+
355
+ (追記2)normalize.cssは[こちら](https://github.com/necolas/normalize.css)のv4.1.1を使っています
348
356
 
349
357
 
350
358
 

1

補足、文法の修正

2016/09/23 06:14

投稿

kurotobi
kurotobi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -6,9 +6,9 @@
6
6
 
7
7
  ###発生している問題・エラーメッセージ
8
8
 
9
- <a href~>で割り振ると番号がずれて飛び、ずれてしまった番号をクリックしても反応がなく、1つ飛ばしでずれてしまいます。偶数番はクリックしても反応がありませんでした。
9
+ <a href~>で割り振ると番号が1つ飛ばしでずれてしまいます。ずれてしまった番号をクリックしても反応がありませんでした。
10
-
10
+
11
- (例: ナビ3→リンク2、ナビ5→リンク3、ナビ7→リンク4)
11
+ (例: ナビ1→リンク1、ナビ2→反応なし、ナビ3→リンク2...)
12
12
 
13
13
 
14
14
 
@@ -316,8 +316,12 @@
316
316
 
317
317
  ###試したこと
318
318
 
319
+
320
+
319
321
  [公式サイト](http://wheelnavjs.softwaretailoring.net/documentation/html5.html)で書かれていたonmouseupを使う方法では1～7それぞれのページ内リンクへ飛ばすことが出来ました。
320
322
 
323
+ (追記)ナビの数を増減させることもしましたが、1つ飛ばしは数に関係なく起きました。
324
+
321
325
  ```ここに言語を入力
322
326
 
323
327
  <div data-wheelnav-navitemtext="1" onmouseup="window.location.href = '#p1';" ></div>
@@ -344,6 +348,6 @@
344
348
 
345
349
 
346
350
 
347
- mouseupではなく<a>で実現させたいのですが原因が掴めず悩んでいます。是非ご指摘いただければと思います。
351
+ mouseupではなく<a>で実現させたいのですが1つ飛ばしの原因が掴めず悩んでいます。是非ご指摘いただければと思います。
348
352
 
349
353
  よろしくお願いします。