asked on

Open menu in div beside row clicked in table

Hi Experts,

I have a table which will have different amounts of rows. On the last cell <td> I want to put the word Reports and when you either hover over it or click it I want a small div to open just outside the table but beside the record clicked with a menu of the reports which you can select from.
I think this can be done with some smart jquery and css but I am just not sure how to position the div beside the selected record.
Thank you in advance

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Niall Gallagher

ASKER

Tom,
That looks nearly exactly what I am looking for. The only issue I'm running into is, I can't click the links in the menu. As soon as I go to it, it disappears but it does look good

Niall Gallagher

ASKER

Don't worry I just removed the $('.products').hide();

and put in a new function
('.products').focusout( function() {
$('.products').hide();
});
and it works great

Tom Beck

Just add a hover event handler to the hidden <ul>s.

http://jsfiddle.net/jzqoc0m6/1/

Niall Gallagher

ASKER

Did exactly what I needed and very simple to understand

Niall Gallagher

ASKER

I just want to point out my words of wisdom earlier did the trick SOMETIMES. There were also time the menu would not hide so I ended up doing the way Tom advised.

Thanks again

Tom Beck

You're welcome. Thanks for the points.