Sağ tık özelliştirme contextmenu event JS

Javascripte sağ tuş yaptığımızda açılan menuyu kendimize göre şekillendirmek yani menuleri kendimiz oluşturmak . contextmenu event

<html>

<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
$(function(){

$(document).bind('contextmenu', function(e){
e.preventDefault();
$('.menu').css({
top: e.pageY,
left: e.pageX
}).fadeIn(500, function(){
$(document).on('click', function(){
$('.menu').hide();
$(document).off('click');
});
});
});

});
</script>

<style type="text/css">
* { padding: 0; margin: 0; list-style: none; border: 0; text-decoration: none; font-family: Arial, sans-serif; }
.menu {
border: 1px solid #ddd;
width: 110px;
border-bottom-color: #aaa;
position: absolute;
background: #fff;
display: none;
}

.menu ul li a {

background: #f5f5f5;
display: block;
padding: 7px;
color: blue;
border-bottom: 1px solid #eee;
}

.menu ul li a:hover {
background: #FEF3A6;
color: orange;
}
</style>

</head>
<body>

<div class="menu">
<ul>
<li><a href="index.html">Reflesh</a></li>
<li><a href="#">2. menü</a></li>
<li><a href="#">3. menü</a></li>
<li><a href="#">4. menü</a></li>
<li><a href="#">5. menü</a></li>
</ul>
</div>

sağ tuşa tıklayıp test edin

</body>
</html>

Sağ tık özelliştirme contextmenu event JS

4/ 5

Oleh Adsız

Pada 06:55