###前提・実現したいこと
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つ飛ばしの原因が掴めず悩んでいます。是非ご指摘いただければと思います。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー