24 Temmuz 2013 Çarşamba

3 Boyutlu Açılır Menü

32 yorum

Blog şablonlarının ve tasarımlarının en önemli öğelerinden biri şüphesiz menüler. Bu sebeple farklı tarzlarda menüler paylaşmam için çok mesaj alıyorum. Bugüne kadar 3 değişik tarzda menü paylaşmıştım. Bunlar:

 

- Basit Link Menüsü

- Dropdown Menü

- CSS Mega Açılır Menü

 

Bu yazıda paylaşacağım 3 boyutlu açılır menün de işlev olarak mega açılır menüden farkı yok. Farkı açılırken 3 boyutlu bir efektle açılmasında.

 

3 Boyutlu Açılır Menü

 

Resimde gördüğünüz gibi bu menüye; 1 sütunlu, 2 sütunlu, 3 sütunlu açılır ve sabit öğeler ekleyebiliyorsunuz. Menünün nasıl çalıştığını ve 3 boyut efektini görmek isterseniz demo videoyu izleyebilirsiniz.

 

 

Gelelim menüyü blogunuza eklemeye. İlk olarak stil kodlarını ekleyelim. Bunun için Blogger kumanda paneline giriş yaptıktan sonra Şablon > HTML’yi Düzenle diyerek şablonun kodlarını açıyoruz ve Ctrl + F kuş kombinasyonuyla açılan arama kutusunun yardımıyla ]]></b:skin> kodunu buluyoruz. Bu kodun üzerinde bir yere aşağıdaki stil kodlarını ekliyoruz.

 

/* Blog Hocam 3D Açılır Menü */

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#F1921A;
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav &gt; li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
  .menuHolder ul.nav li:hover a.top-a {background:#679EC9; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#679EC9; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #679EC9; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#679EC9; margin:0; padding:4px 0 4px 15px; background:transparent ;}
.menuHolder ul.nav div ul li a:hover {color:#000; background:transparent ;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}

/* Blog Hocam 3D Açılır Menü */

 

Sırada menünün HTML kodlarını eklemek var. HTML kodlarını ekleyeceğiniz yer ile ilgili şu bilgiyi vermek istiyorum:

 

1. Blogger’ın kendi temalarından birini kullanıyorsaız HTML kodlarını  <div class='tabs-outer'> kodnun hemen üstüne ekleyin.

 

2. Özel bir Blogger teması kullanıyorsanız HTML kodlarını <div id='content-wrapper'>  kodunun hemen altına ekleyin.

 

<!--Blog Hocam 3D Açılır Menü-->
<div id='info'>
<div class='menuHolder'>
<ul class='nav'>
<li><a class='top-a' href='#url'><b>Ana Sayfa</b></a></li>
<li><a class='top-a' href='#url'><b>3 Sütunlu</b></a>
<div class='col3'>
<ul class='colLeft'>
<li><a href='http://bloghocam.blogspot.com/2012/06/acemiler-icin-google-analytics-rehberi.html'>Google Analytics</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/02/blogcular-icin-faydal-chrome-uzantlar.html'>Chrome Uzantıları</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/06/bloguuz-icin-ucretsiz-iletisim-formu.html'>İletişim Formu</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/04/en-iyi-ucretsiz-blog-acma-siteleri.html'>Blog Siteleri</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/04/feedburner-kurulumu-ve-ayarlar.html'>Feedburner</a></li>
</ul>
<ul class='col'>
<li><a href='http://bloghocam.blogspot.com/2012/01/google-alerts-ile-sizden-bahsedenleri.html'>Google Alerts</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/05/basarl-ve-populer-kisisel-bloglar.html'>Kişisel Bloglar</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/02/takip-etmeniz-gereken-resmi-google.html'>Google Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/05/turkiyenin-en-kaliteli-teknoloji-bloglar.html'>Teknoloji Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/bloglar-icin-ziyaretci-trafigi-rehberi.html'>Trafik Arttırma</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://bloghocam.blogspot.com/2013/04/turkiyenin-en-unlu-moda-bloglar-ve.html'>Moda Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/06/turkiyenin-en-iyi-gezi-bloglar.html'>Gezi Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/04/turkiyenin-en-iyi-yemek-bloglar-mercek.html'>Yemek Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/03/adm-adm-iyi-bir-blog-sitesi-kurmak.html'>Blog Kurmak</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/05/blogunuz-icin-anket-olusturma-rehberi.html'>Anket Oluşturma</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#url'><b>2 Sütunlu</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='http://bloghocam.blogspot.com/2012/07/fotoblog-olusturma-rehberi.html'>Fotoblog Oluşturma</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/03/nis-blogculuk-kavram.html'>Niş Blogculuk</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/02/arsiv-sayfam-nasl-olusturdum.html'>Arşiv Oluşturma</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/05/blogger-icin-youtube-eklentisi.html'>YouTube Eklentisi</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/12/flash-mp3-calar-eklentisi.html'>MP3 Çalar</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://bloghocam.blogspot.com/2012/06/slayt-manset-eklentisi.html'>Slayt Manşet</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/02/blogger-ile-blog-olusturma.html'>Blog Oluşturma</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/04/blogger-sablon-yukleme.html'>Tema Yükleme</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/blogger-tipleri.html'>Blogger Tipleri</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/11/analiz-icin-kullandgm-seo-araclar.html'>SEO Araçları</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#url'><b>1 Sütunlu</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='http://bloghocam.blogspot.com/2011/06/anchor-text-hakknda-hersey.html'>Anchor Text</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/05/blogger-icin-google-sitemap-olusturma.html'>Google Sitemap</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/google-author-rank-nedir.html'>Author Rank</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/05/off-page-seo-dogal-link-insaas.html'>Off Page SEO</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#url'><b>Sabit</b></a></li>

</ul>
</div>

</div>
<!--Blog Hocam 3D Açılır Menü-->

 

Örnek olması için kodlarda Blog Hocam’da ki bazı yazılara linkler verdim. Benzer şekilde menünün içeriğini değiştirebilirsiniz.

 

Kolay gelsin!

32 yorum:

  1. Çok faydalı bir paylaşım olmuş :)Eminim çok fazla uygulayan olacaktır. Teşekkürler.

    YanıtlaSil
  2. Paylaşım için teşekkürler :) Arşivime aldım.

    YanıtlaSil
  3. çok sağolun hocam. Gerçekten güzel gözüküyor. Bende kod arşivimin içine aldım

    YanıtlaSil
  4. çok tşk ederim bu menü gerçekten harika olmuş

    YanıtlaSil
  5. yine harika bir yazı, en kısa zamanda uygulamaya çalışacağım. selamlar

    YanıtlaSil
  6. eklentiyi ekledim siteme bir kontrol edin nasıl olmuş sitenin tasarımına iyimi olmuş kötümü biraz renklerle oynadım

    YanıtlaSil
  7. hocam güzel paylaşım olmuş
    http://internetten-kazann.blogspot.com/

    YanıtlaSil
  8. aylaşımda kendi linklerinizi paylaşmışsınız ya. ben yazı ekledikçe kendiliğinden oraya eklenir mi yoksa özel bir işlem yapmalı mıyım

    YanıtlaSil
  9. @yahya şahin
    Benim linklerimi kendi linklerinizle değiştirmelisiniz.

    YanıtlaSil
  10. teşekkürler güzel bir eklenti.

    YanıtlaSil
  11. Süper paylaşım hocam. Çok teşekkürler.

    YanıtlaSil
  12. Merhabalar Serdar ağabey. Bloggerin kendisine ait temalarından kullanıyorsanız, verdiğin kodu bulup üstüne yapıştırın demişsin. Ancak öyle bir kod temada bulamadım.

    Site: http://myhile.blogspot.com

    YanıtlaSil
  13. @meşal medeni
    Dinamik görnümleri kullanıyorsun. Dinamik görünümlere eklenti ekleyemiyoruz.

    YanıtlaSil
  14. Meşal medeni şunla karıştırıyor sanırım, kod aramakla alakalı kod ararken kodların yazılı olduğu yere birkere tıklayım orayı seçin ondan sonra ctrl + f yapın kod dizinine geçmesseniz sayfanın diğer tarafında arama bölümü açılıyor ve dolayısı ile kod bulamıyacağından hata veriyor zamanında bende aynı hataya düştüm siz düşmeyin.

    YanıtlaSil
  15. S Aleyküm. Blog Hocam Uygulama internet ekplorer de Çalışmıyor linkler sabit görüküyor

    YanıtlaSil
  16. Buldum Bu kodlarıda eklerseniz internet ekplorer de Çalışr

    }
    .menuHolder ul.nav div {
    position:absolute;
    top:-30000px;
    left:2px;
    opacity:0;
    padding:5px 0 0 0;
    }
    .menuHolder ul.nav div.left {
    left:auto;
    right:4px;
    }
    .menuHolder ul.nav li:hover div {
    top:40px;
    opacity: 1;
    }

    YanıtlaSil
  17. Ornek http://www.nepisirsekde.com/

    YanıtlaSil
  18. Abi senin sementit temanı kullanıyorum menüyü ekledim temanın eski menüsünü kaldırdım böyle duruyor abi http://sorunsuzoyunum.blogspot.com/#url
    o aradaki boşlukları nasıl kaldırcam

    YanıtlaSil
  19. Hocam kodlarda sorunmu var ben kolar üzerinde oynama yapmaksızın ekledim ancak 1. sütuna mouseyi getirdiğimde menü sol tarafta açılıyor şunun gibi
    http://i.imgur.com/o0rk85C.jpg

    YanıtlaSil
  20. Ha bu arada bloggerin verdiği temayı kullanıyorum

    YanıtlaSil
  21. @Furkan Özkan
    Videoyu izlediysen paylaşmadan önce Blogger'ın basit temasında denemiştim bir problem yoktu.

    YanıtlaSil
  22. Hocam bir çözümü yokmudur ki ? Sütunların hepsi soldan açılıyor 3 lü sütunda 2 li sütunda 1 li sütunda

    YanıtlaSil
  23. Tekrar denedim, yine sorun yoktu. Başka bir şablonda dene istersen.

    YanıtlaSil
  24. Hocam kodlar ters çalışıyor 1 sütunlu yeri en başta açılıyor

    YanıtlaSil
  25. Evet, sorun var. Bir fırsatını bulduğumda kodları tekrar düzenleyeceğim.

    YanıtlaSil
  26. ÇOK İŞE YARADI TESEKKÜRLER

    YanıtlaSil
  27. hocam çok sağolun mesala ben o 3d açılan penceredeki yazıları değiştirmek için napmalıyım

    YanıtlaSil
  28. hocam çok sağolun mesala ben o 3d açılan penceredeki yazıları değiştirmek için napmalıyım

    YanıtlaSil
  29. Hocam merhabalar. Bu eklentiyi sitemizin mevcut menü bölümüne nasıl ekleyebiliriz ?

    YanıtlaSil
  30. Merhaba Serdar bey...Bu gece youtube de de yazdım ,bu menü harika ama hep solda açılıyor lütfen yardım edin.Ben left ve right kodlarını sildim yerine hep right yazdım yine olmadı.:)))Çare lütfen

    YanıtlaSil

Picardes

LİNKLER