Windows 8 Metro Stil Navigasyon Menü

Eğer web sitenizin navigasyon menüsünden sıkıldıysanız? Windows 8 Metro Stili Menüyü kullanabilirsiniz. Şık ve zarif tasarımıyla dikkat çeken bu Menü Windows 8 navigasyon arayüzünden esinlenilmiştir. Herkesin Microsoft Windows 8 veya Windows akıllı telefonları yeni serisinin arayüz deneyimi varsa, o zaman bu METRO arayüzü menü onlar için yeni bir şey değil. Animasyonlu butonları, arka plan resimlerini kendiniz ayarlayabildiğiniz kullanıcı dostu güzel bir eklenti.

Menü Önizlemesi

1. Adım: CSS Style kodlarını Ekleme :

• Blogger panelinize giriş yapın Şablon → HTML'yi Düzenle
• Ctrl+F yardımı ile ]]></b:skin>  kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
• Şablonu Kaydet diyip çıkın.

.MEFmetromenu{width:960px;margin:10px auto;font-family:'Oswald',Arial,sans-serif;}
@media screen and max-width:960px {
.MEFmetromenu{position:relative;width:100%;}
}
.karo-mf{text-align:center;cursor:pointer;width:90px;height:90px;}
.karo-mf a{display:block;padding-top:12px;text-decoration:none;}
.karo-mf img{padding-bottom:5px;height:48px;width:48px;position:relative;display:block;margin:0 auto;}
.karo-mf span{font-size:15px;padding-bottom:4px;display:block;}
.karo-mf-large{width:190px;height:90px;text-align:center;cursor:pointer;}
.karo-mf-large a{display:block;padding:21px;text-decoration:none;}
.karo-mf-large img{vertical-align:middle;position:relative;width:48px;height:48px;margin:0 auto;}
.karo-mf-large span{font-size:15px;vertical-align:middle;display:inline;}
.karo-mf-extralarge{text-align:center;cursor:pointer;width:190px;height:190px;}
.karo-mf-extralarge a{display:block;padding-top:52px;text-decoration:none;}
.karo-mf-extralarge img{padding-bottom:22px;height:80px;width:80px;position:relative;display:block;margin:0 auto;}
.karo-mf-extralarge span{font-size:15px;padding-bottom:14px;display:block;}
.karo-mf,.karo-mf-large,.karo-mf-extralarge{-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}
.karo-mf:hover,.karo-mf-large:hover,.karo-mf-extralarge:hover{-webkit-transform: scale(0.92,0.92);-moz-transform: scale(0.92,0.92);-o-transform: scale(0.92,0.92);-ms-transform: scale(0.92,0.92);transform: scale(0.92,0.92);}
.shadow-beyaz:hover{box-shadow:0 0 6px 3px #fff;-webkit-box-shadow:0 0 6px 3px #fff;-moz-box-shadow:0 0 6px 3px #fff;-o-box-shadow:0 0 6px 3px #fff;-ms-box-shadow:0 0 6px 3px #fff;}
.shadow-mavi:hover{box-shadow:0 0 6px 3px #38D1F7;-webkit-box-shadow:0 0 6px 3px #38D1F7;-moz-box-shadow:0 0 6px 3px #38D1F7;-o-box-shadow:0 0 6px 3px #38D1F7;-ms-box-shadow:0 0 6px 3px #38D1F7;}
.shadow-yesil:hover{box-shadow:0 0 6px 3px #AACA37;-webkit-box-shadow:0 0 6px 3px #AACA37;-moz-box-shadow:0 0 6px 3px #AACA37;-o-box-shadow:0 0 6px 3px #AACA37;-ms-box-shadow:0 0 6px 3px #AACA37;}
.shadow-kirmizi:hover{box-shadow:0 0 6px 3px #E81750;-webkit-box-shadow:0 0 6px 3px #E81750;-moz-box-shadow:0 0 6px 3px #E81750;-o-box-shadow:0 0 6px 3px #E81750;-ms-box-shadow:0 0 6px 3px #E81750;}
.shadow-siyah:hover{box-shadow:0 0 6px 3px #444;-webkit-box-shadow:0 0 6px 3px #444;-moz-box-shadow:0 0 6px 3px #444;-o-box-shadow:0 0 6px 3px #444;-ms-box-shadow:0 0 6px 3px #444;}
.renk-mavi{background:#00BBE2;}
.renk-mavi-2{background:#2C84EE;}
.renk-koyumavi{background:#044E94;}
.renk-meneksekirmizi{background:#781766;}
.renk-kirmizi{background:#E51400;}
.renk-kirmizi-2{background:#E81750;}
.renk-pembe{background:#FF539B;}
.renk-mor{background:#D02090;}
.renk-turuncu{background:#FB8F02;}
.renk-turuncu-2{background:#F60;}
.renk-turuncu-3{background:#DD5F37;}
.renk-mercankirmizisi{background:#CD5B45;}
.renk-yesil{background:#67B239;}
.renk-yesil-2{background:#96BF01;}
.renk-koyuyesil{background:#016C38;}
.renk-zeytinyesili{background:#990;}
.renk-cimenyesili{background:#CDCD00;}
.renk-koyukirmizi{background:#5F0000;}
.renk-gold{background:#FEE9AE;}
.renk-sari{background:#F7D100;}
.renk-siyah{background:#000;}
.renk-dumanrengi{background:#F5F5F5;}
.sola-daya{float:left;}
.saga-daya{float:right;}
.beyaz-text{color:#fff;}
.siyah-text{color:#1e1e1e;}
.gradient{background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3)));background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);}
.ara-bosluk{margin:5px;}

2. Adım: METRO Menüyü Ekleme:

Şimdi tümüyle bu menüyü yerleştirmek isteyen kişiye bağlıdır. Sadece ana başlığı altında eski menünüzün yerinde olacak şekilde eklenmesi ideal bir yer. Ama Menüyü sitenizde görmek istediğiniz her yere aşağıdaki kodlamayı kopyalayıp yapıştırabilirsiniz. İsterseniniz alttaki footer bölümüne ekleyebilirsiniz. İsterseniz normal menü, isterseniz sosyal medya menüsü olarak kullanabilirsiniz.

<div class="MEFmetromenu">
<div class="karo-mf-extralarge renk-meneksekirmizi shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuFXBtW_43gXFa7-Kz_WZ72BVKhBJkFW8L-DnaQf7uC0rhSEndxb_Cl0G6sY3ccjii8GwP_9JBPxLeCgdZSnwwJvafyV4S2q9j1CZPrW4UKYirG2DYkn25jUEPNITvGLRSbfAg7Sq6DI/s1600/home.png" border="0" alt="home" />
<span class="beyaz-text">Ana Sayfa</span>
</a>
</div>
<div class="karo-mf-large renk-mercankirmizisi shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Z72DSLgyNWU65yP2JaLO4KAHw1NLv5CCme-R5cdrEYjK4N3WkXmhzBdn-SfsJZNazZ3nzoqPrrmPRAQKv9wmC6hSSCxGxbaWERKyCVKIRQqtHW5dq8LclT-9aHQQWcizWGRoQpahI-w/s1600/messanger.png" border="0" alt="messanger" />
<span class="beyaz-text">Hakkımızda</span>
</a>
</div>
<div class="karo-mf renk-mor shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMnXfntCDuf6IaGwqb6ORKFQSQu1ZfgTJKC9GORixVi8ra95V4XKpkvug9MnStZohDRBS6Ch93odW32L4rAD7lXzHYzANvQBlj1QjW5dJtRjPVtFp1gbhtb_JOC5OaYAnQEZZyoicKtx0/s1600/rss.png" border="0" alt="rss" />
<span class="beyaz-text">RSS Feeds</span>
</a>
</div>
<div class="karo-mf-large renk-turuncu shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxw0hSCtTwfWJim-WJZUiFqhVV2i8L_Dl3gkyoTQqyLj1CG_IIKjqvLJaCyeG-AORH3bQN8mU9sX7p9Et0sZ2ygHtMZMkbIqN2JwAA4kJ9ieyWAu0tVROQpEbhXQGmX7RJGwKImxvtYIA/s1600/search.png" border="0" alt="search" />
<span class="beyaz-text">Arama</span>
</a>
</div>
<div class="karo-mf renk-koyukirmizi shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl9WxqBq5aRtiS-OgqN9HK9C8g13_QmSVj-dI5H17dUSlzoeJknc7DNHEfMCe2PVgKRhQwmYb7tb7Ujc9X9owQO-uOrfO-7SsReRxjrKTI4CcO-gSZBSB36qrz4pTfLRQIrxCCMpVoZo/s1600/mail.png" border="0" alt="mail" />
<span class="beyaz-text">İletişim</span>
</a>
</div>
<div class="karo-mf renk-siyah shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1WXXGyiunZk39tW_vjNrGfoNQsN6b-Odla1Xt3C0FD18XQoTm0_lgRRw-Zp1bMhkbgAR8klpUI11RF2u1nMZ-HUz0OMtFIfk85fuX_VZg8601CE2K7xUzs1YEcJiKQ-RVS7gaHP4dwc/s1600/help.png" border="0" alt="help" />
<span class="beyaz-text">Yardım</span>
</a>
</div>
<div class="karo-mf renk-kirmizi shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3MiFQNiPf6XgrQvaUEjf2wLDBUsa5kocKfteRECzo_aj2rC9gAaYqauO7GLhhcycfI3KL8AaEOMcDEybNkgxDNe3aHCMsGgxtpbtkG1cNJELNvY6Vf9qMW6HwWRu4pt1FuksMJTbFrYI/s1600/youtbe.png" border="0" alt="YouTube" />
<span class="beyaz-text">YouTube</span>
</a>
</div>
<div class="karo-mf renk-koyumavi shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPk-JAyuQODLa2S0H7ak5R53W6gj7nQb2j5HcGdDqarNZWX0gghxFDxt7oNm6BkM0pVMhM_YB3mjEv2-Vtc1WGE9Nx8lpeskyMx4i0D4X7I9cDrIJBCXiGRO0t18qlmY8B78acHvi2fwM/s1600/face.png" border="0" alt="Facebook" />
<span class="beyaz-text">Facebook</span>
</a>
</div>
<div class="karo-mf-large renk-mavi shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvKowkRuysmv-Zr0qNcoVQ-eNSh9vUVWyTP1C_uOAww35L5DJj0iqtHaVyhkmyC9S-epXycvRtjnbw3-tFXEOc8jm-vxscvkP5UXFUSOIjza9wnQ0z3sNVKrEofLpWB5e1tT0cZOOIoM/s1600/photo.png" border="0" alt="photo" />
<span class="beyaz-text">Fotoğraflar</span>
</a>
</div>
<div class="karo-mf renk-zeytinyesili shadow-yesil ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjS1DScxfreGGsTRdHHx1ZzumShlgg0N23Pwuf3uYIN-nRzDxJ8ITXHh4vYKkKvwxU2om07TzbWJS67S5QkPIgt_MUXfwYFi7ua7R0Y21WIUtTsYhUrno0dbpo_UbQtN63O5Q3e2qe2Ko/s1600/music.png" border="0" alt="music" />
<span class="beyaz-text">Müzik</span>
</a>
</div>
<div class="karo-mf-large renk-mavi-2 shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
<a href="http://MeftunMede.Blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjnC7Yn4agJNtujlM7_ETk9gZNTBv9S1tC1ovCcVxaGGrC36yAyO2HfCgUz2RDQuabJFIBgNmOvb-NlVg31QzAyy9L7y7gKLFTvZr6AQpvjztZzo5lXGSd2I5t1DC985hzZEGJxkgyWfc/s1600/MEF.png" border="0" alt="Meftun" />
<span class="beyaz-text">Meftun MEDE</span>
</a>
</div>
</div>

3. Adım: Özelleştirme:

1. Adımdaki eklediğimiz stil kodlarındaki renk bölümünden menünüzün buton rengini, gölge rengini ayarlayabilirsiniz. Hepsi anlaşılır ve Türkçe yazılmıştır.
Örneğin 2. adımdaki kodlardan Ana Sayfa butonu "renk-meneksekirmizi", buton gölgesi "shadow-siyah", buton boyutu ekstra büyük "karo-mf-extralarge"; Bunu değiştirmek için "renk-cimenyesili", buton gölgesi "shadow-pembe", buton boyutu büyük "karo-mf-large" yada kücük "karo-mf" olarak değiştirebilirsiniz. Bu bölümleri kırmızı renkle işaretledim.

Mavi rekle işaretlediğim ( # ) yerlere butona basıldığında açılacak sayfa HTML'nizi yazın.
Örnek: <a href="http://örnek.com/örnek.html" class="gradient">

Buton arka plan resimlerinizide hemen altındaki 2. adımdaki <img src="Buraya..." border="0" alt="help" /> ekleyebilirsiniz

Son olarak <span class="beyaz-text">Arama</span> beyaz-text, siyah text olmak üzere rengini ve sayfa link ismini yazın.

<div class="buton boyutu buton-rengi gölge-rengi ara-bosluk sola-daya MEFMetroMenu">
<a href="Link url'nizi buraya" class="gradient">
<img src="Resim url'niz" border="0" alt="home" />
<span class="beyaz-text">Sayfa adı</span>
</a>

Biraz karışık gibi görünüyo ama öyle değil. Gerçekten basit ve güzel bi menü. Windows 8 görünüm metro stil Navigasyon menüsü web sitenize entegre edilmiştir.
Not olarak: Bu menü HTML ya da CSS yani WordPress, Joomla ve destekleyen herhangi Platformu kullanılabilir. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...