DIV menu ontop of <li> on hover

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

Create a .js file and paste this code in.

(function($) {
    $.fn.tooltip = function(options) {

        var 
          defaults = {
              background: '#e3e3e3',
              color: 'black',
              rounded: false
          },
          settings = $.extend({}, defaults, options);

        this.each(function() {
            var $this = $(this);
            var title = this.title;

            if ($this.is('a') && $this.attr('title') != '') {
                this.title = '';
                $this.hover(function(e) {
                    // mouse over
                    $('<div id="tooltip" />')
                      .appendTo('body')
                      .text(title)
                      .hide()
                      .css({
                          backgroundColor: settings.background,
                          color: settings.color,
                          top: e.pageY + 10,
                          left: e.pageX + 20
                      })
                      .fadeIn(350);

                    if (settings.rounded) {
                        $('#tooltip').addClass('rounded');
                    }
                }, function() {
                    // mouse out
                    $('#tooltip').remove();
                });
            }

            $this.mousemove(function(e) {
                $('#tooltip').css({
                    top: e.pageY + 10,
                    left: e.pageX + 20
                });
            });

        });
        // returns the jQuery object to allow for chainability.
        return this;
    }
})(jQuery);

This should go in your page;

<script src="../../Scripts/jQuery.tooltip.js" type="text/javascript"></script>

<style>
#tooltip {
    background: url(../images/search.png) no-repeat 5px 50%;
    border: 1px solid #BFBFBF;
    float: left;
    font-size: 12px;
    max-width: 160px;
    padding: 1em 1em 1em 3em;
    position: absolute;
}

.rounded {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

</style>

<script type="text/javascript">
    $('.tooltip').tooltip();    
</script> 

This is the link that will give you a tooltip;

<a href="#" class="tooltip rounded" title="The other day, I bla bla with WordPress.">over the years</a>

Now, you can replace the <a> with anything you want so long as you have the class "tooltip". Then you can place buttons etc inside it.

This isn't the whole solution but it should get you pretty close.

Answer 2

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