Question

Im trying to devlop a jquery menu plugin, based on UL and LI tags.

this is the really basic plugin:

(function($){
$.fn.extend( {
    verticalfade: function(options){

        var defaults = {
            speed: 'normal'
        };
        var options = $.extend(defaults, options);

        return this.each(function(){
            $(this).css('cursor', 'pointer');
        });
    }    
});
})(jQuery);

now i would link to understand how to define a click function for the li element, and how to use .addClass(), .removeClass() and .mouseover() over the li elements, specially how to add a class to the LI i am over and at the same time remove the class from all the other li.

this is the simple html head

<script src="javascript/jquery.verticalfade.js" type="text/javascript"></script>
<link rel="stylesheet" href="verticalfade.css" />
<script type="text/javascript">
<!--
// jquery initialize:
    $(function() {
        $('#verticalfade').verticalfade();
    });
//console.log();
-->

and this the body

<ul id="verticalfade">
   <li>First</li>
   <li>Second</li>
   <li>Thirs</li>
</ul>

while the css

.outText{color:#cccccc;}
.inText{color:#ffffff;}

i qould link al the li to receive the .outText class while the overmouse li only the .inText

Thank you!

Answer 1

This is a simple demonstration, but you should get the point.

$('li').live('mouseover', function() {
    var t = this;
    $('li').each(function() {
        if (this != t) $(this).removeClass('bold');
        else $(this).addClass('bold');
    });

In Action: http://jsfiddle.net/zdpZU/

EDIT

Given your update you’ll probably want something more like

$('ul#verticalfade li').live('mouseover', function() {
    var t = this;
    $('ul#verticalfade li').each(function() {
        if (this != t) $(this).removeClass('inText');
        else $(this).addClass('inText');
    });
}).live('mouseout',function(){ $(this).removeClass('inText'); });​

In Action: http://jsfiddle.net/9ecLW/