Question

I am attempting to get the list value through a jquery function attached to the css menu.

My code is as follows.

    $.fn.appmenu = function(options){

    //problem
    $(this).click(function(){
        alert($(this).filter("ul li").html());
    });

    $(this).hover(function(){
        $(this).filter("li").animate({
            top:"20px"
        });
    });

    //this.find('li:last').after("<li>test</li>");
    var lists = '<li title="Home" link="index.php"></li>';

    $.each(options, function(index, value) { 
        lists += '<li style="background-image:url(images/'+value[1]+'.png);" title="'+value[0]+'" link="'+value[1]+'"></li>';
    });

    return this.html("<ul>"+lists+"</ul>")
}

I call my menu using:

    //title, icon, link
$("#app-menu").appmenu([
    ["add", "address", "#link1"],
    ["contact", "comment", "#link2"],
    ["about", "pencil", "#link3"]
]);

Any help would be appriciated.

Answer 1

Your html structure is not correct. The <li> tags are invalid and jQuery does not like your lists variable content.

I have altered your fiddle a little bit but it’s now working. See http://jsfiddle.net/6yLYZ/.