Solved

Jquery simple context menu using DIV and UL

Posted on 2013-01-24
2
462 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

751 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