01 จาก 06
วิธีการสร้างการนำทางแบบแท็บด้วย CSS และไม่มีรูปภาพ
การนำทางบนหน้าเว็บเป็นรูปแบบของรายการและการนำทางแบบแท็บก็เหมือนกับรายการในแนวนอน การสร้างการนำทางแบบแท็บแนวนอนด้วย CSS เป็นเรื่องที่ค่อนข้างง่าย แต่ CSS 3 ทำให้เรามีเครื่องมือเพิ่มเติมเพื่อให้ดูดีขึ้น
บทแนะนำนี้จะนำคุณผ่าน HTML และ CSS ที่จำเป็นในการสร้างเมนูแบบแท็บ CSS คลิกที่ลิงค์เพื่อดูว่าจะดูอย่างไร
เมนูแบบแท็บนี้ ไม่มีภาพ เพียง HTML และ CSS 2 และ CSS 3. สามารถแก้ไขได้อย่างง่ายดายเพื่อเพิ่มแท็บเพิ่มเติมหรือเปลี่ยนข้อความในรูปภาพ
การสนับสนุนเบราว์เซอร์
เมนูแท็บนี้จะใช้ได้ กับเบราว์เซอร์หลักทั้งหมด Internet explorer จะไม่แสดงมุมโค้งมน แต่อย่างอื่นจะแสดงแท็บต่างๆเช่น Firefox, Safari, Opera และ Chrome
02 จาก 06
เขียนรายการเมนูของคุณ
เมนูนำทางและแท็บทั้งหมดเป็นเพียงรายการที่เรียงลำดับเท่านั้น ดังนั้นสิ่งแรกที่คุณต้องทำคือเขียนรายการที่ไม่เรียงลำดับของลิงก์ไปยังตำแหน่งที่คุณต้องการให้การนำทางแบบแท็บไป
กวดวิชานี้สมมติว่าคุณกำลังเขียน HTML ในโปรแกรมแก้ไขข้อความและทราบว่าคุณควรวาง HTML สำหรับเมนูบนหน้าเว็บของคุณ
เขียนรายการที่ไม่เรียงลำดับของคุณเช่นนี้:
- class = "tablist">
- CSS 3
- id = "current"> แท็บ
- สำหรับ
- เมนู
คุณจะสังเกตเห็นว่าโค้ดเรียกใช้สองสิ่ง: class = "tablist" และ id = "current" จำเป็นต้องใช้ ก่อน ถ้าคุณไม่ใส่คลาส tablist ในรายการที่ไม่ได้เรียงลำดับแท็บจะไม่ทำงาน ตัวเลือกที่สองเป็นตัวเลือก วางรหัส = "ปัจจุบัน" ในแท็บใดก็ตามที่คุณต้องการเน้นในหน้านั้น ฉันมักใช้เพื่อไฮไลต์หน้าเว็บที่ฉันเปิดอยู่ แต่คุณสามารถใช้เพื่อไฮไลต์แท็บที่สำคัญที่สุดได้ หรือคุณสามารถนำออกได้อย่างสมบูรณ์
03 จาก 06
เริ่มแก้ไขสไตล์ชีตของคุณ
คุณสามารถใช้ สไตล์ชีตภายนอก หรือ สไตล์ชีต ภายใน ก็ได้ หน้าเมนูตัวอย่างใช้สไตล์ชีตภายในใน
ของเอกสารก่อนอื่นเราจะจัดรูปแบบ UL เอง
นี่คือที่ที่เราใช้ tablist ของ class ใน HTML แทนที่จะจัดรูปแบบแท็ก UL ซึ่งจะเรียงลำดับรายการที่เรียงลำดับทั้งหมดในหน้าเว็บของคุณคุณควรกำหนดรูปแบบเฉพาะชั้น UL ดังนั้นรายการแรกใน CSS ของคุณควรเป็น:
.tablist {}ฉันชอบใส่วงเล็บปีกกา (}) ก่อนเวลาดังนั้นฉันจึงไม่ลืมในภายหลัง
ขณะที่เรากำลังใช้แท็กรายการที่เรียงลำดับสำหรับรายการเมนูแท็บ แต่เราไม่ต้องการให้มีสัญลักษณ์หรือตัวเลขกระเพื่อมเข้ามาดังนั้นสไตล์แรกที่คุณควรเพิ่มคือ รูปแบบรายการ: none; ซึ่งจะบอกเบราว์เซอร์ว่าในขณะที่เป็นรายการเป็นรายการที่ไม่มีรูปแบบที่กำหนดไว้ล่วงหน้า (เช่นสัญลักษณ์แสดงหัวข้อย่อยหรือตัวเลข)
จากนั้นคุณสามารถกำหนดความสูงของรายการให้ตรงกับพื้นที่ที่คุณต้องการเติม ฉันเลือก 2em สำหรับความสูงของฉันเนื่องจากขนาดตัวอักษรมาตรฐานสองเท่าและให้ครึ่งทางด้านบนและด้านล่างของข้อความในแท็บ ความสูง: 2em; แต่คุณสามารถตั้งค่าความกว้างได้ไม่ว่าคุณจะต้องการขนาดใดก็ตาม แท็ก UL จะทำงานโดยอัตโนมัติ 100% ของความกว้างดังนั้นหากคุณต้องการให้มีขนาดเล็กกว่าคอนเทนเนอร์ปัจจุบันคุณสามารถปล่อยให้ความกว้างออกได้
สุดท้ายหาก สไตล์ชีตต้นแบบ ของคุณไม่มีการตั้งค่าล่วงหน้าสำหรับแท็ก UL และ OL คุณจะต้องการนำเข้ามาซึ่งหมายความว่าคุณควรปิดเส้นขอบขอบและส่วนรองลงบน UL ของคุณ padding: 0; margin: 0; ชายแดน: ไม่มี; หากคุณได้ตั้งค่าแท็ก UL ไว้แล้วคุณสามารถเปลี่ยนระยะขอบการขยายหรือขอบให้พอดีกับสิ่งที่เหมาะกับการออกแบบของคุณ
ชั้นสุดท้ายของคุณ .tablist ควรมีลักษณะดังนี้:
.tablist {list-style: none; ความสูง: 2em; padding: 0; margin: 0; ชายแดน: ไม่มี; }04 จาก 06
การแก้ไขรายการลิสต์
เมื่อคุณกำหนดรูปแบบรายการที่เรียงลำดับแล้วคุณจะต้องจัดรูปแบบแท็ก LI ภายในช่องดังกล่าว มิฉะนั้นจะทำหน้าที่เหมือนรายการมาตรฐานและย้ายไปยังบรรทัดถัดไปโดยไม่ต้องวางแท็บอย่างถูกต้อง
ขั้นแรกตั้งค่าคุณสมบัติตามสไตล์ของคุณ:
.tablist li {}จากนั้นคุณต้องการลอยแท็บของคุณเพื่อให้วางแนวบนระนาบแนวนอน ลอย: ด้านซ้าย;
และอย่าลืมเพิ่มส่วนต่างระหว่างแท็บเพื่อไม่ให้ผสานเข้าด้วยกัน ขอบขวา: 0.13em;
รูปแบบลีของคุณควรมีลักษณะดังนี้:
.tablist li {float: left; ขอบขวา: 0.13em; }05 จาก 06
ทำให้แท็บมีลักษณะเหมือนกับแท็บด้วย CSS 3
ในการทำแบบยกน้ำหนักส่วนใหญ่ในสไตล์ชีตนี้ฉันกำลังกำหนดเป้าหมายลิงก์ภายในรายการที่ไม่มีลำดับ เบราว์เซอร์ตระหนักดีว่าลิงก์ทำสิ่งต่างๆบนหน้าเว็บมากกว่าแท็กอื่น ๆ ดังนั้นเบราว์เซอร์รุ่นเก่าจึงสามารถปฏิบัติตามสิ่งต่างๆเช่นรัฐเลื่อนได้หากเบราว์เซอร์ยึดติดกับแท็ก anchor (ลิงก์) ก่อนอื่นให้เขียนคุณสมบัติตามสไตล์ของคุณ:
.tablist li a {} .tablist li a: hover {}เนื่องจากแท็บเหล่านี้ควรทำหน้าที่เหมือนแท็บในแอปพลิเคชันคุณจึงต้องการให้พื้นที่ทั้งหมดของแท็บสามารถคลิกได้ไม่ใช่เฉพาะข้อความที่เชื่อมโยง ในการทำเช่นนี้คุณต้องแปลงแท็ก A จากสถานะ " แบบอินไลน์ " ตามปกติเป็น องค์ประกอบบล็อก จอแสดงผล: บล็อก; (หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่างให้อ่าน องค์ประกอบระดับบล็อกกับองค์ประกอบแบบอินไลน์ )
จากนั้นใช้วิธีง่ายๆในการบังคับแท็บให้สมมาตรกับอีกคนหนึ่ง แต่ยังคงบิดให้พอดีกับความกว้างของข้อความเพื่อให้ช่องว่างด้านซ้ายและด้านขวาเหมือนกัน ฉันใช้คุณสมบัติชวเลข padding เพื่อตั้งค่าด้านบนและด้านล่างเป็น 0 และด้านขวาและซ้ายเพื่อ 1em padding: 0 1em;
ฉันยังเลือกที่จะลบลิงก์ที่ขีดเส้นใต้เพื่อให้แท็บดูน้อยลงเช่นลิงก์ แต่ถ้าผู้ชมของคุณอาจจะสับสนโดยที่ปล่อยให้ออกบรรทัดนี้ การเชื่อมโยงการตกแต่ง: ไม่มี;
การวางเส้นขอบบาง ๆ ไว้รอบแท็บจะทำให้มีลักษณะเป็นแท็บ ฉันใช้คุณสมบัติชวเลขชิ่งเพื่อวางเส้นขอบชายแดนทั้งสี่ด้าน: 0.06em แข็ง # 000; จากนั้นใช้คุณสมบัติ ด้านล่าง เพื่อลบออกจากด้านล่าง ขอบล่าง: 0;
จากนั้นฉันได้ทำการปรับเปลี่ยนสีแบบอักษรสีและสีพื้นหลังของแท็บ ตั้งค่าเหล่านี้เป็นรูปแบบที่ตรงกับไซต์ของคุณ ตัวอักษร: หนา 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; สีพื้นหลัง: # CCC;
ทุกรูปแบบข้างต้นควรไปใน selector .tablist li กฎเพื่อให้มีผลต่อแท็ก anchor โดยทั่วไป จากนั้นเพื่อให้แท็บปรากฏขึ้นคลิกมากขึ้นคุณควรเพิ่มกฎสถานะไม่กี่. tablist li a: hover
ฉันต้องการเปลี่ยนสีของข้อความและพื้นหลังเพื่อทำให้แท็บปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปวางไว้ พื้นหลัง: # 3cf; สี: # fff;
และฉันได้รวมการแจ้งเตือนไปยังเบราว์เซอร์อื่นที่ฉันต้องการให้ลิงก์ดังกล่าวไม่ขีดเส้นใต้ ตกแต่งข้อความ: none; อีกวิธีหนึ่งที่ใช้กันทั่วไปคือการเปิดขีดเส้นใต้เมื่อคุณเลื่อนเมาส์ไปที่แท็บ ถ้าคุณต้องการทำเช่นนั้นให้เปลี่ยนเป็นข้อความตกแต่ง: ขีดเส้นใต้;
แต่ CSS 3 อยู่ตรงไหน?
ถ้าคุณให้ความสนใจคุณอาจสังเกตเห็นว่ายังไม่มีสไตล์ CSS 3 ที่ใช้ในสไตล์ชีต ข้อดีของการทำงานในเบราว์เซอร์สมัยใหม่เช่น Internet Explorer แต่ก็ไม่ได้ทำให้แท็บมีลักษณะเป็นมากกว่ากล่องสี่เหลี่ยม การเพิ่มรัศมีขอบของสไตล์ CSS 3 (และเป็นเบราว์เซอร์ที่เกี่ยวข้องกับเบราเซอร์) คุณสามารถทำให้ขอบโค้งมนได้ดูมากขึ้นเช่นแท็บในโฟลเดอร์ manila
สไตล์ที่คุณควรเพิ่มลงใน. tablist li คือกฎ: -webkit-border-top-right-radius: 0.50em; -webkit-border-บนซ้ายรัศมี: 0.50em; -moz-border-radius-รายนามสมาชิก: 0.50em; -moz-border-radius-topleft: 0.50em; ขอบด้านบนขวารัศมี: 0.50em; ขอบด้านบนซ้ายรัศมี: 0.50em;
เหล่านี้เป็นกฎสไตล์สุดท้ายที่ฉันเขียนไว้:
.tablist li a {display: block; padding: 0 1em; ตกแต่งข้อความ: none; border: 0.06em solid # 000; ขอบล่าง: 0; ตัวอักษร: หนา 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; สีพื้นหลัง: # CCC; / * CSS 3 elements * / webkit-border-top-right-radius: 0.50em; -webkit-border-บนซ้ายรัศมี: 0.50em; -moz-border-radius-รายนามสมาชิก: 0.50em; -moz-border-radius-topleft: 0.50em; ขอบด้านบนขวารัศมี: 0.50em; ขอบด้านบนซ้ายรัศมี: 0.50em; } .tablist li a: เลื่อน {พื้นหลัง: # 3cf; สี: # fff; ตกแต่งข้อความ: none; }ด้วยรูปแบบเหล่านี้คุณมีเมนูแบบแท็บที่ทำงานได้ในเบราว์เซอร์หลัก ๆ ทั้งหมดและดูเหมือนแท็บที่พิมพ์ได้ดีในเบราว์เซอร์ที่รองรับ CSS 3 หน้าถัดไปช่วยให้คุณเลือกอีกหนึ่งอย่างที่คุณสามารถใช้เพื่อแต่งแต้มได้มากยิ่งขึ้น
06 จาก 06
เน้นแท็บปัจจุบัน
ใน HTML ที่ฉันสร้างไว้ UL มีองค์ประกอบรายการหนึ่งที่มีรหัส นี้ช่วยให้คุณสามารถให้ LI หนึ่งสไตล์ที่แตกต่างจากส่วนที่เหลือ สถานการณ์ที่พบบ่อยที่สุดคือทำให้แท็บปัจจุบันโดดเด่นในบางกรณี อีกวิธีหนึ่งในการคิดนี้ก็คือคุณต้องการให้สีเทาออกจากแท็บที่ไม่ได้ใช้งานอยู่ จากนั้นให้คุณเปลี่ยนตำแหน่งที่อยู่ในหน้าต่างๆ
ฉันใช้ทั้ง #current แท็ก A และ #current A: hover sta เพื่อให้ทั้งสองต่างกันเล็กน้อย คุณสามารถเปลี่ยนสีพื้นหลังแม้ความสูงความกว้างและส่วนรองขององค์ประกอบนั้นได้ สร้างความเปลี่ยนแปลงให้เหมาะสมกับการออกแบบของคุณ
.tablist li # current a {background-color: # 777; สี: #fff; } .tablist li # ปัจจุบัน a: เลื่อน {พื้นหลัง: # 39C; }เสร็จแล้ว! คุณเพิ่งสร้างเมนูแบบแท็บสำหรับเว็บไซต์ของคุณ