jQuery ile Farenin Sağ Tuşuyla Açılan Menü - Baskı Önizleme +- MyBB Depo Forum (https://mybbdepo.com) +-- Forum: Webmaster Deposu (https://mybbdepo.com/webmaster-deposu-forumu) +--- Forum: Web Tabanlı Kodlama Dilleri (https://mybbdepo.com/web-tabanli-kodlama-dilleri-forumu) +---- Forum: Jquery (https://mybbdepo.com/jquery-forumu) +---- Konu Başlığı: jQuery ile Farenin Sağ Tuşuyla Açılan Menü (/jquery-ile-farenin-sag-tusuyla-acilan-menu-konusu.html) |
jQuery ile Farenin Sağ Tuşuyla Açılan Menü - Retribution - 01-06-2015 Merhaba arkadaşlar, ben Semih Yıldırım. Bugün jQuery ile farenin sağ tuşuna basınça açılan menünün nasıl yapıldığını anlatıcam.
Hazırlayacağımız kod ilk başta jQuery’nin preventDefault tanımıyla klasik contextmenu taslağını kapatacak. Daha sonra da birlikte hazırlayacağımız ul yapısını görüntülenebilir hale getirecek. Özetle iskelet için HTML, makyaj için CSS ve fonksiyonelite için jQuery tanımlarına ihtiyaç duyacağız. HTML kodlarımız ile başlayalım.
HTML Kodları
Font Awesome iconlarını kullanmak için <head></head> taglarının içerisine aşağıdaki tanımlamayı yapın.
Kod: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> Şimdi sağ tuşla açılan menü örneğinin temelini klasik ul yapısına dayandıralım. Menüyü .contextMenu şeklinde isimlendiriyoruz. Kod: <ul class="contextMenu" hidden> CSS Kodları Örnekte Roboto isimli fontu kullanıyoruz. Eğer sizler de Roboto’yu kullanmak isterseniz aşağıdaki kodu CSS dosyanızın en üstüne ekleyin. PHP Kod: @import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext); Menünün iskelet yapısını stilize ederek başlayalım. PHP Kod: ul.contextMenu{ Tüm menüde gerçekleşecek renk geçişlerine efekt atayalım. PHP Kod: ul.contextMenu *{ Şimdi de menü itemlarımızı tanımlayalım. PHP Kod: ul.contextMenu li{ jQuery Kodları Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim. PHP Kod: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Şimdi sağ tuşla açılan orjinal menüyü kilitleyip kendi menümüzü tetikleyebiliriz. Kod: $(document).bind("contextmenu", function(event) { Cvp: jQuery ile Farenin Sağ Tuşuyla Açılan Menü - OyunKonsolu - 01-06-2015 Teşşekürler... Cvp: jQuery ile Farenin Sağ Tuşuyla Açılan Menü - ufufuk - 01-06-2015 Teşekkürler. |