การทำ Vertical Menu CSS

อ้าว เริ่มกันเลยดีกว่าครับ กับส่วนของเรื่องราวเล็กๆ น้อยๆ ทั้งทิป เทคนิค วันนี้มาเริ่มกันที่ การทำเมนู แบบแนวตั้งกันก่อนครับ>

ลักษณะหลายๆ อย่างในโค้ดตัวอย่างข้างล่างนี้ ถ้าหากท่านใดสงสัย ไม่เข้าใจ ก็ โพสต์ ถามเอาไว้ที่ เว็บบอร์ดได้นะครับ เดี๋ยวจะมาอธิบายและตอบคำถามให้อีกที ที่เลือกเว็บบอร์ด ก็เพราะ จะได้มีโอกาสแลกเปลี่ยนกันได้หลายๆ คน

ในเมนู ตอนนี้ จะเป็นเพียงการทำเมนูแบบธรรมดาเท่านั้น ยังไม่ได้เพิ่มเติมสีสัน ด้วยแบ็คกราวน์ที่เป็นรูปภาพ ใดๆ ตอนต่อไปคงมีโอกาสได้นำเสนอ และถือเป็นโอกาสที่จะให้ ทุกท่านนำไปประยุกต์ แก้ไขกันเองตามสะดวกครับ

Code CSS

body {
font-family: "tahoma", verdana, MS Sans Serif;
font-size: 0.9em;
color: #000000;
background-color: inherit;
padding: 0;
}

.vh {
position: relative;
float: none;
margin: auto;
padding: 4px;
background-color: #999900;
display: block;
height: auto;
}

ul.menu {
width: 180px;
margin: 0;
padding: 0;
background-color: inherit;
color: #FFFFFF;
list-style-type: none;
}

ul.menu li {
width: 176px;
margin: 0;
padding: 0;
background-color: #666633;
font-size: 0.9em;
color: #FFFFFF;
display: block;
}

ul.menu li a:link {
width: 172px;
margin: 0;
padding: 2px;
background-color: inherit;
color: #FFCC00;
border-bottom: solid 1px #000000;
border-left: solid 1px #F8F8F8;
border-right: solid 1px #000000;
border-top: solid 1px #FFFFFF;
font-size: 0.9em;
text-decoration: none;
display: block;
}

ul.menu li a:visited {
width: 172px;
margin: 0;
padding: 2px;
background-color: inherit;
font-size: 0.9em;
border-bottom: solid 1px #000000;
border-left: solid 1px #F8F8F8;
border-right: solid 1px #000000;
border-top: solid 1px #FFFFFF;
color: #FF9966;
text-decoration: none;
display: block;
}

ul.menu li a:active {
width: 172px;
margin: 0;
padding: 2px;
background-color: inherit;
font-size: 0.9em;
border-bottom: solid 1px #000000;
border-left: solid 1px #F8F8F8;
border-right: solid 1px #000000;
border-top: solid 1px #FFFFFF;
color: #FFFF00;
text-decoration: none;
display: block;
}

ul.menu li a:hover {
width: 172px;
margin: 0;
padding: 2px;
background-color: #999933;
font-size: 0.9em;
color: #FFFF00;
border-bottom: solid 1px #FFFFFF;
border-left: solid 1px #000000;
border-right: solid 1px #FFFFFF;
border-top: solid 1px #000000;
text-decoration: none;
display: block;
}

ตัวอย่างโค้ด การทำ Vertical Menu CSS

และส่วนของ html