Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS ve jQuery ile Dönen Menü
#1
css-jquery-rotate-menu.gif


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.

PHP Kod:
<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.



PHP Kod:
*{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.



PHP Kod:
html {
 
 overflowhidden;
}
 
html,
body {
 
 positionabsolute;
 
 height100%;
 
 background-color:#e74c3c;
 
 width:100%;
 
 margin:0;
 
 transform-origintop left;
 
 font:300 16px sans-serif;



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


PHP Kod:
.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.


PHP Kod:
.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{
 
 displayblock;
 
 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.


PHP Kod:
.opacity{
 
 opacity:.3;
}
 
.
active{
 
 transformrotate(-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.



PHP Kod:
<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.



PHP Kod:
$(document).ready(function(){
 
 document.oncontextmenu = function() {return false;};
 
 
 $(document).mousedown(function(e){
 
   ife.button == ) {
 
     $('body').toggleClass('active');
 
     $('.content .wrapper').toggleClass('opacity');
 
     return false;
 
   }
 
   return true;
 
 });
}); 


Bu kadar :)
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping