ตัวอย่าง
ดาวส์โหลดไฟล์รูป Background ประกอบ คลิกที่นี่
source code
ไฟล์ .CSS
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url('http://www.upfile.codewebphp.com/files/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('http://www.upfile.codewebphp.com/files/blueslate_backgroundOVER.gif') no-repeat top center;}
ไฟล์แสดงเมนู
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="#" title="css menus" class="current">Home</a></li>
<li><a href="#" title="css menus">About Us</a></li>
<li><a href="#" title="css menus">Services</a></li>
<li><a href="#" title="css menus">Our Work</a></li>
<li><a href="#" title="css menus">Contact Us</a></li>
</ul>
</div>
</div>
หมายเหตุ * code บรรทัดสีแดงให้เปลี่ยนที่อยู่รูปภาพพื้นหลังของเมนูให้ตรงกับ PART ที่เก็บไฟล์ภาพของคุณ เช่น url('images/blueslate_background.gif')
ไม่มีความคิดเห็น:
แสดงความคิดเห็น