Home CSS3 / HTML5 jquery ve Css3 ile Resimli Accordion Menü
jquery ve Css3 ile Resimli Accordion Menü

jquery ve Css3 ile Resimli Accordion Menü

320
23

Bir arkadaşımızın isteği üzerine 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 ki acordion 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.

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(pattern.png) repeat top left;
}
a{
color:#444;
}
a:hover{
color:#999;
}
.title{
width:500px;
height:152px;
position:absolute;
top:0px;
left:0px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:0 auto;
}
.reference{
clear:both;
top:300px;
left:0px;
position:absolute;
text-align:right;
width:400px;
padding:20px;
background-color:#fff;
-moz-box-shadow:1px 3px 15px #ddd;
-webkit-box-shadow:1px 3px 15px #ddd;
box-shadow:1px 3px 15px #ddd;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}

</style>

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="https://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="https://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="https://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="https://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: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.css dosyası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.

 



 

(320)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(23)

  1. Selamun Aleykum Ömer kardesim,

    Allah razi olsun guzel bir paylasim olmus. Bende istifade edeyim dedim yalniz bir sorum olacak ben bu menuyu kendi sitemde dahil edince ayni seninki gibi sagda gozukuyor. Ben onu bir divin icinde acip ve o dive de ortala komutu verince malesef ise yaramiyor. Sanirim css dosyasinda degisiklik yapmam lazim ama bilemedim. Bir fikrin var mi?

    Sagolasin hakkini helal et
    Bu arada Kurban bayramini simdiden kutlarim sevdiklerinle gecirmeni temenni ederim
    selamlar

    1. mehmet şimdi sağda olmasının nedeni üzerine gelince sola doğru açılmasıdır. Tam ortaladığında kaymalara neden olur.çünkü resimler sola doğru açılıyor. O yüzden bunu ortalaman çok zor. Senin için bende denedim ama ortalanınca sola açıldığından diğer resim bir anlık aşağıya kayıyor. Ama şöyle bişey var; index sayfasındaki scriptteki sayılarıyla oynarsan açılmaları ayarlayabilirsin, ona göre düzenleyince istediğin gibi yapabileceğine inanıyorum.

  2. hocam bu resimler açılınca bir efekt geliyor alttan resmin üzerine beyaz bu benim resimlerimin görünürlüğünü bozuyor onu iptal etmek istemiyorum biraz daha aşağıda çıkmasını istiyorum yorumların için şimdiden teşekkürler.

    1. Uğur images klasörünün içindeki bgDescription.png resmini kaldırırsan bahsettiğin renk gidecektir. Yeni düzenlemek istiyorsan photoshopta düzenleyebilirsin. Kolay gelsin.

  3. 1 şey daha sormak istiyorum. beyazlığı aşağı aldım ama yazılar yukarıda kaldı. yazılarıda aşağıya beyazlığın üzerine almak istiyorum nasıl yapabiliriM?

  4. Hocam öncelikle emeginize Sağlık çok güzel bi çalışma olmuş Ama bi sorunum oldu çalışma adete yukarı mühürlenmiş birazcık aşağı taşımaya çalıştım ama olmadı genel dive margin-bottom uygulamaya çalıştım ama etkilenmedi yardımcı olurmusunuz ¿

    1. Hamza arkadaşım, style.css dosyasına girip aşağıdaki TOP:0px; dosyasını kullanarak ayarlayabilirsin. Margin’le ne alakası var anlamadım. Kolay gelsin.

      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;

  5. hocam bu çalışmayı sayfama eklemek istedim ama bi turlu beceremedim çalışma sayfada çalışıyor ama slider çalışmıyo bu çalışma sliderin üstüne geliyo aşağı taşıdım ama aynı ekliyemedim neden öyle olmuş olabilir hocam css le alakalı düşünüyom …!!! ( slider css ismi ile çalışma css isimleri aynı )

  6. Hocam mrba size bi sorum olucaktı bu çalışmanın boyutunu biraz küçültmek istiyorum nerden yapabilirim boyutu derken sola doğru açılıyo ya mesafeyi biraz küçültmek istiyorum nerden yapabilirim şimdiden tşkler …!!!

  7. Hocam merhaba. Kendim yeniden boyutlandırdım. Ama asıl yapmak istediğim, menünün üzerine geldiğimizde akardeon açıldığı zaman tıklama yapıp yeni sayfaya nasıl link verebiliriz? yani “devamı” kısmını kullanarak değil de, direk menü resmine nasıl link verebiliriz?

    1. fırat arkadaşım bu çalışma bahsettiğin şekilde ayarlanmamış. O yÜzden css kısmında komple değişikliğe gidilmesi gerekiyor, malesef. Her çalışmayı herkese göre uyduramıyoruz, anlayışınız için teşekkür ederim.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.