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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 690

kurotobi

score 11

前提・実現したいこと

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

発生している問題・エラーメッセージ

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

該当のソースコード

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
section {height: 100vh;}
#wrap,#top,#p1,#p2,#p3,#circle-menu{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    }
#wrap{flex-direction:column;}
#circle-menu{
    width:100vw;
    position:fixed;
    bottom:-110px;
    z-index:9999;
}
#top{
    background-color:#ccc;
    justify-content:center;
    align-items:center;
}
#p1{background-color:#e74c3c;}
#p2{background-color:#e67e22;}
#p3{background-color:#f1c40f;}
#piemenu {
    height: 400px; 
    width: 400px; 
    margin:auto;
}

@media screen and (max-width: 479px) {
#circle-menu{bottom:-80px;}
}
</style>
</head>
<body>
<div id="wrap">
<section id="top"></section>
<section id="p1"></section>
<section id="p2"></section>
<section id="p3"></section>

<div id="circle-menu">
<div id="piemenu" data-wheelnav
 data-wheelnav-slicepath="PieSlice"
 data-wheelnav-colors="#ccc,#e74c3c,#e67e22,#f1c40f"
 data-wheelnav-navangle="270"
 data-wheelnav-init>
 <div data-wheelnav-navitemtext="top"><a href="#top"></a></div>
 <div data-wheelnav-navitemtext="1"><a href="#p1"></a></div>
 <div data-wheelnav-navitemtext="2"><a href="#p2"></a></div>
 <div data-wheelnav-navitemtext="3"><a href="#p3"></a></div>

</div><!--/#pie-menu-->
</div><!--/#circle-menu-->
</div><!--/#wrap-->
<!-- -----script----- -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--円メニュー-->
<script type="text/javascript" src="js/wheelnav.js"></script> 
<script type="text/javascript" src="js/raphael.min.js"></script>
<script type="text/javascript" src="js/raphael.icons.min.js"></script>
<script>
var piemenu = new wheelnav('piemenu');
piemenu.createWheel();
</script>
</body>
</html>


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つ飛ばしの原因が掴めず悩んでいます。是非ご指摘いただければと思います。
よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gin

    2016/09/23 11:36

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

/* cursorプロパティをそれぞれ全部違う種類に変更する */
[class|=wheelnav-piemenu-slice-hover-0] { fill: rgb(231, 76, 60);  stroke: none; fill-opacity: 0.77; cursor: pointer; }
[class|=wheelnav-piemenu-slice-hover-1] { fill: rgb(230, 126, 34);  stroke: none; fill-opacity: 0.77; cursor: default; }
[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 19:58

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

    キャンセル

  • 2016/09/26 11:21

    これほぼ公式のでa要素4つ増やして試してみましたけど動かないですね…
    想定してないとは思いませんけどね~

    とりあえずa要素で実現させたい理由がレスポンシブのSP版でただのリンクとして扱いたいからというのであれば、SP幅になったときに

    <div data-wheelnav-navitemtext="1" onmouseup="window.location.href = '#p1';" ></div>

    ↑から「#p1」を取得し「<a href="#p1">1</a>」を生成したほうが早いと思います。

    キャンセル

  • 2016/09/26 13:18

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

    キャンセル

  • 2016/09/26 13:34

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

    キャンセル

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

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる