การนำทางบนหน้าเว็บเป็นรูปแบบของรายการและการนำทางแบบแท็บก็เหมือนกับรายการในแนวนอน การสร้างการนำทางแบบแท็บแนวนอนด้วย CSS เป็นเรื่องที่ค่อนข้างง่าย แต่ CSS 3 ทำให้เรามีเครื่องมือเพิ่มเติมเพื่อให้ดูดีขึ้น
บทแนะนำนี้จะนำคุณผ่าน HTML และ CSS ที่จำเป็นในการสร้างเมนูแบบแท็บ CSS คลิกที่ลิงค์เพื่อดูว่าจะดูอย่างไร
เมนูแบบแท็บนี้ใช้ไม่มีภาพเพียง HTML และ CSS 2 และ CSS 3. สามารถแก้ไขได้อย่างง่ายดายเพื่อเพิ่มแท็บเพิ่มเติมหรือเปลี่ยนข้อความในไฟล์เหล่านั้น
การสนับสนุนเบราว์เซอร์
เมนูแท็บนี้จะทำงานมาเบราว์เซอร์หลัก ๆ ทั้งหมด. Internet Explorer จะไม่แสดงมุมโค้งมน แต่อย่างอื่นจะแสดงแท็บเช่น Firefox, Safari, Opera และ Chrome
เขียนรายการเมนูของคุณ
เมนูนำทางและแท็บทั้งหมดเป็นเพียงรายการที่เรียงลำดับเท่านั้น ดังนั้นสิ่งแรกที่คุณต้องทำคือเขียนรายการที่ไม่เรียงลำดับของลิงก์ไปยังตำแหน่งที่คุณต้องการให้การนำทางแบบแท็บไป
กวดวิชานี้สมมติว่าคุณกำลังเขียน HTML ในโปรแกรมแก้ไขข้อความและทราบว่าคุณควรวาง HTML สำหรับเมนูบนหน้าเว็บของคุณ
เขียนรายการที่ไม่เรียงลำดับของคุณเช่นนี้:
class = "tablist">CSS 3id = "ปัจจุบัน"> แท็บสำหรับเมนู
class = "tablist"และid = "ปัจจุบัน"ข้อแรกคือ จำเป็นต้องใช้. ถ้าคุณไม่ใส่tablistclass ในรายการที่เรียงลำดับของคุณแท็บจะไม่ทำงาน ตัวเลือกที่สองเป็นตัวเลือก ใส่id = "ปัจจุบัน"บนแท็บใดก็ตามที่คุณต้องการเน้นที่หน้านั้น เราใช้ตัวเลือกนี้เพื่อเน้นหน้าเว็บที่เราใช้ แต่คุณสามารถใช้เพื่อไฮไลต์แท็บที่สำคัญที่สุดได้ หรือคุณสามารถนำออกได้อย่างสมบูรณ์
เริ่มแก้ไขสไตล์ชีตของคุณ
คุณสามารถใช้สไตล์ชีตภายนอกหรือสไตล์ชีตภายในก็ได้ หน้าเมนูตัวอย่างใช้แผ่นงานสไตล์ภายในในโฟลเดอร์
ของเอกสารก่อนอื่นเราจะจัดรูปแบบ UL เอง
นี่คือที่ที่เราใช้ชั้นเรียนtablist ใน HTML แทนที่จะจัดรูปแบบแท็ก UL ซึ่งจะเรียงลำดับรายการที่เรียงลำดับทั้งหมดในหน้าเว็บของคุณคุณควรกำหนดรูปแบบเฉพาะชั้น ULtablist ดังนั้นรายการแรกใน 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; ชายแดน: ไม่มี; }
การแก้ไขรายการลิสต์
เมื่อคุณกำหนดรูปแบบรายการที่เรียงลำดับแล้วคุณจะต้องจัดรูปแบบแท็ก LI ภายในช่องดังกล่าว มิฉะนั้นจะทำหน้าที่เหมือนรายการมาตรฐานและย้ายไปยังบรรทัดถัดไปโดยไม่ต้องวางแท็บอย่างถูกต้อง
ขั้นแรกตั้งค่าคุณสมบัติตามสไตล์ของคุณ:
.tablist li {}
จากนั้นคุณต้องการลอยแท็บของคุณเพื่อให้วางแนวบนระนาบแนวนอน ลอย: ด้านซ้าย;
และอย่าลืมเพิ่มส่วนต่างระหว่างแท็บเพื่อไม่ให้ผสานเข้าด้วยกัน ขอบขวา: 0.13em;
รูปแบบลีของคุณควรมีลักษณะดังนี้:
.tablist li {float: left; ขอบขวา: 0.13em; }
ทำให้แท็บมีลักษณะเหมือนกับแท็บด้วย CSS 3
ในการทำแบบยกน้ำหนักส่วนใหญ่ในสไตล์ชีตนี้เรากำลังกำหนดเป้าหมายลิงก์ภายในรายการที่ไม่ได้เรียงลำดับ เบราว์เซอร์ตระหนักดีว่าลิงก์ทำสิ่งต่างๆบนหน้าเว็บมากกว่าแท็กอื่น ๆ ดังนั้นเบราว์เซอร์รุ่นเก่าจึงสามารถปฏิบัติตามสิ่งต่างๆเช่นรัฐเลื่อนได้หากเบราว์เซอร์ยึดติดกับแท็ก anchor (ลิงก์) ก่อนอื่นให้เขียนคุณสมบัติตามสไตล์ของคุณ:
.tablist li a {} .tablist li a: hover {}
เนื่องจากแท็บเหล่านี้ควรทำหน้าที่เหมือนแท็บในแอปพลิเคชันคุณจึงต้องการให้พื้นที่ทั้งหมดของแท็บสามารถคลิกได้ไม่ใช่เฉพาะข้อความที่เชื่อมโยง ในการทำเช่นนี้คุณต้องแปลงแท็ก A จากสถานะ "แบบอินไลน์" ตามปกติเป็นองค์ประกอบบล็อก จอแสดงผล: บล็อก; (หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่างให้อ่านองค์ประกอบระดับบล็อกกับองค์ประกอบแบบอินไลน์)
จากนั้นใช้วิธีง่ายๆในการบังคับแท็บให้สมมาตรกับอีกคนหนึ่ง แต่ยังคงบิดให้พอดีกับความกว้างของข้อความเพื่อให้ช่องว่างด้านซ้ายและด้านขวาเหมือนกัน เราใช้คุณสมบัติชวเลขของ padding เพื่อตั้งค่าด้านบนและด้านล่างเป็น 0 และด้านขวาและซ้ายเพื่อ 1em padding: 0 1em;
นอกจากนี้เราเลือกที่จะลบลิงก์ที่ขีดเส้นใต้เพื่อให้แท็บดูน้อยลงเช่นลิงก์แต่ถ้าผู้ชมของคุณอาจจะสับสนโดยที่ปล่อยให้ออกบรรทัดนี้ การเชื่อมโยงการตกแต่ง: ไม่มี;
การวางเส้นขอบบาง ๆ ไว้รอบแท็บจะทำให้มีลักษณะเป็นแท็บ เราใช้คุณสมบัติชวเลขชิ่งเพื่อวางเส้นขอบทั้งสี่ด้าน border: 0.06em solid # 000; จากนั้นใช้คุณสมบัติด้านล่างเพื่อลบออกจากด้านล่าง ขอบล่าง: 0;
จากนั้นเราได้ปรับแต่งสีแบบอักษรสีและสีพื้นหลังของแท็บ ตั้งค่าเหล่านี้เป็นรูปแบบที่ตรงกับไซต์ของคุณ ตัวอักษร: หนา 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; สีพื้นหลัง: # CCC;
ทุกรูปแบบข้างต้นควรไปในตัวเลือกaกฎเพื่อให้มีผลกับแท็ก anchor โดยทั่วไป จากนั้นเพื่อให้แท็บปรากฏขึ้นคลิกมากขึ้นคุณควรเพิ่มกฎสถานะไม่กี่แห่ง.tablist li a: hover.
เราต้องการเปลี่ยนสีของข้อความและพื้นหลังเพื่อทำให้แท็บปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปวางไว้ พื้นหลัง: # 3cf; สี: # fff;
และเราได้รวมการแจ้งเตือนไปยังเบราว์เซอร์อื่นที่เราต้องการให้ลิงก์ไม่ขีดเส้นใต้ ตกแต่งข้อความ: none; อีกวิธีหนึ่งที่ใช้กันทั่วไปคือการเปิดขีดเส้นใต้เมื่อคุณเลื่อนเมาส์ไปที่แท็บ ถ้าคุณต้องการทำเช่นนั้นให้เปลี่ยนไป ตกแต่งข้อความ: ขีดเส้นใต้;
แต่ CSS 3 อยู่ตรงไหน?
ถ้าคุณให้ความสนใจคุณอาจสังเกตเห็นว่ายังไม่มีสไตล์ CSS 3 ที่ใช้ในสไตล์ชีต ข้อดีของการทำงานในเบราว์เซอร์สมัยใหม่เช่น Internet Explorer แต่จะไม่ทำให้แท็บมีลักษณะเป็นมากกว่ากล่องสี่เหลี่ยม การเพิ่มรัศมีขอบของสไตล์ CSS 3 (และเป็นเบราว์เซอร์ที่เกี่ยวข้องกับเบราเซอร์) คุณสามารถทำให้ขอบโค้งมนได้ดูมากขึ้นเช่นแท็บในโฟลเดอร์ manila
รูปแบบที่คุณควรเพิ่มลงใน a กฎคือ: -webkit พรมแดนด้านบนขวารัศมี: 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 หน้าถัดไปช่วยให้คุณเลือกอีกหนึ่งอย่างที่คุณสามารถใช้เพื่อแต่งแต้มได้มากยิ่งขึ้น
เน้นแท็บปัจจุบัน
ใน HTML ที่เราสร้างขึ้น UL มีองค์ประกอบรายการหนึ่งที่มีรหัส นี้ช่วยให้คุณสามารถให้ LI หนึ่งสไตล์ที่แตกต่างจากส่วนที่เหลือ สถานการณ์ที่พบบ่อยที่สุดคือทำให้แท็บปัจจุบันโดดเด่นในบางกรณี อีกวิธีหนึ่งในการคิดนี้ก็คือคุณต้องการให้สีเทาออกจากแท็บที่ไม่ได้ใช้งานอยู่ จากนั้นให้คุณเปลี่ยนตำแหน่งที่อยู่ในหน้าต่างๆ
เราจัดรูปแบบทั้ง #current tag A และ # current A: hover sta เพื่อให้ทั้งสองต่างกันเล็กน้อย คุณสามารถเปลี่ยนสีพื้นหลังแม้ความสูงความกว้างและส่วนรองขององค์ประกอบนั้นได้ สร้างความเปลี่ยนแปลงให้เหมาะสมกับการออกแบบของคุณ
.tablist li # current a {background-color: # 777; สี: #fff; } .tablist li # ปัจจุบัน a: เลื่อน {พื้นหลัง: # 39C; }
เสร็จแล้ว! คุณเพิ่งสร้างเมนูแบบแท็บสำหรับเว็บไซต์ของคุณ
