เว็บไซต์ทุกเว็บไซต์จะต้องมีสิ่งที่ขาด ไม่ได้อยู่ 1 อย่าง คือ "เมนู" ซึ่งทำให้ผู้ใช้งานสามารถที่จะเข้าถึงหน้าเว็บเพจต่าง ๆ ของเว็บไซต์ได้อย่างสะดวก ซึ่งเมนูของเว็บไซต์ในปัจจุบันนั้นมีอยู่หลาย เช่น เมนูแนวตั้ง,แนวนอน, อนิเมชั่นเมนู,multi level menu และอื่น ๆ อีกมาย ขึ้นอยู่กับการออกแบบของแต่ละคน โดยเมนูเหล่านั้นอาจไม่จำเป็นต้องสวยเริดหรูมากมายสักเท่าใดนัก แค่ให้สามารถที่จะตอบสนองผุ้งานเว็บไซต์ได้อย่างเต็มที่ สะดวก และสามารถนำทางผุ้ใช้งานเว็บไซต์ได้ก็พอแล้ว
วันนี้เลยเอาโค้ด CSS สร้างเมนูแนวนอนแบบง่าย ๆ มาให้ดูกัน
HTML Code
CSS Code
1.ทำการกำหนดขนาดของเมนูที่่เราต้องการ ก่อน ทั้งความกว้าง และความยาว แต่ในที่นี้ไม่ได้กำหนดเอาไว้เพื่อให้เมนูสามารถขยายได้ตามความยาวตัวอักษร
#menu{
padding:0;
margin:0;
position:relative;
}
#menu ul{
padding:0;
margin:0;
list-style:none;
float:left;
}
2.สร้างเมนูแต่ละอัน เพื่อกำหนดรูปร่างเมนูให้เป็นไปตามที่เราต้องการ โดยให้เรากำหนดขนาดความกว้าง width:auto หรือเราจะปล่อยไว้เฉย ๆ โดยไม่กำหนดก็เหมือนกัน ซึ่งการกำหนดให้ width:auto นั้นเพื่อให้ขนาดของเมนูขยายตามความยาวตัวอักษร
#menu ul li{
padding:0;
margin:0 5px 0 0;
display:block;
float:left;
}
3.กำหนดรูปแบบ link หรือรูปลักษณ์ที่ต้องการจะแสดงออกมาตามต้องการ
#menu ul li a{
width:auto;
height:auto;
padding:0px 10px;
margin:0;
float:left;
font:bold 13px/15px Tahoma, Verdana, sans-serif;
color:#000;
text-align:center;
text-decoration:none;
}
4.กำหนดรูปแบบเมนูเมื่อเราเอาเมาส์ไปชี้ค้างเอาไว้
#menu ul li a:hover{
text-decoration:underline;
}
5.กำหนดรูปแบบแสดงหน้าปัจจุบัน ว่าผู้ใช้งานอยุ่ในหน้าใด
#menu ul li.current{
padding:0px 10px;
margin:0 5px 0 0;
display:block;
float:left;
font:bold 13px/15px Tahoma, Verdana, sans-serif;
color:#0099FF;
text-decoration:underline;
text-align:center;
}
ผลลัพธ์
ซึ่งเราสามารถนำไปดัดแปลงเป็นเมนูรูป แบบต่าง ๆ ได้อีกหลายแบบตามที่ต้องการได้ โดยการใช้โค้ด CSS รูปแบบเดียวกัน แต่ทำการแก้ไข และตกแต่งเพิ่มเติม
ซึ่งเราสามารถตกแต่งเพิ่มเติมโดยการใส่พื้นหลังให้กับเมนูได้ โดยที่ต้องสร้างรูปพื้นหลังออกเป็น 2 ส่วน ดังรูป
รูปที่ 1 
รูปที่ 2 
โดยให้ใส่รูปที่ 1 ในแท็ก li ดังโค้ด
#menu ul li{
height:24px;
padding:0 0 0 10px;
margin:0 5px 0 0;
display:block;
float:left;
background:url(images/submenu-l.gif) no-repeat left;
}
ต่อจากนั้นให้เรากำหนดรูปที่ 2 ลงในแท็ก a ดังโค้ด
#menu ul li a{
width:auto;
height:auto;
padding:0px 21px 0 10px;
margin:0;
float:left;
font:bold 13px/24px Tahoma, Verdana, sans-serif;
color:#7A6B44;
text-align:center;
text-decoration:none;
background:url(images/submenu-r.gif) no-repeat right;
}
หลังจากนั้นให้เรากำหนดรูปแบบหน้าปัจจุบันด้วย โดยใช้รูปที่เราสร้างขึ้น
#menu ul li.current{
margin:0 5px 0 0;
display:block;
float:left;
font:bold 13px/24px Tahoma, Verdana, sans-serif;
color:#fff;
background:url(images/submenu-active-l.gif) no-repeat left;
}
#menu ul li.current span{
padding:0px 21px 0 10px;
margin:0;
display:block;
float:left;
background:url(images/submenu-active-r.gif) no-repeat right;
}
แล้วให้เราไปแก้โค้ด HTML เล็กน้อย โดยการเอาคลาส current ไปใส่ไว้ในแท็ก li แล้วทำการลบแท็ก a ออก และให้ใส่แท็ก span ลงไปแทน
ซึ่งจะทำให้เรามีเมนูแนวนอนที่ทำด้วย CSS แบบง่าย ๆ และธรรมดาได้แล้วจ๋า ซึ่งสามารถใช้ได้ทั้งใน Mozilla Firefox และ ie7 (ยังไม่ได้ทดสอบกับ ie6 แต่คาดว่าน่าจะใช้ได้ ถ้าไม่ได้ยังไงก็มาโพสคอมเม้นบอกไว้ได้นะจ๊ะ)
ขอบคุณเจ้าของบทความนี้ >> [direct]http://web.ofebia.com/contents/view/194.htm[/direct]
Thank : [direct]http://web.ofebia.com/[/direct]
บันทึกการเข้า
