Radial navbar

Compute a vector and show radial mouseovers with callback to notify clicks.

by doug65536

HTML

<div id="quadrant_debug"></div>

<!--div class="mininav-container">
<img class="mininav" src="http://colorworld.se/videodauti/img/zoneempty.svg"/>
<img class="pillar" data-dir="top" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="bottom" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="left" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="right" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="mid" src="http://colorworld.se/videodauti/img/zone.svg"/>
</div-->

<div class="pagecontainer">
    <div class="scrollcontainer">
        <div class="scroller-mid">
            Mid
<div class="mininav-container">
<img class="mininav" src="http://colorworld.se/videodauti/img/zoneempty.svg"/>
<img class="pillar" data-dir="top" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="bottom" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="left" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="right" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="mid" src="http://colorworld.se/videodauti/img/zone.svg"/>
</div>
        </div>
        <div class="scroller-top">
            Top
<div class="mininav-container">
<img class="mininav" src="http://colorworld.se/videodauti/img/zoneempty.svg"/>
<img class="pillar" data-dir="top" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="bottom" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="left" src="http://colorworld.se/videodauti/img/bigzonepillars1fill.svg"/>
<img class="pillar" data-dir="right"...

CSS

html, body {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

/* nav */

.mininav-container {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: gray;
}

.scroller-mid .mininav-container {
    width: 300px;
    height: 300px;
}

.mininav, .pillar {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index:2;
}
.pillar {
    z-index: 3;
    background-color: rgba(0,0,0,0);
}

/* slider */

.scrollcontrols button {
    width: 64px;
}
.pagecontainer {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: yellow;
}
.scrollcontainer {
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    background-color: green;
    margin: 0px;
    padding: 0px;
}
.scroller-top, .scroller-bottom, .scroller-left, .scroller-right, .scroller-mid {
    position: absolute;
    width: 33.3333333333333%;
    height: 33.3333333333333%;
    margin: 0px;
    padding: 0px;
    background-color: lightblue;
}
.scroller-mid {
    top: 33.33333333333333%;
    left: 33.33333333333333%;
}
.scroller-top {
    top: 0%;
    left: 33.33333333333333%;
}
.scroller-bottom {
    top: 66.66666666666666%;
    left: 33.33333333333333%;
}
.scroller-left {
    top: 33.33333333333333%;
    left: 0%;
}
.scroller-right {
    top: 33.33333333333333%;
    left: 66.66666666666666%;
}

JavaScript

$(function() {
    (function($) {
        $.fn.smartFadeIn = function(opacity,speed,ease) {
            return this.each(function() {
                if ($.data(this, 'smartfadeshown') != opacity) {
                    $(this).stop(true, false).animate({opacity: opacity}, speed, ease);
                    $.data(this, 'smartfadeshown', opacity);
                }
            });
        };
        $.fn.smartFadeOut = function(speed,ease) {
            return this.each(function() {
                if ($.data(this, 'smartfadeshown') !== 0) {
                    $(this).stop(true, false).animate({opacity: 0}, speed, ease);
                    $.removeData(this, 'smartfadeshown', 0);
                }
            });
        };
    }(jQuery));
    
    function initialize_mininav(name, container_selector, mininav_selector, pillar_selector, callback) {
        var container = $(container_selector),
            mininav = $(mininav_selector, container),
            pillars = $(pillar_selector, container);
        
        var current_page = null;
        var current_mouseover = null;
        var half_width = mininav.width() / 2;
        
        // Make lookup table to find specific pillars
        var pillar_lookup = {};
        pillars.each(function() {
            var pillar = $(this);
            pillar_lookup[pillar.data('dir')] = pillar;
        });
        // Set rotation for all pillars
        pillar_lookup.top.css({transform: 'rotate(0deg)'});
        pillar_lookup.right.css({transform: 'rotate(90deg)'});
        pillar_lookup.bottom.css({transform: 'rotate(180deg)'});
        pillar_lookup.left.css({transform: 'rotate(270deg)'});
        
        container.css({opacity:0});
        pillars.css({opacity:0});
        
        container.on('mouseout', function() {
            update_pillars(null);
        });
        
        function update_pillars(mouseover_pillar) {
            current_mouseover = mouseover_pillar;
            // fade out if not mouseover and...