Blog Advanced CSS Menu

วันนี้กลับบ้านกินข้าวแล้วนอนเร็วเหนื่อยหลังจากไม่ได้นอนเร็วมาหลายวันติดต่อกันวันนี้ก็เอาอีกแล้ว นอนตื่นขึ้นมาตอนห้าทุ่มกว่าๆเซ็งเลย จะนอนต่อก็นอนไม่หลับเลยมานั่งทำ css เล่นดูครับก็ไม่ยากเท่าไหร่ใช้รูปเป็น bg แล้วก็เอารูปมาซ้อนทำเป็น menu อีกทีครับลองดูที่โคด css นะครับส่วนตัวอย่างนี้ผมทำเล่นๆดูเฉยๆเอาไปโมใช้กับงานอื่นต่อแล้วกันนะครับลองดูนะ

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 753px;
	height: 114px;
	background: url(img/bg-head.jpg) no-repeat;
	position: relative;
}
#menu span {
	display: none;
	position: absolute;
}
#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menu a:hover {
	background-position: left bottom;
}
#menu a:hover span{
	display: block;
}
#menu .home {
	width: 107px;
	height: 53px;
	background: url(img/home.gif) no-repeat;
	left: 80px;
	top: 52px;
}
#menu .home span {
	width: 72px;
	height: 35px;
	background: url(img/home-over.gif) no-repeat;
	left: 28px;
	top: -40px;
}
#menu .about {
	width: 131px;
	height: 52px;
	background: url(img/about.gif) no-repeat;
	left: 282px;
	top: 54px;
}
#menu .about span {
	width: 90px;
	height: 32px;
	background: url(img/about-over.gif) no-repeat;
	left: 44px;
	top: -40px;
}
#menu .exit {
	width: 90px;
	height: 46px;
	background: url(img/exit.gif) no-repeat;
	left: 504px;
	top: 61px;
}
#menu .exit span {
	width: 83px;
	height: 27px;
	background: url(img/exit-over.gif) no-repeat;
	left: 26px;
	top: -40px;
}

ดาวโหลดตัวอย่างได้ที่นี่ครับ Blog Advanced CSS Menu

Popularity: 13% [?]

Blog Related Content

Subscribe to the post comments feeds or Leave a trackback