ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingnavigation bar ของ apple.com [CSS] ???
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: navigation bar ของ apple.com [CSS] ???  (อ่าน 889 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ru
ก๊วนเสียว
*

พลังน้ำใจ: 24
ออฟไลน์ ออฟไลน์

กระทู้: 440



ดูรายละเอียด
« เมื่อ: 27 เมษายน 2010, 01:09:37 »

คือผมลองเข้าไปดูในเว็บ apple.com เค้าใช้ navigation bar แบบเป็นรูปเดียวแล้วให้คำสั่ง background-position เอา
ผมก็ลองหยิบมาเล่นดู รู้สึกว่ามันเจ๋งดี แต่ปัญหาของผมคือ เวลาเรา้เลือกคลิ๊กเพจแต่ละเพจเนี่ย คำสั่งที่เลือกเพจใน navigation bar มันไม่ทำงานอ่ะครับ
มันทำงานแต่ hover กับ active เท่านั้น ส่วน selected นั้นไม่ทำงานเลยครับ เลยไม่รู้ว่าตอนนี้ถูกเลือกเพจไหนอยู่ ใครพอจะแก้ปัญหานี้ได้บ้างครับ
ลองดูในโด้ดข้างล่างนี้ยิ่งงงไปใหญ่ครับ ในส่วน ON STATES พวก class .home .store .... คลาสเหล่านี้เค้าหยิบมาจากไหนหรอครับ ใครก็ได้ช่วยบอกผมที งงมาหลายวันแล้วครับ


โค๊ด:
And CSS this way :

/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }

/* OVER STATES */
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }
#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }
#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }

/* PRESSED STATES */
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }
บันทึกการเข้า
GillBate
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 160
ออฟไลน์ ออฟไลน์

กระทู้: 1,236



ดูรายละเอียด
« ตอบ #1 เมื่อ: 27 เมษายน 2010, 13:50:29 »

 Tongue เห็นเขาแจกกันอยู่นะครับ(เว็บนอก) เป็น jquery ครับ
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์