質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1687閲覧

wheelnav.jsを使ったページ内リンクを<a>で機能させたい

kurotobi

総合スコア13

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/21 12:06

編集2016/09/23 10:58

###前提・実現したいこと
wheelnav.jsを使い、ページ内リンクを<a href~>を使う方法で各番号へ飛ばしたいです。

###発生している問題・エラーメッセージ
<a href~>でメニューにidを割り振っているのに番号が1つ飛ばしでずれてしまいます。ずれてしまった番号をクリックしても反応がありませんでした。
(例: ナビ1→リンク1、ナビ2→反応なし、ナビ3→リンク2...)

###該当のソースコード
(追記3) circle-menu.cssを外した状態でも同じ現象が起きた為,circle-menu.cssを削除し、html内も修正いたしました。

HTML

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style> 6section {height: 100vh;} 7#wrap,#top,#p1,#p2,#p3,#circle-menu{ 8 display: -webkit-flex; 9 display: -moz-flex; 10 display: -ms-flex; 11 display: -o-flex; 12 display: flex; 13 } 14#wrap{flex-direction:column;} 15#circle-menu{ 16 width:100vw; 17 position:fixed; 18 bottom:-110px; 19 z-index:9999; 20} 21#top{ 22 background-color:#ccc; 23 justify-content:center; 24 align-items:center; 25} 26#p1{background-color:#e74c3c;} 27#p2{background-color:#e67e22;} 28#p3{background-color:#f1c40f;} 29#piemenu { 30 height: 400px; 31 width: 400px; 32 margin:auto; 33} 34 35@media screen and (max-width: 479px) { 36#circle-menu{bottom:-80px;} 37} 38</style> 39</head> 40<body> 41<div id="wrap"> 42<section id="top"></section> 43<section id="p1"></section> 44<section id="p2"></section> 45<section id="p3"></section> 46 47<div id="circle-menu"> 48<div id="piemenu" data-wheelnav 49 data-wheelnav-slicepath="PieSlice" 50 data-wheelnav-colors="#ccc,#e74c3c,#e67e22,#f1c40f" 51 data-wheelnav-navangle="270" 52 data-wheelnav-init> 53 <div data-wheelnav-navitemtext="top"><a href="#top"></a></div> 54 <div data-wheelnav-navitemtext="1"><a href="#p1"></a></div> 55 <div data-wheelnav-navitemtext="2"><a href="#p2"></a></div> 56 <div data-wheelnav-navitemtext="3"><a href="#p3"></a></div> 57 58</div><!--/#pie-menu--> 59</div><!--/#circle-menu--> 60</div><!--/#wrap--> 61<!-- -----script----- --> 62<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 63<!--円メニュー--> 64<script type="text/javascript" src="js/wheelnav.js"></script> 65<script type="text/javascript" src="js/raphael.min.js"></script> 66<script type="text/javascript" src="js/raphael.icons.min.js"></script> 67<script> 68var piemenu = new wheelnav('piemenu'); 69piemenu.createWheel(); 70</script> 71</body> 72</html> 73

wheelnav.jsのコードはそのままだとオーバーになるようなので補足にリンクを載せています。
###試したこと

公式サイトで書かれていたonmouseupを使う方法では1~7それぞれのページ内リンクへ飛ばすことが出来ました。

<div data-wheelnav-navitemtext="1" onmouseup="window.location.href = '#p1';" ></div> <div data-wheelnav-navitemtext="2" onmouseup="window.location.href = '#p2';" ></div> <div data-wheelnav-navitemtext="3" onmouseup="window.location.href = '#p3';" ></div> <div data-wheelnav-navitemtext="4" onmouseup="window.location.href = '#p4';" ></div> <div data-wheelnav-navitemtext="5" onmouseup="window.location.href = '#p5';" ></div> <div data-wheelnav-navitemtext="6" onmouseup="window.location.href = '#p6';" ></div> <div data-wheelnav-navitemtext="7" onmouseup="window.location.href = '#p7';" ></div>

(追記)ナビの数を増減させることもしましたが、1つ飛ばしは数に関係なく起きました。
(追記2)normalize.cssのみ、内部cssのみ、両方、などCSSを外した状態で試しましたが1つ飛ばしは変わりませんでした。ご指摘ありがとうございました。

(追記3)ご回答いただいた通りcircle-menu.cssをチェックし直したところ、
×「circle-menu.cssを外すとナビ自体がクリックをしても反応しない状態になりました」
○「circle-menu.cssを外すとナビの数字部分をクリックしたら回転はする。1つ飛ばしは変わらない」
でした。申し訳ありません
またwheelnav.jsを新しいv1.6.2に上げても改善はなかったです。

###補足情報(言語/FW/ツール等のバージョンなど)
wheelnav.jsは1.6.1を使っています
→1.6.2へ変更しました。コードはこちらです
(追記2)normalize.cssはこちらのv4.1.1を使っています

mouseupではなく<a>で実現させたいのですが1つ飛ばしの原因が掴めず悩んでいます。是非ご指摘いただければと思います。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gin

2016/09/23 02:36

cssを全部取った状態(htmlとJSのみ)でも起こりますか?
guest

回答1

0

ベストアンサー

使用したことがないのでなんとも微妙ですが、circle-menu.cssが何かしている可能性が若干ありそうですね。

circle-menu.css内にcursorプロパティがたくさんあるのでこれを利用し1つ1つ変えてすべて正常に当たっているかチェックしてみてはどうでしょう?
下記のようにすればカーソルが変わるので絞り込みができるかと。

css

1/* cursorプロパティをそれぞれ全部違う種類に変更する */ 2[class|=wheelnav-piemenu-slice-hover-0] { fill: rgb(231, 76, 60); stroke: none; fill-opacity: 0.77; cursor: pointer; } 3[class|=wheelnav-piemenu-slice-hover-1] { fill: rgb(230, 126, 34); stroke: none; fill-opacity: 0.77; cursor: default; } 4[class|=wheelnav-piemenu-slice-hover-2] { fill: rgb(241, 196, 15); stroke: none; fill-opacity: 0.77; cursor: crosshair; }

また、公式と同じように4つにして公式のcircle-menu.cssをできる限り修正せず([icon,1,2,img]のうち2だけを4つコピーする感じ)使用してみたらどうなるでしょう?
これがうまくいけばカスタマイズするときに何か大事なところを変更したなどの確認ができると思います。

投稿2016/09/23 06:43

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kurotobi

2016/09/23 10:58

ご回答ありがとうございます。「circle-menu.cssを外すとナビ自体がクリックをしても反応しない状態になりました」と記述していましたが提案いただいたように1つ1つチェックしたところクリックの範囲が数字部のみとなっていたようです。申し訳ありません…。circle-menu.cssを外した状態でも1つ飛ばしの状態はそのままでした。 公式の形に近づけた状態のコードを追記しましたので、よろしければまたご指摘いただけたらと思います。
gin

2016/09/26 02:21

これほぼ公式のでa要素4つ増やして試してみましたけど動かないですね… 想定してないとは思いませんけどね~ とりあえずa要素で実現させたい理由がレスポンシブのSP版でただのリンクとして扱いたいからというのであれば、SP幅になったときに <div data-wheelnav-navitemtext="1" onmouseup="window.location.href = '#p1';" ></div> ↑から「#p1」を取得し「<a href="#p1">1</a>」を生成したほうが早いと思います。
kurotobi

2016/09/26 04:18

コメントありがとうございます。 実現させたい理由としてはスムーズスクロールを一緒に実装してメニュークリック→メニューの回転に合わせてスクロールが始まる という動きにしたかったのですが、onmouseupでこの動きに対応させる方法が思いつかず、メニューは<a>に対応しているようだったので、こちらを変えたほうがよいと思っていたらこの現象が出てしまいました…。 別の方法を試してみようと思います。ご対応いただき、ありがとうございました。
gin

2016/09/26 04:34

それならdivにdata-hrefか何かを設定しておいてとかではいけないですかね?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問