Merhaba okurlarım.İşim gereği bazen wordpress dışına çıkıp bazı kodlamalar ve düzenlemeler yapmak zorunda kalıyorum.Bugün yapmam gereken tasarım sonucu wordpress’in kategorileme kodlarını iptal ederek css ile menü yapmak zorunda kaldım.Yaptığım bu css kodlamasını da siz değerli wordpress uzmanı okurlarıma göstermek istedim.İlerde belki sizinde işine yarayacağını düşünerek css kodlarını paylaşmak istiyorum.
İlk olarak aşağıda verdiğim kodları kendi temam üzerinde ki header.php açarak </head> kodu altına yerleştirdim.Bu verdiğim kodlar menümüzün linklerini yerleştirmek oluyor.Siz bu kodları kendinize göre ayarlarsınız.Kategoriyi nerede göstermek isterseniz oraya atarsınız.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Deneme</title>
<link rel="stylesheet" href="menu.css" media="all" type="text/css">
</head><body>
<div id="khaaos">
<ul>
<li><a class="khaaos-anasayfa" href="index.html"></a></li>
<li><a class="khaaos-icerik" href="index.html"></a></li>
<li><a class="khaaos-kullanim" href="index.html"></a></li>
<li><a class="khaaos-tanitim" href="index.html"></a></li>
<li><a class="khaaos-siparis" href="index.html"></a></li>
</ul></div>
</body></html>
Sizler href kodundan sonra gelen index.html yazan bölüme linke tıklandığı zaman nereye gitmesini istiyorsanız oranın linkini verebilirsiniz.
Daha sonra Style.css dosyasını acarak css olarak düzenlemiş aşağıda ki kodları Style.css dosyanızın içine atmanız gerekiyor.
#khaaos{
width:604px; height:64px;
margin-left:auto;
margin-right:auto;
}
#khaaos ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#khaaos ul li{
float:left;
}
#khaaos ul li a{
display:block;
height:32px;
}
/*Ust*/
.khaaos-anasayfa{
width:121px;
background-image:url(menu.png);
background-position:0px 0px;
}
.khaaos-icerik{
width:81px;
background-image:url(menu.png);
background-position:-121px 0px;
}
.khaaos-kullanim{
width:105px;
background-image:url(menu.png);
background-position:-202px 0px;
}
.khaaos-tanitim{
width:172px;
background-image:url(menu.png);
background-position:-307px 0px;
}
.khaaos-siparis{
width:125px;
background-image:url(menu.png);
background-position:-479px 0px;
}
/*alt*/
.khaaos-anasayfa:hover{
background-position:0px -32px;
}
.khaaos-icerik:hover{
background-position:-121px -32px;
}
.khaaos-kullanim:hover{
background-position:-202px -32px;
}
.khaaos-tanitim:hover{
background-position:-307px -32px;
}
.khaaos-siparis:hover{
background-position:-479px -32px;
}
Yukarıda verilen kodlar arasında ki menu.png resminin bulunduğu yeri kendinize göre değiştirmeniz gerekir.Ben anadizine direk menü resmini atarak bu şekilde yaptım.Siz menü.png dosyasını nereye atıyorsanız oranın linkini verin.
Detaylı olarak videolu olarak anlatmak isterdim ama inanın ki hiç boş zamanım yok.Soru ve sorunlarınızı konu altına yorum yaparak sorarsanız elimden geldiğince yardımcı olmaya çalışacağım.
Örnek tasarımı önizlemek için tıklayınız.
Menü resmini almak isterseniz tıklayınız.
Css İle Menü Yapmak,
hocam bende 850px 340px 5 li buton yaptım footer üstünde görünmesi için herşey tamamda tek sorun butonlar görünmüyor mause ile üzerine gelince tıklanabilir oluyor tıklayınca gidilecek yerede gidiyor ama sayfa beyaz yani görünürde bişey yok acaba hatayı nerde yaptım çözemedim yardımcı olurmusunuz acaba birde hala bekliyorum tekli yorum sayfası yapmayı anlatacaktınız kolay gelsin teşekkürler
hocam ben hala çözemedim buraya verdiğiniz kodları kendime göre düzenlediğim şekline bakıp bana hatayı söyleyebilirmisiniz butonları bi türlü görünür yapamadım 5 butonlu yapmak istedim her buton 170×170 kare ebatında toplam width:850 height:340 yardımcı olursanız sevinirim
#khaaos{
width:850px; height:340px;
margin-left:auto;
margin-right:auto;
}
#khaaos ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#khaaos ul li{
float:left;
}
#khaaos ul li a{
display:block;
height:170px;
}
/*Ust*/
.khaaos-anasayfa{
width:170px;
background-image:url(menu.png);
background-position:0px 0px;
}
.khaaos-icerik{
width:170px;
background-image:url(menu.png);
background-position:-170px 0px;
}
.khaaos-kullanim{
width:170px;
background-image:url(menu.png);
background-position:-340px 0px;
}
.khaaos-tanitim{
width:170px;
background-image:url(menu.png);
background-position:-510px 0px;
}
.khaaos-siparis{
width:170px;
background-image:url(menu.png);
background-position:-680px 0px;
}
/*alt*/
.khaaos-anasayfa:hover{
background-position:0px -170px;
}
.khaaos-icerik:hover{
background-position:-170px -170px;
}
.khaaos-kullanim:hover{
background-position:-340px -170px;
}
.khaaos-tanitim:hover{
background-position:-510px -170px;
}
.khaaos-siparis:hover{
background-position:-680px -170px;
}
Merhaba Hakan.Biraz Araştırma Yaptım Benim Zamanım Olmadığı İçin Sana Videolu Olarak Bir Anlatım Buldum.Burada Arkadaşımız Detaylı Olarak Anlatmış Dikkatli İzlersen Olayı Çözebilirsim
Buyrun:
http://ugurdalkiran.com/css-sprite-teknigini-kullanarak-bir-menu-yapalim.html
hocam çok saolun 3 gündür ufacık bi hata yüzünden uğraştığıma inanamıyorum hatada şu imiş (menü.png) burda resmin uzantısını yazmamışım .png yani 3 gündür hiçde tikkatimi çekmedi ya:)) ilginiz ve alakanız için çok teşekkür ederim sıkı takipçinizim birde bu tek sayfa yorum sayfası yapmayı gösterirseniz süper olacak iyi çalışmalar kolay gelsin:)
Merhaba Hakan.Müsait olduğumda anlatacağım konular arasında ama dediğim gibi yoğunluğum var biraz.Yoğunluğumu attıktan sonra ilgileneceğim.Takip ettiğiniz içinde teşekkür ederim.