Home/ Questions/Q 702315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T03:42:25+00:00

So, I’ve built this navigation bar so far and I’m curious if it’s even

  • 0

So, I’ve built this navigation bar so far and I’m curious if it’s even possible to achieve what I’m thinking.
Currently, when you hover over each of the links they drop down (padding is increased).

Now, what I’m curious in doing is if you hover over say “test1”, test2-4 also drop with it but in the padding that has been created from the drop down, “test1” information shows up. Allowing the user to click or read whatever information is in there. Also, if the user would like to, they can move their mouse to test2 and everything would animate (opacity, this I can do I think) to whatever is in the test2 field, test3 doing the same and so on.

I haven’t had much success with this, I’ve created a completely separate panel before, but that didn’t exactly work or I wasn’t doing it correctly.

Here is what I’ve been working on, ANY help would be appreciated! Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() { 
$("#nav li > a").hover(function() {
$(this).stop().animate({paddingTop: "100px"}, 100);
}, 
function() {
$(this).stop().animate({paddingTop: "10px"}, 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;
}
</style>

</head>

<body>

<div id="wrap">

<ul id="nav">
    <li><a href="">test1</a></li>
    <li><a href="">test2</a></li>
    <li><a href="">test3</a></li>
    <li><a href="">test4</a></li>

</ul>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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"></script>
<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">Google<a><br />' +
              '<a href="http://stackoverflow.com/">Stackoverflow</a>';
        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() { }
);
    • 0