5

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!

Community
  • 1
  • 1
kidreapertronV
  • 51
  • 1
  • 3
  • 1
    Thanks pyrorex1, for catching that code error! And for the up vote! I've never used stackoverflow before and that voting module is amazingly helpful to find the most useful info! Just wanted to say thanks to you and stackoverflow for being such helpful resources! – kidreapertronV Sep 19 '10 at 13:23
  • Shuffle effect example see here: http://jquery.malsup.com/cycle – Nikit Sep 20 '10 at 01:34
  • Thanks for the edits guys! I see that my reference to possible payment was removed. I couldn't find anything in the FAQs addressing whether or not that was okay, so I included it. I've taken note of it, and won't include it again. Thanks so much! I am impressed by the moderation on this forum, and I'm really looking forward to becoming a more active member. I've found a solution to my problem and will post it in detail soon. – kidreapertronV Sep 20 '10 at 03:42
  • For what it's worth, I'm not too keen on the National Geographic site's links. It briefly shows the main images before showing the content specific to the link you've hovered over, kind of blinky. – MrBoJangles Feb 15 '11 at 23:31

1 Answers1

4

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.

unclenorton
  • 1,605
  • 11
  • 19