3 Boyutlu Açılır Menü
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:
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.
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 > 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!
Çok faydalı bir paylaşım olmuş :)Eminim çok fazla uygulayan olacaktır. Teşekkürler.
YanıtlaSilPaylaşım için teşekkürler :) Arşivime aldım.
YanıtlaSilçok sağolun hocam. Gerçekten güzel gözüküyor. Bende kod arşivimin içine aldım
YanıtlaSilŞahane olmuş
YanıtlaSilçok tşk ederim bu menü gerçekten harika olmuş
YanıtlaSilyine harika bir yazı, en kısa zamanda uygulamaya çalışacağım. selamlar
YanıtlaSileklentiyi ekledim siteme bir kontrol edin nasıl olmuş sitenin tasarımına iyimi olmuş kötümü biraz renklerle oynadım
YanıtlaSilhocam güzel paylaşım olmuş
YanıtlaSilhttp://internetten-kazann.blogspot.com/
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@yahya şahin
YanıtlaSilBenim linklerimi kendi linklerinizle değiştirmelisiniz.
teşekkürler güzel bir eklenti.
YanıtlaSilSüper paylaşım hocam. Çok teşekkürler.
YanıtlaSilMerhabalar 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.
YanıtlaSilSite: http://myhile.blogspot.com
@meşal medeni
YanıtlaSilDinamik görnümleri kullanıyorsun. Dinamik görünümlere eklenti ekleyemiyoruz.
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ıtlaSilS Aleyküm. Blog Hocam Uygulama internet ekplorer de Çalışmıyor linkler sabit görüküyor
YanıtlaSilBuldum Bu kodlarıda eklerseniz internet ekplorer de Çalışr
YanıtlaSil}
.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;
}
Ornek http://www.nepisirsekde.com/
YanıtlaSilAbi 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
YanıtlaSilo aradaki boşlukları nasıl kaldırcam
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
YanıtlaSilhttp://i.imgur.com/o0rk85C.jpg
Ha bu arada bloggerin verdiği temayı kullanıyorum
YanıtlaSil@Furkan Özkan
YanıtlaSilVideoyu izlediysen paylaşmadan önce Blogger'ın basit temasında denemiştim bir problem yoktu.
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ıtlaSilTekrar denedim, yine sorun yoktu. Başka bir şablonda dene istersen.
YanıtlaSilHocam kodlar ters çalışıyor 1 sütunlu yeri en başta açılıyor
YanıtlaSilEvet, sorun var. Bir fırsatını bulduğumda kodları tekrar düzenleyeceğim.
YanıtlaSilBekliyoruz (:
YanıtlaSilÇOK İŞE YARADI TESEKKÜRLER
YanıtlaSilhocam çok sağolun mesala ben o 3d açılan penceredeki yazıları değiştirmek için napmalıyım
YanıtlaSilhocam çok sağolun mesala ben o 3d açılan penceredeki yazıları değiştirmek için napmalıyım
YanıtlaSilHocam merhabalar. Bu eklentiyi sitemizin mevcut menü bölümüne nasıl ekleyebiliriz ?
YanıtlaSilMerhaba 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