CSS ve jQuery ile Dönen Menü

css-jquery-rotate-menuBu 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.

Ö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,.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 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!

Bu da ilginizi çekebilir  HTML5 ve CSS3 ile Flat Giriş Ekranı

Yorumlarınız

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