CSS ve jQuery ile Dönen Menü

Bu makalemizde 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.

Bir zamanlar tipografik animasyonlarda bol bol gördüğümüz ‘öğeleri çevirerek kadraja alma’ tekniği temel anlamıyla bu tasarımda da yer almakta. Gelişen web teknolojileri sayesinde de bu tasarımı web tarafında oluşturmak gayet basit.

Örneği görüntüleyerek başlayabilirsiniz.

Aşağıdaki örnek bağlantıyı açınca farenizin sağ tuşuna basmayı unutmayınız.

ÖRNEĞİ GÖRÜNTÜLE

Eğik içerik ve menü tasarımı nasıl yapılır?

Bu tasarımın temelini CSS3’ün transform öğesini oluşturmakta. Rotate ettiğimiz elemanları jQuery ile fonksiyonel hale getirmemiz yeterli olacaktır. Tabii bu işlemi yaparken odak merkezimizi de transform-origin ile belirtiyor olacağız.

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.

<div class="content">İçerik</div><div class="menubar">
<ul><li><a href="#">Home</a></li><li><a href="#">Content</a></li><li><a href="#">Data</a></li><li><a href="#">Contact</a></li></ul>
</div>

Ş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,.menubarmin-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 type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></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.oncontextmenu = function() return false;;

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

Bu kadar!

Yorumlarınız

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

CSS ve jQuery ile Dönen Menü