Jquery ve Css3 ile Resimli Accordion Menü

_bl@nk_ · 18 Ekim 2012

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

Çalışmayı Web sitesinde görmek 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 ; mouseu 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 <head> ile </head> içine aşağıdaki kodları ekliyoruz.

2. <Body> ile </body> 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.

<div id=content>
<ul class=accordion id=accordion>
<li class=bg1>
<div class=heading>Guler</div>
<div class=bgDescription></div>
<div class=description>
<h2>Guler</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
<a href=http://www.omerbozalan.com>Devamı</a>
</div>
</li>
<li class=bg2″>
<div class=heading>Phillips</div>
<div class=bgDescription></div>
<div class=description>
<h2>Phillips</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. </p>
<a href=http://www.omerbozalan.com>Devamı</a>
</div>
</li>
<li class=bg3″>
<div class=heading>Diamanti</div>
<div class=bgDescription></div>
<div class=description>
<h2>Diamanti</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
<a href=http://www.omerbozalan.com>Devamı</a>
</div>
</li>
<li class=bg4 bleft>
<div class=heading>Meiklejohn</div>
<div class=bgDescription></div>
<div class=description>
<h2>Meiklejohn</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.</p>
<a href=http://www.omerbozalan.com>Devamı</a>
</div>
</li>
</ul>
</div>

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. <body> ve </body> satırının en altına ise aşağıdaki scripti yerleştiriyoruz.

<! The JavaScript >
<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>
<script type=text/javascript>
$(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).slideDown(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(500);
$(.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

ointer;
-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.

punterf16 · 24 Şubat 2014

Użyj Twitter Bootstrap Accordion Zwiń demo tutaj http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Collapsible_Accordion.php

Jquery ve Css3 ile Resimli Accordion Menü

_bl@nk_

Öğrenci

punterf16

Öğrenci

Benzer konular

Son mesajlar

Forum istatistikleri

Sosyal ağlar