Üzerine Gelince Rengi Değişen Menü

Gökhan TEKİN25 Şubat 2015

22 450 2 dakika okuma süresi

Ü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.

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.

İçindekiler

Ü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 ;}