[CSS] ของ Menu~ ง่ายนิดเดียว

posted on 20 Aug 2011 22:34 by whitebears in ComputerIT
 
โค้ดของ เมนู ที่พอเอาเม้าส์ไปชี้แล้วจะเป็นอีกตัวอีกษรนึง  ประมาณว่า มีลูกเล่นนั่นแหละ =A='
 
เอาไปแปะไว้ในช่อง CSS  ของบล็อก 
 
/*----------------------------------------------------------------------------------------------*/
/* menu */

menu {
list-style: none;
padding: 0;
margin: 0;
width: 500px;  /*ขนาดความกว้างของเมนู สามารถเปลี่ยนได้*/
height: 310px;  /*ขนาดความสูงของเมนู สามารถเปลี่ยนได้*/
background: url(ที่อยู่รูปภาพ) no-repeat;
position:absoulte;
overflow:auto;}
#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: 144px;  /*ขนาดความกว้างของ Home ถ้าค่านี้มันกว้างเกินไป ทำให้เห็นรูปโผล่ออกมา ก็ปรับได้*/
height: 58px; /*ขนาดความสูงของ Home ถ้ามันยาวเกินรูปภาพ ก็สามารถปรับได้*/
background: url(ที่อยู่รูปภาพA) no-repeat;
left: 96px; /*เอาไว้เลื่อนตำแหน่ง ปล่อยมันไว้เฉยๆดีกว่า แล้วใช้โค้ด margin เอา =w='*/
top: 73px; /*เอาไว้เลื่อนตำแหน่ง ปล่อยมันไว้เฉยๆดีกว่า แล้วใช้โค้ด margin เอา =w='*/
margin:48px 0px 5px 20px;} /*เอาไว้เลื่อนลิ้งเมนู ให้อยู่ในตำแหน่งที่กำหนด  จะอธิบายตามลำดับ*/
/*ค่ายิ่งมาก เลื่อนลง เลื่อนไปซ้าย เลื่อนขึ้น เลื่อนไปขวา*/
#menu .home span {
width: 86px; /*ขนาดความกว้างของช่องที่แสดงข้อความอธิบาย ปรับได้*/
height: 14px; /*ขาดความสูงของช่องที่แสดงข้องความอธิบาย ปรับได้*/
background: url( ที่อยู่รูปภาพB) no-repeat;
left: 28px; /*เลื่อนตำแหน่ง ปล่อยเอาไว้เฉยๆดีกว่า*/
top: -20px;} /*เลื่อนตำแหน่งเหมือนกัน ปล่อยไว้เฉยๆดีกว่า*/
#menu .about {
width: 131px;
height: 51px;
background: url(ที่อยู่รูปภาพA) no-repeat;
left: 338px;
top: 97px;
margin:19px 0px 5px -30px;}
#menu .about span {
width: 40px;
height: 12px;
background: url(ที่อยู่รูปภาพB) no-repeat;
left: 44px;
top: 54px;}
#menu .howto {
width: 144px;
height: 58px;
background: url(ที่อยู่รูปภาพA) no-repeat;
left: 96px;
top: 173px;
margin:18px 0px 5px 55px;}
#menu .howto span {
width: 86px;
height: 14px;
background: url(ที่อยู่รูปภาพฺB) no-repeat;
left: 28px;
top: -120px;}
/*----------------------------------------------------------------------------------------------*/
 
 
/*ถ้าต้องการเพิ่มจำนวนลิ้งเมนู ก็สามารถก๊อป แล้ววางได้  แต่ควรเปลื่ยนโค้ดที่มี สีแดง ชมพู ด้วย
 
โดยให้เหมือนกันโค้ดที่จะใส่ลงใน Widgets ที่จะมีโค้ดด้านล่าง*/

 
อธิบายเรื่อง  ที่อยู่รูปภาพA
 
ขอยกตัวอย่างเป็นรูปที่เราใช้เลยละกันนะ  ตรงนี้เราใส่ลิ้งรูป
 
 
พอใส่รูปเข้าไป ก็จะเป็นเหมือนเมนูด้านบนของบล็อกเรา =w=  สามารถปรับแต่งได้
 
 
ที่อยู่รูปภาพB
 
เราไม่ได้ใส่อะ  เพราะมันดูยุ่งยากเล็กน้อย (และขี้เกียจทำ > <'' แหะๆ)  และดูเหมือนไม่ค่อยจำเป็น -.-
 
 
 
 
และอีกส่วนนึงที่จำเป็นต้องใส่ ก็คือ ส่วนที่ใส่ใน Widgets
 
 
 
ถ้าจะเพิ่มลิ้งก็ก็อปแปะเหมือนกัน  โครงก็ประมาณนี้
 
 
 
 
 
ปล. โค้ดนี้เราไปโหลดมาจาก.... (ทำที่มาหาย = ='')  อ่านะ   แล้วก็เอามาดัดแปลงนิดหน่อย
 
ถ้าหาเว็บที่มาเจอจะเอามาแปะเน้อ =A=  ขออภัยทั้งเจ้าของที่คิด  และผู้อ่านบล็อกด้วยจ้า
 

Comment

Comment:

Tweet

เปิดตัว windows 8 แล้วร่วมโหลด ได้ กัฟ .....................ปล..cry cry Hot!

#2 By paykhaw on 2011-10-14 23:09

@`White Bears big smile open-mounthed smile Hot! ขอบคุณ ในการร่วมคอมเมนต์ Blog ผมนะ กัฟ อย่าลืมแวะไปเยี่ยมกัน บ้าง ผมต้องการมีเพื่อน เยอะๆๆ (บล็อก ผม ยังไม่สวยเท่่าไหร่เนื่องจาก เพิ่งหัดสร้าง ว่างๆๆคุณช่วยสอนผม ที นะ ขอชมว่าบล็อกคุณสวยมากๆๆๆ กัฟ )big smile question double wink

#1 By paykhaw on 2011-10-14 23:08

สัญญาอนุญาตของครีเอทีฟคอมมอนส์