Web Sitenizde Sağ Tık Menüsü Oluşturun
Yavaş yavaş web siteler de görselliğin hat safhaya ulaştığını görmekteyiz.Üç boyutlu grafiksel raporlardan tutunda, değişik değişik animasyonlara kadar bu iş aldı başını gidiyor.(Tabi bu kasteddiğim olaylar Flash ve Silverlight gibi animasyon tabanlı yazılımlarla oluşturulmamış sitelerdir)Özellikle HTML 5’in animasyon mevzusu yok mu?Neyse, o konuya hiç girmeyelim.Bu yazımda sizlere sitenizde sağ tık menüsü yapmaktan bahsedeceğim.Öncelikle bu eklenti de büyük emeği olan Taner Tuncer kardeşime teşekkürlerimi sunuyorum.
Aslında anlayacağınız gibi, bu yazıda asıl amacım menü yapmak değil var olan eklenti üzerinde sitemize uygun şekilde çalışma yapıp, entegresini anlatmak.Eklentinin dosyalarını buradan indirebilirsiniz.
Öncelikle, sağ tıklama menüsünü kullanacağımız sayfaya Jquery Kütüphanesi(http://code.jquery.com/jquery-1.8.3.js),Jquery-UI Kütüphanesini(http://code.jquery.com/jquery-1.8.3.js), JavaScript dosyamızı(sagTikMenu1.0.js) ve CSS dosyamızı(sagTikMenu.css) kaynak olarak belirtiyoruz.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script type="text/javascript" src="sagTikMenu1.0.js"></script> <link rel="stylesheet" href="sagTikMenu.css" type="text/css"/>
Evet artık bu kaynakları belirttikten sonra menümüzün kodlarını yazabiliriz…tagları arasına JavaScript kodlarımızı yazalım.
<script type="text/javascript">
$(function(){
$("html,body").sagTikMenu({
liste : '<li><a href="#">Gençay</a></li><li><a href="#">Yıldız</a></li>'
});
});
</script>
Yukarıdaki kod bloğunda, ‘$(“html,body”)‘ etiketiyle bu fonksiyonun tüm<html><body>..</html></body>tagları arasında çalışacağını belirtiyoruz.
‘$(“html,body”).sagTikMenu‘ isimli fonksiyonumuzun içine “Liste:” anahtar sözcüğünün içine gördüğünüz gibi menü kodlarını yazıyoruz.
Sayfaya gelip sağ tıkladığımız zaman aşağıdaki gibi menümüz oluşmaktadır.
Eğer herhangi bir menüye kısayol açıklaması vermek istiyorsak aşağıdaki gibi düzenlememiz yeterlidir.
<script type="text/javascript">
$(function(){
$("html,body").sagTikMenu({
liste : '<li><a href="#">Gençay<span class="kisayol">ctrl + c</span></a></li><li><a href="#">Yıldız</a></li>'
});
});
</script>
Gördüğünüz gibi “<a href>..</a>” tagının içine bir “<span>..</span>” tagı açmamız yeterlidir.Dikkat etmemiz gereken nokta, span tagının class özelliği “kisayol” olmalıdır.
Kısayol açıklamamız aşağıdaki gibi gözükmektedir.
Eğer herhangi bir menümüze açılır menü özelliği katmak istiyorsak eğer aşağıdaki gibi yapılandırma yapmalıyız.
<script type="text/javascript">
$(function(){
$("html,body").sagTikMenu({
liste : '<li><a href="#">Gençay<span class="kisayol">ctrl + c</span></a></li><li><a href="#">Yıldız</a><ul><li><a href="#">Acilir Menu</a></li><li><a href="#">Acilir Menu2</a></li></ul></li>'
});
});
</script>
Gördüğünüz gibi,”<ul><li><a href>..</a></li></ul>” taglarını açtığımız zaman açılır menü özelliğini katmış oluyoruz.
Ekran görüntüsü aşağıdadır.
Eğer açılır menüyede kısayol açıklaması eklemek istiyorsak, bildiğimiz gibi span tagını ekleyebiliriz.
<script type="text/javascript">
$(function(){
$("html,body").sagTikMenu({
liste : '<li><a href="#">Gençay<span class="kisayol">ctrl + c</span></a></li><li><a href="#">Yıldız</a><ul><li><a href="#">Acilir Menu</a></li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g</span></a></li></ul></li>'
});
});
</script>
Ekran görüntüsü aşağıdadır.
Eğer menüyü açmak istemiyorsanız aşağıdaki gibi yapılandırma yapmamız gerekiyor.
<script type="text/javascript">
$(function(){
$("html,body").sagTikMenu({
liste : '<li><a href="#">Gençay<span class="kisayol">ctrl + c</span></a></li><li><a href="#">Yıldız</a><ul><li><a href="#">Acilir Menu</a></li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g</span></a></li></ul></li>',
menu : 'kapali'
});
});
</script>
Eğer bu şekilde denerseniz sayfada sağ tıkladığınız zaman hiç bir menü açılmayacaktır.(Browser’ın manuel menüsüde dahil.)
Menünün en can alıcı noktalarından biriside, açılış anındaki efektini ayarlayabiliyoruz.Bu efektleri “http://jqueryui.com/show/” sayfasındaki efekt isimlerinden herhangi birini seçerek yapabiliyoruz.Bu linkte efektlerin nasıl çalıştığını deneyerek görebilirsiniz.Örnek olarak “Bounce” tipindeki efekti kullanalım.Kodu aşağıdaki gibi yapılandırmalısınız.
<script type="text/javascript">
$(function(){
$("html,body").sagTikMenu({
liste : '<li><a href="#">Gençay<span class="kisayol">ctrl + c</span></a></li><li><a href="#">Yıldız</a><ul><li><a href="#">Acilir Menu</a></li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g</span></a></li></ul></li>',
efektTip:'bounce'
});
});
</script>
Aynı şekilde seçtiğimiz efektin hareket hızını ayarlayabiliyoruz.
<script type="text/javascript">
$(function(){
$("html,body").sagTikMenu({
liste : '<li><a href="#">Gençay<span class="kisayol">ctrl + c</span></a></li><li><a href="#">Yıldız</a><ul><li><a href="#">Acilir Menu</a></li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g</span></a></li></ul></li>',
efektTip:'bounce',
efektHiz: 3500
});
});
</script>
Eklentimizin son özelliği ise, sayfamızdaki herhangi belirttiğimiz bir alanda sağ tıklama durumunda nasıl menü oluşturacağını seçebiliyoruz.
Örnek olarak ben bir div içinde menümüzün farklı bir şekilde çalışmasını istiyorsam kodlarımızı aşağıdaki gibi yapılandırmamız lazım.
<style type="text/css">
body {margin: 0; padding: 0;}
#a {border: 1px solid #ddd; margin: 20px; background-color:#9C6 ; width: 400px; height: 300px;}
</style>
<div id="a"></div>
//Divimiz bu olsun
<script type="text/javascript">
$(function(){
$("html,body").sagTikMenu({
liste : '<li><a href="#">Gençay<span class="kisayol">ctrl + c</span></a></li><li><a href="#">Yıldız</a><ul><li><a href="#">Acilir Menu</a></li><li><a href="#">Acilir Menu2<span class="kisayol">ctrl + g</span></a></li></ul></li>',
efektTip:'bounce',
efektHiz: 3500
});
$("#a").sagTikMenu({
liste: '<li><a href="#">Kopyala</a></li>'
});
});
</script>
Sonuç olarak ekran çıktısı aşağıdaki gibi olacaktır.
 |
 |
Bir kaç noktaya daha değinmek istiyorum.
Eklentimizin güzel özelliklerinden biriside, sayfanın en sağında sağ tıklanırsa, açılır menüler sol tarafta açılmaktadır.Menüyü açık bıraktıktan sonra herhangi bir sekme ya da ekran açıldığı zaman menü otomatik olarak kendiliğinden kapanmaktadır.Ayrıca bu eklentinin CSS dosyası üzerinde oynayarak menü renklerini zevkinize göre değiştirebilirsiniz.
Tekrardan Taner Tuncer arkadaşımıza böyle güzel bir eklenti paylaştığı için teşekkürlerimi sunarım.
Faydalanmanız dileğiyle…
İyi çalışmalar..
merhaba peki fare ile sağ tık yaptıklarında sayfayı yenilemesini nasıl sağlarız? rica etsem kodu paylaşabilir misiniz?
siz nasıl yaptınız bende olmadı
Güzel soru. Cevabı makalede.