Question

So im new to jquery and I want to make a new navigation menu. I want this jquery script to color my list items randomly in a variety of colors of my choosing. Lets just say red, yellow, green, blue and black. Also it should not be possible to have the same color before and after a color is selected.

Further more I want this menu to have a hover function, so that once you hover one of the list items, all the other list items get the color of grey or another css value.

I hope someone could help me build this.

I know I haven’t done much yet.

HTML:

<div id="wrapper">
    <div id="nav">
        <ul id="navigation">
            <li>Home</li>
            <li>About</li>
            <li>Products</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>
    </div>
</div>

Jquery:

$(document).ready(function() {
    $('#navigation, li').addClass('blue');
});

CSS:

* {
    margin:0px; padding:0px;
}
body {
    background-color:#999;
}

#wrapper {
    width:960px; margin:auto; background-color:#CCC;
}
.blue {
    color:#567;
}

Demo on jsfiddle, link: http://jsfiddle.net/iBertel/vbpXP/11/

Answer 1

Using @massivePenguin’s idea
Here you go, basically, we create an array, a few css rules with a default hover state of grey on all elements in the list. We end up with this result which has a randomised colour effect.

This is the key that randomises your array. The magic happens here, to make this a better effect, add 5 or so more colours to the array to add to the “random” effect.

colours.sort(function() {return 0.5 - Math.random()});

The above code is the key factor in the below script.

var colours = ['red', 'yellow', 'blue', 'green', 'pink'];
$(document).ready(function() {
    $('#navigation li').hover(function() {
        colours.sort(function() {return 0.5 - Math.random()});
        $(this).addClass(colours[0]);
    }, function() {           
        $(this).removeClass(colours[0]);      
    });
});​

http://jsfiddle.net/shannonhochkins/QkWXN/