Blog İpuçları

Üzerine Gelince Rengi Değişen Menü

Üzerine gelince renk değiştiren güzel bir menü eklentisi Blogger siteleriniz de kullanabileceğiniz alternatif  bir menü arkadaşlar , menü  resimde de gördüğünüz gibi , menü üzerine geldiğiniz zaman rengi değişiyor olması siteniz açısından güzel bir görünüm imkanı sunacak size eğer tasarıma önem veriyorsanız kullanmanızı tavsiye ederim , sitenize uygulaması çok kolay olsa da kodlardan anlamayan arkadaşlar için anlatacağım eğer yapamayanlar olursa yorum bölümünde belirtirseniz yardımcı olmaya çalışırım kodları aşağıda vereceğim.
Üzerine Gelince Rengi Değişen Menü

Yapmanız gerekenler;

Aşağıdaki 1.kodları Resimde gördüğünüz yere yani css bölümüne yapıştıracaksınız.
Blogger panelinize girin  Şablon bölümünde HTML’yi Düzenle seçeneğinden sonra aşağıdaki ilk kodları ( Css kodları )  ]]></b:skin>  bu koddan hemen önce ekleyin.   Daha sonra 2. kodları yani Html kodlarını sitenizde görünmesini istediğiniz kısıma Yerleşim , Gadget Ekle seçeneği ile  HTML / JavaScipt  , seçeneği ile ekleyin hepsi bu kadar. Artık menü kullanıma hazır hayırlı olsun.
Üzerine Gelince Rengi Değişen Menü

Üzerine Gelince Renk Değiştiren Menü Css kodları

 

/*——[ Main-menu ]——-*/

.nav-menu {margin: 0 auto 0;padding: 0;width: 100%;display: block;float: left;clear: both;position:relative;top:-26px;z-index:100;}
.nav-menu ul {list-style: none;padding: 0px;margin: 0px auto;z-index: 1;display: table;width:auto;}
.nav-menu ul li {display: inline-block;float: left;position: relative;padding: 0px;margin: 0px;z-index: 1;list-style: none;border-left: 1px solid #E4E4E4;background: white;}
.nav-menu ul li:first-child {border: 0;}
.nav-menu li a {color: #333;margin: 0px;line-height: 1.1;padding: 18px 25px;font-size: 11px;font-weight: 700;display: block;text-transform: uppercase;font-family: roboto,sans-serif;}
.nav-menu li a:hover { color:white;}
.sticky { position: fixed; top: 0px; border-bottom: 1px solid #ddd; z-index: 99999; }
.nav-menu li:nth-child(1) > a,
.nav-menu li:nth-child(2) > a,
.nav-menu li:nth-child(3) > a,
.nav-menu li:nth-child(4) > a,
.nav-menu li:nth-child(5) > a,
.nav-menu li:nth-child(6) > a,
.nav-menu li:nth-child(7) > a,
.nav-menu li:nth-child(8) > a,
.nav-menu li:nth-child(9) > a,
.nav-menu li:nth-child(10) > a {
position: relative;}
.nav-menu li:nth-child(1) > a:before,
.nav-menu li:nth-child(2) > a:before,
.nav-menu li:nth-child(3) > a:before,
.nav-menu li:nth-child(4) > a:before,
.nav-menu li:nth-child(5) > a:before,
.nav-menu li:nth-child(6) > a:before,
.nav-menu li:nth-child(7) > a:before,
.nav-menu li:nth-child(8) > a:before,
.nav-menu li:nth-child(9) > a:before,
.nav-menu li:nth-child(10) > a:before{
content: “”;
display: block;
height: 3px;
width: 102%;
position: absolute;
bottom: -3px;
left: -1px;}

.nav-menu li:nth-child(1) > a:before,.nav-menu li:nth-child(1) > a:hover{background: #1aaf5d;}
.nav-menu li:nth-child(2) > a:before,.nav-menu li:nth-child(2) > a:hover{background: #227ebb;}
.nav-menu li:nth-child(3) > a:before,.nav-menu li:nth-child(3) > a:hover {background: #2d97de;}
.nav-menu li:nth-child(4) > a:before,.nav-menu li:nth-child(4) > a:hover {background: #9c56b8;}
.nav-menu li:nth-child(5) > a:before,.nav-menu li:nth-child(5) > a:hover {background: #33485f;}
.nav-menu li:nth-child(6) > a:before,.nav-menu li:nth-child(6) > a:hover {background: #ea4b35;}
.nav-menu li:nth-child(7) > a:before,.nav-menu li:nth-child(7) > a:hover {background: #e87e04;}
.nav-menu li:nth-child(8) > a:before,.nav-menu li:nth-child(8) > a:hover {background: #f3c600;}
.nav-menu li:nth-child(9) a:before,.nav-menu li:nth-child(9) > a:hover {background: #ACEE21;}
.nav-menu li:nth-child(10) a:before,.nav-menu li:nth-child(10) > a:hover {background:#F30074 ;}

 

 

 

Üzerine Gelince Rengi Değişen Menü Html Kodları

 

<!– blog_main_navigation_menu –>
<div class=’nav-menu’>
<div class=’ct-wrapper’>
<ul class=’clearfix’>
<li><a href=’/’>Home</a></li>
<li><a href=’/p/sample-page.html’>News</a></li>
<li><a href=’#’>Lifestyle</a></li>
<li><a href=’#’>Fashion</a></li>
<li><a href=’#’>Nature</a></li>
<li><a href=’#’>Health</a></li>
<li><a href=’#’>Travel</a></li>
<li><a href=’#’>Living</a></li>
<li><a href=’#’>Food</a></li>
</ul>
</div>
</div>
</div>

İlgili Makaleler

22 Yorum

  1. Acaba bu işlemi Jquary ile birleştirebilir miyiz? Yani açılır menüler sürekli internet Jquary kodu ile yapılandırılmış? Sizin bu yönteminizle açılır menü işlemlerinde yine aynı uygulamayı gerçekleştirir mi?

  2. Merhaba. Benim blogumun tasarımıyla ilgili görüşlerinize ihtiyacım var. Yardımcı olur musunuz?

  3. merhaba sevdican in blogunda gordum sizi. boyle bilgili blogger arkadaşlarin olmasi ne kadar guzel cok memnun oldum. ben de yeni blog actim. googledan biraz biseyler buldum bu hale geldi :) gorusmek uzere diyorum iyi aksamlat

    1. Öncelikle hoş geldiniz demek istiyorum.
      Güzel düşünceleriniz için de teşekkür ederim bende memnun oldum.

  4. merhaba paylaşımlarınız çok güzel ve yararlı. Bunun için çok teşekkürler. FAkat bende işe yaramadı. dediklerinizi uyguladım fakat bende normal yazı şeklinde gözüküyor :((

    1. Merhaba
      Rica ederim.
      Evet ne yazık ki her tema da çalışmıyor kodlar
      Css kodlarının uyumsuzluğundan kaynaklanıyor sanırım.

  5. menülerin altına nasıl menü ekliyoruz menüye mauseyi getirince altındada menülerin çıkmasını istiyorum

    1. O dediğiniz özellik bu menüde yok maalesef. Fakat bahsettiğiniz menü adı dropdown menü Google'da bu şekilde arattığınız zaman çıkacaktır.

  6. Gökhan hocam anlatımın için çok teşekkür ederim. Demo olarak denedim çok güzel oldu. bence sen kendi sitende böyle bir menü kullanmalısın. eminim çok güzel görünecektir. Tekrardan teşekkürler.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu