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