By areikiera on

Hello!

This is mostly a jQuery question, but since it's in Drupal, I have some unique requirements.

To make this easier to understand, the functionality I'm looking for is exactly like the functionality on the National Geographic website, where when you hover over a main link, the child menu appears, and a "sneak peek" div of the section appears. I have the child menu taken care of through CSS, so that it still works for users with javascript disabled. I need the "sneak peek"peek to appear, and for links/images within it to be able to be clicked. When you hover off of the link or the "sneak peek" area, the "sneak peek" needs to disappear.

A simplified version of the code I'm trying to manipulate is below. The jQuery code is incomplete, but it's what I started with based on this thread.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(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');
    });
});

</script>

<style type="text/css">

#switches li {
    display: inline-block;
    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;
}

</style>
</head>
<body>
<div id="navigation">
    <div id="menu">
        <ul id="switches">
            <li class="item-1"><a href="some-link">First item</a>
                <ul>
                    <li><a href="some-link">Child item</a></li>
                    <li><a href="some-link">Child item</a></li>
                    <li><a href="some-link">Child item</a></li>
                </ul>
            </li>
            <li class="item-2"><a href="some-link">Second item</a>
                <ul>
                    <li><a href="some-link">Child item</a></li>
                    <li><a href="some-link">Child item</a></li>
                    <li><a href="some-link">Child item</a></li>
                </ul>
            </li>
            <li class="item-3"><a href="some-link">Third item</a>
                <ul>
                    <li><a href="some-link">Child item</a></li>
                    <li><a href="some-link">Child item</a></li>
                    <li><a href="some-link">Child item</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="block-1" class="block">
        <p>First block</p>
        <p><a href="some-link">Click here!</a></p>
    </div>
    <div id="block-2" class="block">
        <p>Second block</p>
        <p><a href="some-link">Click here!</a></p>
    </div>
    <div id="block-3" class="block">
        <p>Third block</p>
        <p><a href="some-link">Click here!</a></p>
    </div>
</div>
</body>
<html>

Help would be greatly appreciated. I'm not sure how much effort will need to go into this, so I would appreciate quotes, but we are looking to spend approx. $50-$100. This is a urgently needed functionality.

Please contact me through my contact form, or by emailing kieradavenport@gmail.com. Thanks!

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

You can do that using the beauty tips module, views and some custom code.