ไม่ว่าจะเป็นเมนูแนวตั้งเป็นแถวแนวนอนที่ด้านบนหรือแนวตั้งลงไปด้านข้างก็ยังคงเป็นเพียงรายการ เมื่อออกแบบการนำทางบนเว็บมักลืมง่ายว่าเมนูนำทางเป็นเพียงลิงก์ที่ได้รับการยกย่อง แต่ถ้าคุณตั้งโปรแกรมการนำทางโดยใช้ XHTML + CSS คุณสามารถสร้างเมนูที่มีขนาดเล็กเพื่อดาวน์โหลด (XHTML) และปรับแต่งได้ง่าย (CSS)
เริ่มต้นใช้งาน
เมื่อต้องการเริ่มต้นการออกแบบรายการสำหรับการนำทางคุณต้องใช้รายการ อาจเป็นรายการตามลำดับมาตรฐานซึ่งได้รับการระบุว่าเป็นการนำทาง:
ถ้าคุณมองไปที่ HTML คุณจะสังเกตเห็นว่าลิงก์ "บ้าน" มีรหัสด้วยเช่นกัน
คุณอยู่ที่นี่. ซึ่งจะช่วยให้คุณสร้างเมนูที่ระบุตำแหน่งปัจจุบันสำหรับผู้อ่านของคุณ แม้ว่าคุณจะไม่ได้วางแผนที่จะมีคิวภาพในไซต์ของคุณในขณะนี้ แต่คุณสามารถใส่ข้อมูลดังกล่าวได้ หากคุณตัดสินใจที่จะเพิ่มคิวในภายหลังคุณจะมีโค้ดน้อยลงเพื่อเตรียมไซต์ของคุณ
หากไม่มีสไตล์ CSS เมนู XHTML นี้จะมีลักษณะเป็นรายการที่เรียงลำดับมาตรฐาน มีสัญลักษณ์แสดงหัวข้อย่อยและรายการที่มีการเยื้องเล็กน้อย เนื่องจากฉันใช้ลิงก์ตัวยึดตำแหน่งเบราว์เซอร์ส่วนใหญ่จะไม่แสดงลิงก์ที่คลิกได้ (ขีดเส้นใต้และเป็นสีน้ำเงิน) หากคุณวาง HTML ด้านบนไว้ในเว็บเพจการนำทางของคุณจะมีลักษณะดังนี้:
- บ้าน
- ผลิตภัณฑ์
- บริการ
- ติดต่อเรา
นี่ดูน่าเบื่อและดูไม่เหมือนเมนู แต่ด้วยสไตล์ CSS เพียงไม่กี่รายการที่เพิ่มเข้าไปในรายการคุณสามารถสร้างเมนูที่ทำให้คุณรู้สึกภาคภูมิใจ
เมนูนำร่องในแนวตั้ง
เมนูนำทางแบบแนวตั้งเป็นเรื่องง่ายมากที่จะเขียนเพราะจะแสดงในลักษณะเดียวกับรายการปกติ: ขึ้นและลง รายการที่แสดงในแนวตั้งลงหน้า
เมื่อฉันจัดแต่งทรงผมเมนูผมชอบที่จะเริ่มต้นที่ด้านนอกและการทำงานมาจากนี้ผมหมายถึงว่าฉันแรกสไตล์
ยู # นำทาง แล้วย้ายไปที่
ลี้ องค์ประกอบและจากนั้นการเชื่อมโยง ฯลฯ ดังนั้นสำหรับเมนูนี้ก่อนอื่นคุณต้องกำหนดความกว้างของเมนู การทำเช่นนี้จะช่วยให้มั่นใจได้ว่าแม้ว่ารายการในเมนูจะยาวนาน แต่ก็จะไม่ผลักดันส่วนที่เหลือของเค้าโครงหรือทำให้เลื่อนแนวนอน
ul # navigation {width: 12em; }
เมื่อฉันมีชุดความกว้างแล้วฉันสามารถเล่นกับรายการได้ ซึ่งช่วยให้ฉันสามารถกำหนดสิ่งต่างๆเช่น (เพื่อกำจัดสัญลักษณ์แสดงหัวข้อย่อย) สีพื้นหลังเส้นขอบการจัดตำแหน่งข้อความและระยะขอบ
ul # navigation li {รายการสไตล์: ไม่มี;สีพื้นหลัง: # 039;border-top: แบบทึบ 1px # 039;text-align: left;margin: 0;} เมื่อคุณได้ตั้งค่าพื้นฐานสำหรับรายการที่คุณสามารถเริ่มเล่นกับลักษณะเมนูในพื้นที่ลิงก์ได้ สไตล์แรก UL # navigation LI Aแล้ว A: การเชื่อมโยง, A: เยี่ยมชม, A: เลื่อน, และ A: การใช้งาน (ถ้าคุณต้องการ) สำหรับการเชื่อมโยงฉันชอบที่จะทำให้การเชื่อมโยงองค์ประกอบบล็อก (แทนที่จะเป็นค่าเริ่มต้นในบรรทัด) บังคับให้พวกเขาใช้พื้นที่ทั้งหมดของ LI- และพวกเขากระทำมากขึ้นเช่นย่อหน้าซึ่งทำให้ง่ายต่อการสไตล์เป็นปุ่มเมนูสิ่งอื่น ๆ ที่ฉันมักจะทำคือการลบขีดเส้นใต้ ( ตกแต่งข้อความ: ไม่มี;) เช่นนี้ทำให้ปุ่มมีลักษณะเหมือนปุ่มให้ฉันมากขึ้น แต่แน่นอนว่าการออกแบบของคุณอาจแตกต่างออกไป ul # navigation li a {แสดง: บล็อก;ตกแต่งข้อความ: ไม่มี;padding: .25em;border-bottom: solid 1px # 39f;border-right: solid 1px # 39f;} สังเกตว่าด้วย แสดง: บล็อก; ตั้งอยู่บนการเชื่อมโยงทั้งกล่องของรายการเมนูสามารถคลิกได้ไม่เพียง แต่ตัวอักษร นี่เป็นสิ่งที่ดีสำหรับการใช้งาน ตรวจสอบให้แน่ใจว่าได้ตั้งค่าสีลิงก์ (ลิงก์เยี่ยมชมเลื่อนเมาส์และใช้งานอยู่) ถ้าคุณต้องการให้สีต่างๆแตกต่างจากสีฟ้าสีแดงและสีม่วงเริ่มต้น a: link, a: visited {color: #fff; }a: hover, a: active {color: # 000; } ฉันยังต้องการให้สถานะเลื่อนสถานะให้ความสนใจอีกเล็กน้อยโดยการเปลี่ยนสีพื้นหลัง a: เลื่อน {background-color: #fff; } หากคุณต้องการตัวอย่างเมนูแนวตั้งเพิ่มเติมโปรดดูรายการด้านล่างนี้ การสร้างเมนูนำทางในแนวนอนค่อนข้างยากกว่าเมนูการนำทางแนวตั้งเพราะคุณต้องชดเชยข้อเท็จจริงที่ว่ารายการ HTML ต้องการแสดงในแนวตั้ง เช่นเดียวกับเมนูแนวนอนก่อนอื่นให้สร้างรายการเมนูการนำทาง:
หากต้องการสร้างเมนูแนวนอนให้ใช้งานได้เหมือนกับเมนูแนวตั้ง เริ่มต้นด้วยด้านนอกและทำงานมาตั้งแต่ฉันต้องการให้ระบบนำทางของฉันเริ่มต้นที่มุมซ้ายฉันจะตั้งค่าขอบซ้ายและช่องว่างซ้ายไว้และฉันจะลอยไปทางซ้าย คุณควรจะได้รับในนิสัยของการตั้งค่าความกว้างเพื่อให้เมนูของคุณไม่ใช้พื้นที่มากหรือน้อยกว่าที่คุณตั้งใจ สำหรับเมนูแนวนอนมักเป็นความกว้างเต็มของการออกแบบ ฉันยังเพิ่มสีพื้นหลังลงในรายการทั้งหมดเพื่อให้อ่านได้ง่ายขึ้น ul # navigation {ลอย: ซ้าย;margin: 0;padding: 0;ความกว้าง: 100%;สีพื้นหลัง: # 039;} แต่ความลับของเมนูการนำทางแนวนอนอยู่ในรายการ รายการปกติเป็นองค์ประกอบของบล็อกซึ่งหมายความว่าพวกเขาจะมีบรรทัดใหม่ที่วางไว้ก่อนและหลังแต่ละอัน โดยการเปลี่ยนหน้าจอจาก กลุ่ม ไปยัง แบบอินไลน์คุณบังคับให้รายการองค์ประกอบเรียงแถวกันไปตามแนวนอน ul # navigation li {display: inline; } ฉันถือว่าการเชื่อมโยงตรงกับที่ฉันปฏิบัติกับพวกเขาในเมนูนำทางแนวตั้งที่มีสีเดียวกันและการตกแต่งข้อความ ฉันเพิ่มเส้นขอบด้านบนเพื่อวาดภาพปุ่มเมื่อวางเมาส์เหนือ สิ่งเดียวที่ถูกลบออกคือ แสดง: บล็อก; เป็นที่จะทำให้ newlines กลับเข้ามาและทำลายเมนูแนวนอน ul # navigation li a {ตกแต่งข้อความ: ไม่มี;padding: .25em 1em;border-bottom: solid 1px # 39f;border-top: แบบทึบ 1px # 39f;border-right: solid 1px # 39f;}a: link, a: visited {color: #fff; }ul # navigation li a: hover {สีพื้นหลัง: #fff;สี: # 000;} อีกแง่มุมหนึ่งของ HTML คือตัวระบุ คุณอยู่ที่นี่. ถ้าคุณต้องการแก้ไขเมนูเพื่อระบุตำแหน่งปัจจุบันของผู้ใช้ของคุณเพียงแค่ใช้ข้อมูลนี้ ID เพื่อกำหนดสีพื้นหลังที่แตกต่างกันหรือสไตล์อื่น ย้ายแอตทริบิวต์นั้น ID ไปยังรายการเมนูที่ถูกต้องบนหน้าอื่น ๆ เพื่อให้หน้าปัจจุบันถูกเน้นเสมอ ul # navigation li # youarehere a {background-color: # 09f; } หากคุณใส่สไตล์ไว้ด้วยกันบนหน้าเว็บคุณสามารถสร้างแถบเมนูแนวนอนหรือแนวตั้งที่เหมาะกับไซต์ของคุณ แต่สามารถดาวน์โหลดและอัปเดตได้ง่ายในอนาคต การใช้ XHTML + CSS จะเปลี่ยนรายชื่อของคุณให้เป็นเครื่องมือที่มีประสิทธิภาพมากสำหรับการออกแบบ หากต้องการดูตัวอย่างเมนูแนวนอนเพิ่มเติมโปรดศึกษาข้อมูลต่อไปนี้
เมนูการนำทางแนวนอน
คุณอยู่ที่นี่ข้อมูลสถานที่
