帶有 jQuery 和 CSS3 的半色調導航菜單

<div id="main">

<div id="navigation">

<ul class="menuUL">
<!-- The class names that are assigned to the links correspond to name of the shape that is shown on hover: -->
<li><a href="#" class="house">Home</a></li>
<li><a href="#" class="wrench">Services</a></li>
<li><a href="#" class="envelope">Contact</a></li>
<li><a href="#" class="info">About</a></li>
</ul>

<div class="clear"></div>
</div>

<div id="stage">
<!-- The dot divs are shown here -->
</div>

</div>

.menuUL li{
    /* This will arrange the LI-s next to each other */
    display:inline;
}

.menuUL li a,.menuUL li a:visited{
    /* Styling the hyperlinks of the menu as buttons */

    float:left;
    font-weight:bold;
    background:url(img/button_bg.jpg) repeat-x center bottom #666666;

    /* display:block allows for additional CSS rules to take effect, such as paddings: */
    display:block;
    border:1px solid #4D4D4D;
    color:#CCCCCC;
    border-top-color:#565656;

    padding:4px 6px;
    margin:4px 5px;
    height:16px;

    /* Setting a CSS3 box shadow around the button */

    -moz-box-shadow:0 0 1px black;
    -webkit-box-shadow:0 0 1px black;
    box-shadow:0 0 1px black;

    /* CSS3 text shadow */
    text-shadow:0 1px black;
}

.menuUL li a:hover{
    /* On hover show the top, lighter, part of the background: */
    background-position:center top;
    text-decoration:none;
}

#navigation{
    /* The navigation menu bar: */
    background:#222222;
    border:1px solid #111111;
    float:left;
    padding:5px 10px;
}

#navigation,.menuUL li a{
    /* CSS3 rounded corners for both the navigation bar and the buttons: */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    border-radius:4px;
}

#stage{
    /* The stage contains the individual divs that comprise the halftone icon: */
    height:300px;
    position:absolute;
    right:50px;
    top:20px;
    width:400px;
}

.dot{
    /* The stage contains 192 .dot divs: */
    float:left;
    height:25px;
    width:25px;
}

.dot.active{
    /* When assigned the active class, the div shows a background image of a dot: */
    background:url(img/dot.png) no-repeat center center;
}

.clear{
    /* Old-school clear fix hack to clear the floats: */
    clear:both;
}

#main{
    margin:0 auto;
    position:relative;
    width:900px;
}

/* Set serviceMode to true to create your own shapes: */
var serviceMode=false;

$(document).ready(function(){

    /* This code is executed after the DOM has been completely loaded */

    var str=[];
    var perRow = 16;

    /* Generating the dot divs: */
    for(var i=0;i<192;i++)
    {
        str.push('<div class="dot" id="d-'+i+'" />');
    }

    /* Joining the array into a string and adding it to the inner html of the stage div: */
    $('#stage').html(str.join(''));

    /* Using the hover method: */
    $('#navigation li a').hover(function(e){

        /* serviceDraw is a cut-out version of the draw function, used for editing and composing shapes: */

        if(serviceMode)
            serviceDraw($(this).attr('class'));
        else
            draw($(this).attr('class'));
    }, function(e){});

    /* Caching the dot divs into a variable for performance: */
    dots = $('.dot');

    if(serviceMode)
    {
        /* If we are in service mode, show borders around the dot divs, add the export link, and listen for clicks: */

        dots.css({
            border:'1px solid black',
            width:dots.eq(0).width()-2,
            height:dots.eq(0).height()-2,
            cursor:'pointer'
        });

        $('<div/>').css({
            position:'absolute',
            bottom:-20,
            right:0
        }).html('<a href="" onclick="outputString();return false;">[Export Shape]</a>').appendTo('#stage');

        dots.click(function(){
            $(this).toggleClass('active');
        });
    }
});

var shapes={
    /* Each shape is described by an array of points. You can add your own shapes here, just don't forget to add a coma after each array, except for the last one */

    house:[22,37,38,39, .... 166,167,168,169],
    wrench:[22,23,24,25,26 .... 148,163],
    envelope:[34,35,36,37, .... 153,154,155,156],
    info:[22,23,38,39, .... 151,166,167,168]
}

var stopCounter = 0;
var dots;

function draw(shape)
{
    /* This function draws a shape from the shapes object */

    stopCounter++;
    var currentCounter = stopCounter;

    dots.removeClass('active').css('opacity',0);

    $.each(shapes[shape],function(i,j){

        setTimeout(function(){
        /* If a different shape animaton has been started during the showing of the current one, exit the function  */

        if(currentCounter!=stopCounter) return false;

        dots.eq(j).addClass('active').fadeTo('slow',0.4);

        /* The fade animation is scheduled for 10*i millisecond into the future: */
    },10*i);

});
}

function serviceDraw(shape)
{
    /* A cut out version of the draw function, used in service mode */

    dots.removeClass('active');

    $.each(shapes[shape],function(i,j){
        dots.eq(j).addClass('active');
    });
}

function outputString()
{
    /* Exports the positions of the active dot divs as a comma-separated string: */

    var str=[];
    $('.dot.active').each(function(){
        str.push(this.id.replace('d-',''));
    })

    prompt('Insert this string as an array in the shapes object',str.join(','));
}