Wheelnav.js, not selected by defaut NavItemText

Question

I am trying to use Wheelnav.js. as a simple menu as a link to other pages on the site.

Currently, the first menu of my wheel is selected by default. But I would like no menu to be selected by default.

example 1 https://infinistudio.ch/exemple-menu-5-desktop.m4v

I use navitemtext to put external links to titles. But the links for the external pages don't seem to work every time.

and I'm trying to put the title and description on two lines so I can put two different styles. the goal is to get the title and description from wordpress menu.

example code 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>

Answer 1

You have to use the selectedNavItemIndex property in JavaScript.

When it's null there is no selected navitem by default.

var wheel = new wheelnav("piemenu");
wheel.selectedNavItemIndex = null;
wheel.createWheel();

The second issue with links was a bug in the parser. I've fixed it, the latest version is available on GitHub: https://github.com/softwaretailoring/wheelnav

Answer 2

<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 : the link "Rendez-vous" does not work for example.

<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>