Taylor Swift จัดคอนเสิร์ต Red Tour รอบพิเศษสำหรับคนไทยที่สิงคโปร์ !!!

29/05/2014

Flash – Text Animate – ข้อความค่อยๆ แสดงอย่างรวดเร็ว

30/05/2014

พื้นฐานการทำ CSS Menu

29/05/2014
empty image
empty image

         การทำ menu CSS เอาแค่พื้นฐานๆ ให้รู้ว่าอะไรตรงไหน เป็นยังไง เพราะว่าเดี๋ยวนี้ menu css สามารถหาได้ง่ายๆ ตามเว็บซึ่งแจกฟรีกันไปเลย แถมยังสวยกว่าเราทำเองอีก ฮ่าๆ แต่เราก็สามรถนำมาแก้ไขตามที่เราต้องการได้

CSS Menu แนวตั้ง

1. ขั้นแรกก็สร้าง List ก่อน

HTML

<ul>
<li><a href="#">หน้าหลัก</a></li>
<li><a href="#">สินค้า</a></li>
<li ><a href="#">วิธีการสั่งซื้อสินค้า</a></li>
<li ><a href="#">วิธีการชำระเงิน</a></li>
<li><a href="#">ติดต่อเรา</a></li>
</ul>

ผลลัพธ์

2. ใส่ css

#menu {} /*กำหนดรูปแบบให้กับ selector เช่นความกว้าง สูง สี*/
#menu li a:link {} /*กำหนดลิ้งที่อยู่ใน list*/
#menu li a:visited {} /*กำหนดลิ้งใน list ที่ถูกเยี่ยมชมไปแล้ว*/
#menu li a:hover {} /*กำหนดลิ้งใน list เมื่อเมาส์ชี้*/
#menu li a:active {} /*กำหนดลิ้งใน list เมื่อเมาส์กด*/

#menu {
width: 200px;
background-color:#CCC;
list-style:none;
padding: 0px;
margin: 0px;
}

#menu li a:link,
#menu li a:visited {
text-decoration: none;
color:#09F;
display: block;
padding: 5px;
} /*กำหนดให้ทั้ง link และ visited มีรูปแบบเดียวกัน*/

#menu li a:hover {
color: white;
background-color:#999;
border-right: 3px solid #06F;
}

#menu li a:active {color:red;}

ผลลัพธ์

อธิบายนิดหน่อย

list-style:none; ก็คือเอาสญลักษณ์หน้ารายการออก (ที่มันเป็นจุด)
display: block; คือ เดิมเอาเมาส์ชี้ที่อักษรถึงจะแสดงเป็นลิ้ง ก็ปรับเป็นเป็นโฟกัสไปทั้งกรอบเลย ชี้ตรงไหนในกรอบก็เป็นการชี้ลิ้ง
padding: 5px; ถ้าตัวอักษรมันติดขอบเกินไปก็ padding รอบด้านเข้ามาซักหน่อย เพื่อขยายบรรทัดด้วย
border-right: 3px solid #06F; เวลาชี้เมาส์ให้เพิ่มขอบสีน้ำเงินเข้ามาซักหน่อย

CSS Menu แนวนอน

     จริงๆ แนวนอนไม่มีไรมากเลย แค่เพิ่ม float: left เข้าไปในส่วนของ li เท่านั้น แล้วก็ปรับอะไรนิดหน่อย

CSS

#vmenu {
list-style:none;
padding: 0px;
margin: 0px;
}

#vmenu li {
background-color: #CCC;
min-width: 80px;
float:left;
text-align: center;
}

#vmenu li a:link,
#vmenu li a:visited {
text-decoration: none;
color:#09F;
display: block;
padding: 5px;
}

#vmenu li a:hover {
color: white;
background-color:#999;
border-bottom: 3px solid #06F;
}
#vmenu li a:active {color:red;}

html ก็เหมือนแนวตั้ง

<ul id="vmenu">
<li><a href="#">หน้าหลัก</a></li>
<li><a href="#">สินค้า</a></li>
<li ><a href="#">วิธีการสั่งซื้อสินค้า</a></li>
<li ><a href="#">วิธีการชำระเงิน</a></li>
<li><a href="#">ติดต่อเรา</a></li>
</ul>

CSS Menu Maker

         ถ้าเรามีพื้นฐานการทำเมนู เราก็สามารถไปใช้ css ที่มีให้โหลดฟรี ตามเว็บต่างๆ ซึ่งจะให้เราสามารถสร้าง css menu ที่สวยงาม และมีให้เลือกหลากหลายแบบ ขอแนะนำเว็บนี้เลย
http://cssmenumaker.com/ ซึ่งจะให้เราเลือกรูปแบบเมนู จากนั้นก็ปรับแต่ง เช่นชื่อเมนู เมนูย่อย สีต่างๆ และการเชื่องโยง (link) เมื่อปรับแต่งเสร็จสามารถ Download มาให้ได้เลย

ตัวอย่าง

http://cssmenumaker.com/

        และอีกเว็บคือ http://css3menu.com/ เมนูเยอะดี เว็บนี้จะให้เรา Download โปรแกรมมาเลยแล้วปรับแต่งเอง มีเวอร์ชันฟรีกับเสียเงิน

ตัวอย่าง

งืม…Zzz