On Click / Context Menu With Effects

Menu with opening & closing Slide effects

by VENKATA VINAY BYSANI

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div id="contextMenuDiv" style="broder:2px;border-style:dotted;border-color:green;padding:15px">
    Div Content.... Start....
    <br/><br/><br/><br/>   
    Click Any Where inside the DIV to 
    <font color="red"><b>SHOW</b></font> context Menu
    <br/><br/><br/><br/>
    To 
    <font color="red"><b>HIDE</b></font> 
    the Menu click on any option from the menu
    <br/><br/><br/><br/>
    Div Content.... End....
</div>

<div id="contextMenu" class="contextStyling" >
    <ul>
        <li> Item1 </li>
        <li> Item 2 </li>
        <li> Item Three </li>
        <li> Item Four </li>
        <li> Item Five </li>
        <li> Item Six </li>
    </ul>
</div>

CSS

.contextStyling {
	position:absolute;    
	display:none;
	background: white;
	font-weight:normal;
	font-size:14px;
	border: 1px solid #999999;
	z-index:999;
	border-radius:4px;
}
.contextStyling ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.contextStyling ul li{
	line-height:25px; 
    padding-left: 15px;
    padding-right: 15px;
}
 .contextStyling ul li a{
	text-align:underline;
	color: #313337;
}
.contextStyling li:hover{
    background-image: none;
    background-color: #e1e2e5;
    color: #313337;
    filter: none;   
}

JavaScript

$("#contextMenuDiv").click(function (e) {
    var posx = ((e.clientX)) + window.pageXOffset + 'px';
    var posy = ((e.clientY)) + window.pageYOffset + 'px';
    var options = {direction: "up"};
    $("#contextMenu").css("left", posx);
	$("#contextMenu").css("top", posy);
    //$("#contextMenu").show("slide",options,400);
    $("#contextMenu").slideDown(400);
    //$("#contextMenu").show("drop",options,400);
    
});

$("#contextMenu").on('click', function(){
	//$(this).hide('fold',500);	
    //$(this).hide('slide',{direction: "up"},400);
    $("#contextMenu").slideUp(400);
});