Thursday, May 2, 2013

popup menu onclick javascript image


http://jsfiddle.net/bishopknight/S3jft/

$('#test').click(function() {
    $('#Menu').show('slow');
});


        #Menu
        {
            padding:0;
            margin:0;
            list-style-type:none;
            font-size:13px;
            color:#717171;
            width:105px;
            display: none;
            border: 1px solid #333;
        }

        #Menu li
        {
            border-bottom:1px solid #eeeeee;
            padding:7px 10px 7px 10px;
        }

        #Menu li:hover
        {
            color:White;
            background-color:#ffcc00;
            display: block;
        }

        #Menu a:link
        {
            color:#717171;
            text-decoration:none;   
            display: block;
        }

        #Menu a:hover
        {
            color:White;   
            display: block;
        }



<img id="test" onclick="test()" src="http://cdn-img.easyicon.net/png/126/12616.png" width="20px" height="20px" />

<div>
    <ul id="Menu">
        <li><a href="#">Add Above...</a></li>
        <li><a href="#">Edit Inject...</a></li>
        <li><a href="#">Delete Inject...</a></li>
        <li><a href="#">Add Below...</a></li>
    </ul>
</div>