jQuery ile Sağ Tık olayı

Sayfanızın içinde herhangi bir eleman üzerine sağ tıklandığında neler yapabileceğinizi görün :)

Merhabalar,

Sitenizin herhangi bir bölümünde ya da her yerinde kendi menünüzün olmasını istemiş miydiniz ? Hem kaynak kodlarına ulaşmayı biraz olsun engellemek hemde görsellik açısından çok hoş olur değil mi ?

jQuery ile bunu yapmak oldukça kolay araya CSS'de girdiğinde daha keyiflisi yoktur :) Hemen HTML kodlarımızı yazmaya başlayalım :)


<body>

    <ul class="contextmenu">

        <li><a href="#Element1">Element 1 ></a>

            <ul>

                <li><a href="#Element1Sub1">Element 1 Sub 1</a></li>

                <li><a href="#Element1Sub2">Element 1 Sub 2</a></li>

                <li><a href="#Element1Sub3">Element 1 Sub 3</a></li>

            </ul>

        </li>

        <li><a href="#Element2">Element 2 ></a>

            <ul>

                <li><a href="#Element1Sub1">Element 2 Sub 1</a></li>

                <li><a href="#Element1Sub2">Element 2 Sub 2</a></li>

                <li><a href="#Element1Sub3">Element 2 Sub 3</a></li>

                <li><a href="#Element1Sub3">Element 2 Sub 4</a></li>

            </ul>

        </li>

        <li><a href="#Element3">Element 3</a></li>

        <li><a href="#Element4">Element 4</a></li>

        <li><a href="#Element5">Element 5</a></li>

    </ul>

</body>



Menüyü açıklamama gerek yok sanıyorum :) CSS ile düzenlemelerimizide yapalım hemen :)

body { margin:0;padding:0;font: 9pt arial,helvetica,sans-serif;}

        .contextmenu,

        .contextmenu li ul {

            list-style:none;

            margin:0;

            padding:0;

            position: absolute;

            background: #eee;

            border: 1px solid #ccc;

            border-bottom: none;

            -webkit-border-radius: 5px;

            -moz-border-radius: 5px;

            border-radius: 5px;

            display: none;

            min-width: 200px;

            z-index: 999999999999999999;

        }

        .contextmenu li { position:relative; }

        .contextmenu li a, 

        .contextmenu li ul li a {

            display: block;

            color: #666;

            text-decoration:none;

            padding: 5px;

            border-bottom: 1px solid #ccc;

        }

        .contextmenu li a:hover {

            color: #333;

            background: #ddd;

            border-bottom: 1px solid #ccc;

        }

        .contextmenu li:hover ul {

            display: block;

            min-width: 200px;

        }



CSS bölümümüzüde tamamladığımıza göre artık eğlenebiliriz :)


<script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

        })

        $(document).bind("contextmenu",function(e){

            $(".contextmenu").css({

                top: e.pageY, // .pageY : Mouse'un tıklandığı Y koordinatı

                left: e.pageX, // .pageX : Mouse'un tıklandığı X koordinatı

                display: "block" // Menümüzü görünür hale getiriyoruz (isterseniz burada fadeIn, slideDown gibi olaylarda kullanabilirsiniz. Eğlenmek size kalmış :) )

            })

            return false; // Kullanılan browser'ın kendi menüsünü pasif duruma getiriyoruz. Yani false değeri döndürerek bu işlevi engelliyoruz.

        });

        $(document).click(function(){

            $(".contextmenu").hide(); // Dökümanın herhangi bir yerine tıklandığında menü kaybolsun.

        })

    </script>



Evet kodlar bu kadar. Eğlenmek size kalmış dediğim gibi :) Ben "document" kullandım ama siz isterseniz sadece bir div içerisine ya da herhangi bir yazının üstünde bu olayı kullanabilirsiniz. Birazcık kurcaladıktan sonra eminim çok eğleneceksiniz :) Menü yerine farklı öğelerde meydana getirebilirsiniz :)

Bu arada anlaşılmayan yerlerde yardımımı esirgemem kaynak dosyayı nereye yükleyeceğimi anlamadım ilk defa burada ders paylaşıyorum :) Sorularınıza cevap vermekten mutluluk duyarım..

Teşekkürler
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git