ansaurus

Question

Answer 1

A:

I messed around with your code some but didn't get a full answer, but figured I'd post what I have anyway. This code will add a div above the menu, and use that to display the <a> specific content. I added ids to your <a> tags as you'd need some way to identify them when determining what content to show. I don't think you really should put a div tag in an ul, so this isn't perfect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml"&gt; 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript"> 
$(function() {  
    $('#content').height(0);
    $("#nav li > a").hover(function() { 
            var id = $(this)[0].id;
            var content = 'Default content';
            if (id == '1')
                content = 'Test 1 content';
            else if (id == '2')
                content = 'Test 2 content';
            else if (id == '3')
                content = 'Test 3 content';
            else if (id == '4')
                content = 'Test 4 content';

            $('#content').html(content);
        },  
        function() { }
    ); 

    $("#nav").hover(function() { 
            $('#content').stop().animate({height: "100px"}, 100);
        },  
        function() { 
            $('#content').html('').stop().animate({height: "0"}, 200);  
        }
    ); 

});

</script> 

<style type="text/css">  
#nav 
{ 
position: absolute; 
top: 0; 
left: 60px; 
padding: 0; 
margin: 0; 
list-style: none; 
} 

#nav li 
{ 
display: inline; 
} 

#nav li a 
{ 
float: left; 
display: block; 
color: #555; 
text-decoration: none; 
padding: 10px 30px; 
background-color: #d1d1d1; 
border-top: none; 
} 

div#content
{
    border: 1px solid red;
    background-color: #d1d1d1;
    width: 355px;
}
</style> 

</head> 

<body> 

<div id="wrap"> 
<ul id="nav"> 
    <div id="content"></div>
    <li><a id="1" href="">test1</a></li> 
    <li><a id="2" href="">test2</a></li> 
    <li><a id="3" href="">test3</a></li> 
    <li><a id="4" href="">test4</a></li>
</ul> 
</div> 
</body> 
</html>

I then thought that you meant you wanted your link specific content to show up directly over your links when you hover, and came up with something different. You can use jQuery's prepend to add the specific content to the 'padding' area. With this solution you don't need the ids in the a tags, but the whole menu doesn't drop down on hover (but it could somehow, I got kind of stuck there and may come back to it later). To see it just change your jQuery code to this:

$(function() {  
    $("#nav li > a").hover(function() { 
        $(this).stop().animate({paddingTop: "100px"}, 100); 
        $(this).prepend('<div id="paddingMenu"><p>test1 link</p><p>test1 link2</p></div>');
    },  
    function() { 
        $(this).stop().animate({paddingTop: "10px"}, 200);
        $('#paddingMenu').remove();
    }); 

});

I hope this provides some help. Good luck!

Edit: Sure, jQuery's html method will set the innerHTML of the element(s) returned from its selector. So in the first example, the content variable can contain whatever a tags you want to use as links. Here's an example showing to to create a couple links for test1's content:

$("#nav li > a").hover(function() { 
        var id = $(this)[0].id;
        var content = 'Default content';
        if (id == '1')
            content = '<a href="http://google.com"&gt;Google&lt;a&gt;&lt;br />' +
              '<a href="http://stackoverflow.com/"&gt;Stackoverflow&lt;/a&gt;';
        else if (id == '2')
            content = 'Test 2 content';
        else if (id == '3')
            content = 'Test 3 content';
        else if (id == '4')
            content = 'Test 4 content';

        $('#content').html(content);
    },  
    function() { }
);

rosscj2533 2010-03-29 21:19:46

Omg yes!The first example is pretty much exactly what I was trying to do!I achieved this through a hover/side like I mentioned before, but that just wasn't cutting it and I felt like I was very close to figuring this out through animate but just couldn't get it fully completed. Much thanks! Thank you thank you!

Josh 2010-03-29 21:31:14

Actually, I have a follow up question (which I hope you view). Say I wanted to make the content of these drop downs have links in them. How could I achieve that? Is it possible? Not every drop down would have links where the content would go, but I'm envisioning that at least two of them would just strictly be links.

Josh 2010-03-29 21:36:38

@Josh - Updated with links example.

rosscj2533 2010-03-29 22:54:51

ansaurus

tags:

views:

answers:

.animate question/help

related questions