27-03-2013 Saat: 22:11
Merhaba,arkadaşlar css ile kodlanmış harika bir mavi menü.
Demo Adres ;
Ekran Görüntüsü ;
Yapımı ;
Aşağıdaki kodu Admin Paneli Temalar&Şablonlar Temalar Kullandığınız Temanın global.css 'dosyasını açıp en altına ekleyin...
Daha sonra aşağıdaki kodu menü'nün nerde gözükmesini istiyorsanız oraya ekleyiniz... (İndex olur,portal olur vs )
Kolay gelsin.
Demo Adres ;
Kod:
wwww.forumgenel.10tl.net
Yapımı ;
Aşağıdaki kodu Admin Paneli Temalar&Şablonlar Temalar Kullandığınız Temanın global.css 'dosyasını açıp en altına ekleyin...
Kod:
<style type="text/css">
<!–
/* ---------------------- mavi menu ---------------------- */
.blue #waxcontainer{position:relative;height:48px;background:#69BEEE;width:100%;font-family:"Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;}
.blue #waxnav{position:relative;height:25px;font-size:11px;font-weight:bold;background:#fff url(../img/bluewax_bottom.gif) repeat-x bottom left;}
.blue #waxnav ul{margin:0px;padding:0 0 4px 0;list-style-type:none;width:auto;float:right;}
.blue #waxnav ul li{display:block;float:left;margin:0 1px;}
.blue #waxnav ul li a{display:block;float:left;color:#003858;text-decoration:none;padding:0 0 0 12px;height:21px;line-height:195%;}
.blue #waxnav ul li a span{padding:0 12px 0 0;}
.blue #waxnav ul li a:hover,.blue #waxnav ul li a.current{color:#fff;background:#1D6893 url(../img/bluewax_navtopleft.gif) no-repeat top left;}
.blue #waxnav ul li a:hover span,.blue #waxnav ul li a.current span{display:block;width:auto;background:#1D6893 url(../img/bluewax_navtopright.gif) no-repeat top right;}
/* ---------------------- mavi menu ---------------------- */
–>
</style>
Daha sonra aşağıdaki kodu menü'nün nerde gözükmesini istiyorsanız oraya ekleyiniz... (İndex olur,portal olur vs )
Kod:
<div class="blue">
<div id="waxcontainer">
<div id="waxnav">
<ul>
<li><a href="" title="" class="current"><span>Ana Sayfa</span></a></li>
<li><a href="" title=""><span>Hakkımızda</span></a></li>
<li><a href="" title=""><span>Hizmetler</span></a></li>
<li><a href="" title=""><span>Referanslar</span></a></li>
<li><a href="" title=""><span>İletişim</span></a></li>
</ul>
</div>
</div>
</div>