How can I make DIVs flyout in response to a hover event (like the National Geographic site) using jQuery?

Question

I have an issue similar to the question raised here, but a somewhat different case.

---

The functionality I'm looking for is almost identical to the National Geographic website, where the "sneak peek" appears when hovering over one of the main links, and stays visible while interacting with it, or hovering over the child menu, but disappears when not hovering over the menu item, child links, or the "sneak peek".

---

When I mouseover over the list items below, I would like a DIV that I specify (in this case corresponding by number - but I would like the flexibility to define the div name individually if numbers don't exist, or don't match up [I'm using Drupal, and everything is dynamically generated]) to slide out, or just appear, beneath it (the list will be inline). It needs to stay open so people can click the link that appears in the DIV, but when you mouseout from the DIV or the list item, the div needs to disappear.

My HTML looks more like this:

<div id="navigation">
    <ul id="switches">
      <li class="item-1">First item</li>
      <li class="item-2">Second item</li>
      <li class="item-3">Third item</li>
      <li class="item-4">Fourth item</li>
    </ul>
    <div id="block-1" class="block">
        <p>First block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-2" class="block">
        <p>Second block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-3" class="block">
        <p>Third block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-4" class="block">
        <p>Fourth block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
</div>

My CSS looks like this:

#switches li {
    display: inline-block;
    height: 50px;
    background-color: #F33;
}
#block-1,
#block-2,
#block-3,
#block-4 {
    position: absolute;
    top: 50px;
    height: 300px;
    width: 500px;
    background-color: #999;
    display: none;
}
#block-1.active,
#block-2.active,
#block-3.active,
#block-4.active {
    display: block;
}

And my jQuery (based on Carl Meyer's answer to the other thread, which I'm sure I've botched up horribly) looks like this:

$(document).ready(function() {
    switches = $('#switches > li');
    slides = $('#navigation > div.block');
    switches.each(function(idx) {
        $(this).data('slide', slides.eq(idx));
    }).hover(
    function() {
        switches.removeClass('active');
        slides.removeClass('active');             
        $(this).addClass('active');  
        $(this).data('slide').addClass('active');
    });
});

I'm not familiar with how this code is working, and have been trying to work it out, but I'm not sure I understand the use of "idx" and how the singular "slide" term comes into play.

I'm pretty new to jQuery and have been tasked with this project. I appreciate any help, and I hope others are able to find it useful as well!

Answer 1

Basically, you should nest your pop-up inside the element that triggers it, then, use :hover pseudo-class to show it. If you need this to work in IE6, you have to attach some workaround script for :hover simulation, but that's quite simple to find on the net. If you need transitions, use mouse events with the same markup.

Example here: http://jsfiddle.net/YNSVj/1/

Here is the markup:

<ul class="menu">
    <li class="item"><a href="#">Link 1</a><div class="popup">This is popup number one</div></li>
    <li class="item"><a href="#">Link 2</a><div class="popup">This is popup number two. <br/> It has a line break inside.</div></li>
</ul>

And here is CSS:

.item{
    float: left;
    background: #ffc;
    height: 2em;
    padding: 5px 15px 0;
    border: 1px solid #000;
}

.popup
    {
        display: none;
        position: absolute;
        left: 0;
        top: 2em;
        width: 100%;
        margin-top: 17px; /* To compensate for parent block's padding */
        color: #fff;
        background: #f00;
    }

.item:hover .popup
{
    display: block;
}

Note that you have to set an explicit height for the menu item, and then play with the top margin value of pop-up block, so that it doesn't get torn away if the user changes font size.

Also, bear in mind that this is the most simple solution and may not be applicable in some situations.