Question

Hey guys, this is my first time actually posting at stackflow but i’ve used people’s answers before. Really a great site.

Anywho onto my problemo. I have some ‘li’ tags. When I hover the mouse over these ‘li’s, I need a DIV to appear over the ‘li’ with some buttons, etc. Basically it’s kind of a menu. the ‘li’s are an unpredictable length, usually somewhere from 1 line to 5.

A great example of what I’m trying to accomp is the dribbble.com homepage. Hover over an image (though I’m using ‘li’s) and a nifty lil info thing comes up.

I have absolutely no experience with javascript or jqry, I’m just a PHP guy with some CSS. I do the back-end work. Anywho, can anyone show me how to do this and include a basic example please? Would really really appreciate it.

Help?

Answer 1

Lets say you have the following structure:

<ul id="myMenu">
    <li><div class="inactive">Menu 1</div><div class="active">..some icons..</div></li>
    <li><div class="inactive">Menu 2</div><div class="active">..some icons..</div></li>
    <li><div class="inactive">Menu 3</div><div class="active">..some icons..</div></li>
</ul>

This is a very basic menu and I’m sure you’ll have something more complicated, but by using wrapped divs this will make setting up your structure much easier.

Your CSS would look something like this:

/* Initially hide rollover content */
#myMenu li div.active {
    display: none;
    /* Use the following if you want to overlay, otherwise delete */
    z-index: 2;
    position: absolute;
    top: 0px; left: 0px;
}

And assuming you’re using jQuery the javascript would look something like this:

// DOM Ready
jQuery(function($) {
    // Reference to menu
    $("#myMenu").delegate("li", "mouseenter mouseleave", function(evt) {
        var $this = $(this);
        switch(evt.type) {
            // When the client mouses over
            case "mouseover":
                // To swap content use this
                $this.find(".inactive").hide(); // Remove this line to overlay
                $this.find(".active").show();
            break;
            // When the client mouses out
            case "mouseout":
                // To swap content use this
                $this.find(".inactive").show(); // Remove this line to overlay
                $this.find(".active").hide();
            break;
        }
    });
});

Edit: had a typo in the css and the javascript, sorry bro