Home CSS3 / HTML5 jquery ve Css3 ile Resimli Accordion Menü
jquery ve Css3 ile Resimli Accordion Menü
CSS3 / HTML5
JQuery
Web Tasarım
23

jquery ve Css3 ile Resimli Accordion Menü

320
23
resimli-acordion-menu
now viewing

jquery ve Css3 ile Resimli Accordion Menü

now playing

Antalya'da Hem Yazın Hem de Kışın Gidebileceğin Rotalar

now playing

Zoom Simultane Çeviri ile Online Toplantılar

now playing

SosyalDigital Twitter Takipçi Satın Al Hizmetiyle Etkileşiminizi Artırın

now playing

Beyaz Eşya: Ev İhtiyaçlarınızı Modern Teknolojiyle Buluşturan Çözümler

now playing

Temel Kırtasiye Malzemeleri

now playing

Instagram’da Ücretsiz Takipçi Artırma Yolları Nelerdir?

now playing

Dopinger Google ADS Danışmanlığı ile Hedef Kitlenize Bir Adım Daha Yaklaşın!

now playing

En İyi TikTok Beğeni Satın Alabileceğiniz 5 Site

now playing

Asics Markasının Kadın ve Erkekler İçin Geniş Ürün Yelpazesi

now playing

Ücretsiz Instagram Takipçi Nedir? Bedava Instagram Takipçi Nasıl Arttırılır?

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)

tags:
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.
Related Posts

İnternet Sayfanı Gazete Gibi Yap

omerbozalan 14

Photoshop ile Web Şablonu Oluşturma

omerbozalan 2

Css3 ile Responsive Tasarım Nasıl Yapılır?

omerbozalan 18

Fluid Grid | Mobil Uyumlu Flash Galeri Örneği

omerbozalan 10

Sadece Not Defteri İle Web Site Yapımı – 2

omerbozalan 4

Css | Xml Editleyerek Albüm Yapımı (Videolu)

omerbozalan 20

Web Siteni, Google Drive ile İnternet Ortamında Ücretsiz Yayınla

omerbozalan 5

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

    Yanıtla

    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.

      Yanıtla

  3. 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.

    Yanıtla

    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.

      Yanıtla

  4. 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?

    Yanıtla

  6. 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 ¿

    Yanıtla

    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;

      Yanıtla

  8. 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ı )

    Yanıtla

  9. 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 …!!!

    Yanıtla

  10. 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?

    Yanıtla

    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.

      Yanıtla

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.

Close

Share this video