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.
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!
Yorumlar
Yorum Gönder