Solved

Jquery simple context menu using DIV and UL

Posted on 2013-01-24
2
460 Views
Last Modified: 2013-01-26
I am not able to figure out how to build this pop-up type menu for actions link (picture attahced), for each row of the table. It is like a little context menu. I have the link and ul inside TD, but not able to figure out the Jquery and Styles. How do I accomplish this?
<tr>
                       
<td style="width: 140px; text-align: right;padding-right: 20px">

<a href="javascript:void(0)" onclick="showActions();">Actions</a>
<div class="size">

 <ul class="list">
 <li>Link1</li>
 <li>Link2</li>                                    
</ul>

</div>

</td>

</tr>
Untitled-2.png
0
Comment
Question by:immtrac
2 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 150 total points
ID: 38816718
here's a start:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style>
            table{
                width:80%;
            }

            .data-tr{
                background-color:lightblue;
                padding:20px;

            }
            ul, ul li{
                list-style: none;
                margin:0;
                padding:0;

            }
            .list{
                display:none;
                position:absolute;
                right:0;
                background-color:orangered;
                padding:10px;
                min-width:100px;
            }
            .size{
                position:relative;
                float:right;
            }
        </style>
    </head>
    <body>
        <table>
            <tr class="actions-tr">

                <td>
                    <div class="size">
                        <a href="#" class="actions">Actions</a>
                        <ul class="list">
                            <li>Link1</li>
                            <li>Link2</li>                                    
                        </ul>
                    </div>

                </td>

            </tr>
            <tr class="data-tr">
                <td>
                    data
                </td>
            </tr>
        </table>
        <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
        <script>
            $(".actions").click(function(){
                $(this).parents(".size").find(".list").toggle();
            });
            
        </script>
    </body>
</html>

Open in new window

0
 

Author Closing Comment

by:immtrac
ID: 38822454
Thanks. It gives me something to start with.

Though I accepted the question, can you help my figure out how to hide links list after mouse is out for 2 seconds?
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question