CODEWITHSUNDEEP
htmlcsspopuphover
Mike K.
Mike K.

Reputation: 341

Hovering over a popup nav menu and have a separate popup display based on which element in menu is being hovered over?

I'm working on a site that has hovering popup nav menu that works exactly the way I want. What I want in addition to the menu is to have another popup somewhere else on the page that contains specific information about the element that the user is currently hovering over. If no elements in the nav menu are being hovered over, I want the popups to be hidden.

I have a jsFiddle that has everything I want except the additional popup field.

I've tried everything I can think of except a JavaScript solution (as I'm not fluent in JS), however, I don't mind a JS solution. I can fumble my way through JS and make occasional changes - I just can't create it.

This hovering popup menu works (full HTML and CSS in the jsFiddle):

<ul>
    <li>Nav menu here
        <ul>
            <li>Sub menu items</li>
        </ul>
    </li>
    <li>More nav menu items</li>
</ul>

How do I get an additional popup field with specific-to-the-hovering-element relevant information, when hovering over one of the top-level menu items?

Upvotes: 1

Views: 2259

Answers (1)

BlackCursor
BlackCursor

Reputation: 1492

Here is something you can start with. You can use JavaScript to hide and unhide the information.

Check this JSFiddle : http://jsfiddle.net/apD26/17/

Sample JS :

    $(document).ready(function(){
        $('.info').hide();
        $('.parent').mouseover(function(){
            $('.info').show();
            $('.info').text($(this).attr('data-desc'));
        });  
        $('.parent').mouseout(function(){
            $('.info').hide();
        });        
    });

Instead of $(this).text() which i have used to show the text, you may store your description in a data attribute in each menu item and display that.

EDIT

Updated the JSFiddle and answer

Upvotes: 1

Related Questions