ลิงค์หรือเมนู ด้วย CSS
แบบที่ 1 เมนูแบบปุ่ม ทำ highlight ด้านข้าง
แบบที่ 2 เมนูแบบปุ่ม ทำ highlight ด้านบน
แบบที่ 3 เมนูแนวนอน คล้ายๆ Tab
#menulayer1 li {
margin-bottom:4px;
list-style-type:none; /* ไม่ให้แสดงเป็น list */
width:100px; /* ความกว้าง */
height:20px; /* ความสูง */
}
#menulayer1 li a {
font-weight:bold;
text-decoration:none;
color:#505050; /* สีของตัวหนังสือ */
display:block;
padding:6px 3px;
background:#f4f4f4; /* สีพื้น */
border-left:4px solid #cccccc; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
}
#menulayer1 li a:hover {
background:#eaeaea;
color:#286ea0; /* สีของตัวหนังสือ */
border-left:4px solid #286ea0; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
}
<ul id="menulayer1">
<li><a href="https://www.goragod.com" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.saiyaithai.org" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.6te.net" title="goragod.com">goragod.com</a></li>
</ul>
แบบที่ 2 เมนูแบบปุ่ม ทำ highlight ด้านบน
#menulayer2 li {
margin-bottom:4px;
list-style-type:none; /* ไม่ให้แสดงเป็น list */
text-align:center; /* ตำแหน่งข้อความ */
width:100px; /* ความกว้าง */
height:20px; /* ความสูง */
}
#menulayer2 li a {
font-weight:bold;
height:20px;
text-decoration:none;
color:#505050; /* สีของตัวหนังสือ */
display:block;
padding:3px;
background:#f4f4f4; /* สีพื้น */
border-top:4px solid #cccccc; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
}
#menulayer2 li a:hover {
background:#eaeaea; /* สีพื้น */
color:#286ea0; /* สีของตัวหนังสือ */
border-top:4px solid #286ea0; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
}
<ul id="menulayer2">
<li><a href="https://www.goragod.com" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.saiyaithai.org" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.6te.net" title="goragod.com">goragod.com</a></li>
</ul>
แบบที่ 3 เมนูแนวนอน คล้ายๆ Tab
#menulayer3 {
margin-top:10px;
}
#menulayer3 li {
display:inline; /* เมนูแนวนอน */
position:relative;
list-style-type:none;
}
#menulayer3 li a {
font-weight:bold;
text-decoration:none;
color:#cccccc; /* สีของตัวหนังสือ */
background:#f0f0f0; /* สีพื้น */
border-bottom:1px solid #cccccc; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
padding:6px 20px 3px 20px;
}
#menulayer3 li a:hover {
color:#286ea0; /* สีของตัวหนังสือ */
border-bottom:4px solid #286ea0; /* ขนาดและสีและตำแหน่งของเส้นคั่น */
background:#f4f4f4; /* สีพื้น */
}
<ul id="menulayer3">
<li><a href="https://www.goragod.com" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.saiyaithai.org" title="goragod.com">goragod.com</a></li>
<li><a href="http://goragod.6te.net" title="goragod.com">goragod.com</a></li>
</ul>
ตัวอย่าง