我正在尝试使用Wheelnav.js。作为一个简单的菜单,作为指向网站上其他页面的链接。
当前,我的转盘的第一个菜单默认为选中状态。但我不想默认选择任何菜单。
示例1https://infinistudio.ch/exemple-menu-5-desktop.m4v
我使用navitemtext放置标题的外部链接。但是,外部页面的链接似乎并非每次都起作用。
并且我试图将标题和描述放在两行上,以便可以放置两种不同的样式。目的是从wordpress菜单中获取标题和说明。
示例代码boucle
<nav>
<div id='piemenu' data-wheelnav
data-wheelnav-slicepath='NullSlice'
data-wheelnav-navangle='270'
data-wheelnav-cssmode
data-wheelnav-rotateoff
data-wheelnav-init>
<?php foreach ($menu_items as $item) : ?>
<div data-wheelnav-navitemtext='<?= $item['title'] ?>'\n<?= $item['description'] ?> >
<a href="<?= $item['url'] ?>" title="<?= $item['title'] ?>"><?= $item['title'] ?></a>
</div>
<?php endforeach; ?>
<div>
</nav>
您必须在JavaScript中使用selectedNavItemIndex属性。
为空时,默认情况下没有选定的navitem。
var wheel = new wheelnav("piemenu");
wheel.selectedNavItemIndex = null;
wheel.createWheel();
<script type="text/javascript">
window.onload = function () {
var wheel = new wheelnav('piemenu');
wheel.sliceInitPathFunction = wheel.slicePathFunction;
wheel.initPercent = 0.1;
wheel.wheelRadius = wheel.wheelRadius * 1.7;
wheel.selectedNavItemIndex = null;
wheel.createWheel();
};
</script>
<nav>
<div id='piemenu' data-wheelnav
data-wheelnav-slicepath='NullSlice'
data-wheelnav-navangle='270'
data-wheelnav-cssmode
data-wheelnav-rotateoff
data-wheelnav-init>
<?php $menu_items = wp_get_menu_array('9'); ?>
<?php foreach ($menu_items as $item) : ?>
<div data-wheelnav-navitemtext='<?= $item['title'] ?><?= $item['description'] ?>'>
<a href="<?= $item['url'] ?>" title="<?= $item['title'] ?>"><?= $item['title'] ?></a>
</div>
<?php endforeach; ?>
<div>
</nav>
resultat html:例如,“ Rendez-vous”链接无效。
<nav>
<div id='piemenu' data-wheelnav
data-wheelnav-slicepath='NullSlice'
data-wheelnav-navangle='270'
data-wheelnav-cssmode
data-wheelnav-rotateoff
data-wheelnav-init>
<div data-wheelnav-navitemtext='L esperluette(en moins d’une minute)'>
<a href="http://localhost:8888/lesperluette.fr/" title="L esperluette">L esperluette</a>
</div>
<div data-wheelnav-navitemtext='Rendez-vous'>
<a href="http://localhost:8888/lesperluette.fr/bousole7/" title="Rendez-vous">Rendez-vous</a>
</div>
<div data-wheelnav-navitemtext='07 Boussole 7'>
<a href="http://localhost:8888/lesperluette.fr/bousole7/" title="07 Boussole 7">07 Boussole 7</a>
</div>
<div data-wheelnav-navitemtext='05 test menu'>
<a href="http://localhost:8888/lesperluette.fr/bousole5/" title="05 test menu">05 test menu</a>
</div>
<div data-wheelnav-navitemtext='04 Qui sommes nous ?'>
<a href="http://localhost:8888/lesperluette.fr/bousole44/" title="04 Qui sommes nous ?">04 Qui sommes nous ?</a>
</div>
<div data-wheelnav-navitemtext='Exemple externe 1'>
<a href="http://www.youtube.com" title="Exemple externe 1">Exemple externe 1</a>
</div>
<div data-wheelnav-navitemtext='Exemple interne'>
<a href="http://localhost:8888/lesperluette.fr/" title="Exemple interne">Exemple interne</a>
</div>
<div data-wheelnav-navitemtext='Contact'>
<a href="#" title="Contact">Contact</a>
</div>
<div>
</nav>