Another take at navigation

by taneleero

HTML

<div class="nav"> 
    <a href="#" class="button">#1</a>  
    <a href="#" class="button">#2</a>  
    <a href="#" class="button">#3</a>  
    <a href="#" class="button">#4</a> 
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
.nav {
    position: fixed;
    height: 100px;
    width: 100px;
    z-index: 10000;
    display: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.nav a {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin:5px;
    text-align: center;
    color: #666;
    text-decoration: none;
    float: left;
    box-shadow: #eee 0px 0px 0px 2px inset;
    border-radius:4px;
}
.nav a:hover {
    background:#333;
    color:#fff;
    box-shadow:none;
}

JavaScript

$(document).ready(function(){
    var n = 0;
    $('html').mousedown(function (s) {
        n = setTimeout('openUp(' + s.pageX + ',' + s.pageY + ')', 200);
    }).bind('mouseup mouseleave', function () {
        clearTimeout(n);
    });
    $('body').mouseup(function (f) {
        $('.nav').fadeOut(500);
        if ($(f.target).hasClass('button')) {
            $('body').append($(f.target).html()+'<br>');
        }
    });
});

function openUp(a, b) {
    $('.nav').css({
        left: a - $('.nav').width() / 2,
        top: b - $('.nav').height() / 2
    }).fadeIn(100);
}