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.

ÖNİZLEME

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/AVvXsEhWxZOC-xn9rlddJe6u9GtTzp88N_PgP9qEe9P5B_PxMqQ3j0ZVk0SVCrswJka9A1tvryQAELklZfQmQNfZJfkKvydMEiiHVP6eeolrrsQ_0Sc94YR15Te4N31Kzs9k5KjK70Ks1QnqF-Q/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/AVvXsEj7RWA_bdjXT-csuyqssMCI7SWRc6jhAwOsaeR1e0V8-rrm-Mld18CSPrXmmdjHUgjLqa7H_M1ivfvmyaEhMR1ryMw60xBFdgiCsU5ZcTdfDol0O10n___hge265dUY8-RUQByu4n1ZyMw/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/AVvXsEgkUYOboK_GprcDqnWE5q07ePUx0aTI5CHeC9AZmrwj4_sVOLLI7KiSIVo-AQwGetTg2dh-w_nh6ayG_deZlJy2kZgSU0zEd09lDD-ssnkUd2gKKWppQxTEfqJLL8i1pViGceLsZOBny34/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/AVvXsEgi3eKjyILJlvBC1j7OmkRWPpB61twZo2edZrDnrYyMwGUn5ZHzWG9Z3t5hYwXfjY_S-E0jcM8R48xuUmKt3O8h-LgREmrkSkY8AtA-Zz36ntXUXuzDDYq8CPbWFWnorAogKLVsLhtdF4A/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/AVvXsEg3vkfZCfRJzRKUNAvYwxUuFGwI20U8iu5FJ_cklcobfFBXl3EaR762rIbJ_86Ik9WytvbhvUd_tPu2iQOHwELKqbRhVjFf5wHzUVFm1kSGK2sMs4hEOXAexWEKb2C36CKhS6ZJFRc5q4Q/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/AVvXsEiMBEpRYVqvlWoHUcvLqDanTIVuGyzFu_BWmIIgqBZwXP_v-k5fNkXw0em_qp7nbpu4lHlTAZ5hJ6bHm53VaB1kzyrtBjinMbIMSknjcIlkxdMVWAfNY-Mk1dsH2Ir2Xe4akt_-OSJUqo8/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/AVvXsEhiJ25VApWZXti3jLbnUfck4yGOv2bXhjgdSFGXs4ls2J6Z6tDMAnWP7pOh62SceIXeHjH910nuCstb7Egp_vNfY4RQtoY7fH2t29BMOVbBiU-pc4MW1aLADFr39DTGZUhOxN3bYi5O4wk/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/AVvXsEgMtKm79XlJlfWeldE979Rma9w7GnntbfT7FXuu5vG3EqCtkGd0EsHSF6E1WLutC8nx1NZDe9rKD2fAZ9TRTF8IsDGjrM0DTqt4ecsfoaRyOCugTZO8PngKws2rFiOjhVSNJDvaXMbYXM8/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/AVvXsEiU5AAeu29UZu5wNMRN-5ppUSuytYer1bb8CHatlKCfA-RRXwFt1TyTpMwzPhuO4RWLRuMuFGVMHY0ln5JgYQHsUll0NslqeFTYJ_c1__yjCTeeV2uRCWOMidSdXvhc_gfDi2iqZnGvvDw/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/AVvXsEhH-SO9MUuM1KE98FClkW4kzf1fcRPXNCDskcj5LVLfUAZvVOqOnxOdXBXYjX-tQLmEDrKCf6CIgOyknMa91_QK9Ekg5oK9iSeZD_VpUUvY-dtDhGQmq9nJ95vGzJmnsP77DYyPb1qaiAQ/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="https://www.meftunmede.com" class="gradient">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwxvO03Wt0i6bfI00GLbxRUX9DVYl2EvX6WC1X3EogZ7jo_NOJZFSgENHbs4EssGr4pIvdHKYfdVEJkimVjzeM5e4L8vz1xQMQbyx4NaIkb1EXLQXZEEXi_RTkJeV6TapDOjdLrfOgvIo/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...

    3 Yorumlar

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    1. hocam ben blogum açıldığında demodaki gibi olsun istiyorum, yani ana sayfam o şekilde olsun ancak bunun için 2.adımdaki kodları nereye ekliycemi bilemedim. acil cevap bekliyorum kolay gelsin.

      YanıtlaSil
    2. Blogunuzu göremiyorum Google+ profilinizde. O yüzden sağlıklı bir cevap veremiyorum. Lütfen blogunuzu yada websitenizi yazın. Ona göre cevap veririm. Ama genelde eski menünüzün yerine bu menüyü istiyorsanız; O menünün baslayıp bittiği yere kadar olan bölümü silip, ikinci adımdaki kodları oraya ekliyorsunuz. (gerekli değisikligi yaptıktan sonra).

      YanıtlaSil
    3. hocam iletişim formundan yazmıştım farklı bir konu için, oraya bi bakarsanız cevap bekliyorum sizden. ayrıca kod deneyip siliyorum açtığım blogları, bloggerda uzmanlaşmaya çalışıyorum o yüzden sabit olarak bir blog kullanmıyorum. ancak yeni açılmış bir basit şablonda blog düşünün bahsettiğiniz menü başlangıç ve bitiş kodlarını nasıl bulabilirim.

      YanıtlaSil

    Yorum Gönder

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    Önceki Makale Sonraki Makale