jquery ve Css3 ile Resimli Accordion Menü

web sitenizde kullanabileceğiniz jquery ve css3 ile yapılmış bir çalışmayı sizinle paylaşacağım.


Çalışmayı Web sitesinde Görmek ve İndirmek için Tıklayın



jquery ve css3 kullanarak ,resimli acordion menüyü web sitenize eklemeyi anlatacağım. Bu uygulamayı web sitenizde istediğiniz yerde kullanabilirsiniz. Yazılımın şekli şöyle ; mouse’u resmin üzerinde getirdiğinizde açılıyor , açılan resmin içinde açıklaması sonrasında ise yönlendirilecek sayfaya geçişini yapabiliyorsunuz.Önemli bir noktadan bahsetmek istiyorum ; acordion tarzı menüleri kullanıyorken sayfanın genişliğine çok dikkat etmeniz gerekmektedir. Çünkü açılırken belli bir alana ihtiyaç duyarlar. O yüzden bu çalışmamız da kiacordion menünün sağ tarafa neden yerleştirildiğini anlamışsınızdır. Jquery ve Css3 ile yapıldığından eski browserlarda bu çalışmamız görüntülenmeyebilir.Şimdi çalışmamızı yapalım.1. Dreamweaver programında index. html dosyası oluşturuyoruz. Ve içerisine ile içine aşağıdaki kodları ekliyoruz.


2. ile arasına ise içerisinde resimlerin yer alacağı div leri oluşturuyoruz. Tabi bu divleri kendiniz oluşturabilirsiniz ama style.css dosyasındaki ( aşağıda konu hakkında bilgi verilmektedir.) düzenlemeleri de yapmanız gerekmektedir.

yukarıdaki kırmızı ile yazılmış yazı tek bir resme ait bölümdür. Çalışmamızda 5. resim ekleyeceksek o satırı (kırmızı ile yazılmış bölümü) en alt satıra kopyalamanız gerekmektedir. Dolayısıyla yeni bir resim eklemiş olursunuz, lakin kırmızı yazıyla yazdığımız yerde mavi yazıyla yazılmış bg1 class ı var orayı yeni eklenen satırda bg5 olarak değiştirip style.css dosyasına da eklememizi yaptıktan sonra artık resmimiz görüntülenecektir. Devamı yazısının olduğu yerdeki www.omerbozalan.com linkini değiştirerek kendi sitenizdeki yönlendirmek istediğiniz adresi yazıyorsunuz.3. ve satırının en altına ise aşağıdaki scripti yerleştiriyoruz.

<script></script>
<script>
$(function() {
$(‘#accordion > li’).hover(
function () {
var $this = $(this);
$this.stop().animate({‘width’:’480px’},500);
$(‘.heading’,$this).stop(true,true).fadeOut();
$(‘.bgDescription’,$this).stop(true,true).slideDow n(500);
$(‘.description’,$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({‘width’:’115px’},1000);
$(‘.heading’,$this).stop(true,true).fadeIn();
$(‘.description’,$this).stop(true,true).fadeOut(50 0);
$(‘.bgDescription’,$this).stop(true,true).slideUp( 700);
}
);
});
</script>
4. olarak style.css dosyası oluşturuyorsunuz ve aşağıdaki satırı içerisine kopyalıyorsunuz.
ul.accordion{
list-style:none;
position:absolute;
right:80px;
top:0px;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
line-height: 1.5em;
}
ul.accordion li{
float:right;
width:115px;
height:480px;
display:block;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
position:relative;
overflow:hidden;
cursor:pointer;
-moz-box-shadow:1px 3px 15px #555;
-webkit-box-shadow:1px 3px 15px #555;
box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
background-image:url(../images/4.jpg);
}
ul.accordion li.bleft{
border-left:2px solid #fff;
}
ul.accordion li .heading{
background-color:#fff;
padding:10px;
margin-top:60px;
opacity:0.9;
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:14px;
color:#444;
text-align:center;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description{
position:absolute;
width:480px;
height:175px;
bottom:0px;
left:0px;
display:none;
}
ul.accordion li .description h2{
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:45px;
color:#444;
text-align:left;
margin:0px 0px 15px 20px;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
line-height:14px;
margin:10px 22px;
font-family: “Trebuchet MS”, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
line-height: 1.6em;
}
ul.accordion li .description a{
position:absolute;
bottom:5px;
left:20px;
text-transform:uppercase;
font-style:normal;
font-size:11px;
text-decoration:none;
color:#888;
}
ul.accordion li .description a:hover{
color:#333;
text-decoration:underline;
}
ul.accordion li .bgDescription{
background:transparent url(../images/bgDescription.png) repeat-x top left;
height:340px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
display:none;
}
Yukarıdaki anlatımda yeni bir resim eklediğimizde index dosyasının hangi kısmın nasıl düzenleneceğini anlattım, tabi o işlemi yaptıktan sonra style.cssdosyasının içinde de değişikliklikler yapmanız gerektiğinden de bahsettik. Kısaca style dosyasınıda 5. resim eklediğimizde nasıl düzenleneceğini anlatalım.Yukarıdaki yeşil yazıyla yazılmış yazı bg4 class ının style.css dosyasındaki yerini gösteriyor. Biz 5. resim olarak bir resim ekleyeceğimiz için o satırı kopyalayıp bir alt satıra yapıştırıyoruz, sonra bg4 olan kısmı bg5 , image4 olan kısmını ise eklediğimiz resmin adını yazarak işlemi bitiriyoruz.Çalışmamızda bir arka plan kullanılmıştır. Eğer o arka planı değiştirmek istiyorsanız Style. css dosyasındaki şu satırı bulup kendi resminizle değiştiriyorsunuz.
background:transparent url(../images/bgDescription.png) repeat-x top left;
KOLAY GELSİN.