[CENTER]
Sağ Tık İle Dönen Menü

Bu yazımda CSS ve jQuery desteğiyle farenin sağ tuşuna basıldığında açılan bir menü tasarımı yapacağız. Bu menüyü diğerlerinden ayıran özelliği de ekrana eğik olarak gelmesi.



HTML Kodları

Tüm HTML kodlarımız aşağıdaki şekilde. Kodlar arasında boşluk bırakmamamızın sebebi bazı tarayıcılarda sorun yaşatabilen boşluk bug’ıdır.

İçerik

Şimdi bu kodları stilize edelim.


CSS Kodları

Kod içerisindeki tüm yapılara geçiş efekti vermek için transition tanımımızı ekleyelim.

*{transition:all .5s}

Şimdi html ve body elemanlarımıza ilgili tanımları yapalım. Her iki öğeyede absolute pozisyonlama ile ihtiyaç duyacağız. Ayrıca çevireceğimiz yapılar yine bunlar olacağı için transform-origin‘leri sol üst olmalı. Böylece sol üst odaklı çeviri işlemi yapıp istediğimiz tasarımı oluşturacağız. Html’e verdiğimiz hidden overflow tanımı sayesinde de gereksiz taşmalar ve kaydırma çubuklarının önüne geçeceğiz.

html {
overflow: hidden;
}

html,
body {
position: absolute;
height: 100%;
background-color:#e74c3c;
width:100%;
margin:0;
transform-origin: top left;
font:300 16px sans-serif;
}


İçerik alanımıza da kaydırma çubuğu ekleyelim.

.content,.menubar{min-height:100%;}

.content{
position:absolute;
height:100%;
width:98%;
padding:1%;
background-color:white;
overflow-y:scroll;
border-radius:0 0 0 50px;
}


Şimdi de sonradan açılacak menubar tasarımımızı yapalım.

.menubar{
position:fixed;
width:100%;
left:-100%;
color:white;
text-align:right;
}

.menubar ul{
font:300 20px sans-serif;
position:absolute;
bottom:0;right:0;
list-style:none;
}

.menubar ul li a{
display: block;
border:2px solid white;
padding:7px 14px;
margin:20px 15px;
text-align:left;
color:white;
text-decoration:none;
}

.menubar ul li a:hover{
background-color:rgba(1,1,1,.2)
}


Şimdi de menünün açılması halinde etkinleşecek öğeleri tanımlayalım. Bunları daha sonra jQuery ile besleyeceğiz.

.opacity{
opacity:.3;
}

.active{
transform: rotate(-20deg);
}



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.

<script></script>


jQuery tarafında yapmamız gereken tek işlem farenin sağ tuşunu takip etmek. Tuş tıklandığında öğelerimize active ve opacity gibi classları toggle etmemiz gerekiyor.

$(document).ready(function(){
document.function() {return false;};

$(document).mousedown(function(e){
if( e.button == 2 ) {
$('body').toggleClass('active');
$('.content .wrapper').toggleClass('opacity');
return false;
}
return true;
});
});


Bu kadar![/CENTER]


>Yorumlarınız
Bu tasarım hakkındaki yorumlarınızı bekliyoruz.