Bu konu ile ilgili daha önceden eklenti tanıttım kod vs. verdim ancak bu seferkinde şöyle bir anlatım yapacağım. Beğendiğimiz şık css menüleri nasıl WordPress’e uyarlayıp menü oluşturabiliriz.
Öncelikle daha önceden açtığım WordPress menü eklentisini inceleyebilirsiniz. Yada JQuery Widget gelişmiş menü eklentisini kullanıp hızlı menüler oluşturabilirsiniz. Gelelim konumuza şimdi Güzel CSS Menüleri inceleyelim.
13 tane çok güzel css menü Buradan 1 tane seçtik ben “Slate CSS Menu”yü seçtim ve bilgisayarıma indirdim.
Burada seçmemiz gereken bir şey var oda menü’nün hangi renk olucağı? Ben Maviyi seçtim ve maviye göre gidiyorum.
CSS Menü Kategori uyarlaması
Dosyayı indirdik ve Winrar ile klasöre çıkarttık. Slate klasöründeki style.css dosyasını notepad++ ile açıyoruz. 4 Farklı renk olduğu için ayrılmış durumda ben mavi olanı kopyalıyorum.
/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Blueslate nav ---------------------- */
Yukarıdaki kodu WordPress Temanızın style.css dosyasında en alta yapıştırın.
Daha sonra index.html’yi notepad++ ile açıyoruz ve şu kodu kopyalıyoruz.
</pre> <div class="blue"> <div id="slatenav"> <ul> <li><a class="current" title="css menus" href="http://www.13styles.com/css-menus/slate/">Home</a></li> <li><a title="css menus" href="http://www.13styles.com/css-menus/slate/">About Us</a></li> <li><a title="css menus" href="http://www.13styles.com/css-menus/slate/">Services</a></li> <li><a title="css menus" href="http://www.13styles.com/css-menus/slate/">Our Work</a></li> <li><a title="css menus" href="http://www.13styles.com/css-menus/slate/">Contact Us</a></li> </ul> </div> </div> <pre>
Şimdi yukarıdaki HTML Kodumuz sayesinde menüleri tek tek oluşturabiliriz. Tek tek oluşturmanızın size sağladığı faydalardan 1 tane söyliyim.
CPU Kullanımını azaltıcak.
Ama biz otomatik olarak eklemesini istiyoruz öyle değilmi 🙂 Onuda hemen yapalım rahata kavuşun.
Alttaki kodu header.php de uygun yere ekleyin. Logo üstüne veya altına kaydedin menünüz tamamdır.
</pre> <div></div> <pre>
