คำแนะนำฉบับสมบูรณ์เกี่ยวกับเมนูแบบเลื่อนลงใน Dreamweaver

เมนูแบบเลื่อนลงเป็นหนึ่งในเอฟเฟกต์ที่พบบ่อยที่สุดบนอินเทอร์เน็ต เพียงคลิกหรือเลื่อนเมาส์ไปเหนือ จากนั้นเมนูที่มีรายละเอียดมากขึ้นจะปรากฏขึ้น ไม่เพียงช่วยประหยัดพื้นที่บนเค้าโครงหน้าเว็บ แต่ยังทำให้เค้าโครงหน้าเว็บกระชับและ เป็นระเบียบแต่ยังนวนิยาย เมนูแบบเลื่อนลงที่สวยงามช่วยเพิ่มสีสันให้กับหน้าเว็บของคุณ
มีหลายวิธีในการสร้างเมนูแบบเลื่อนลง คอลัมน์นี้จะแนะนำวิธีการที่ใช้กันทั่วไปสี่วิธี ซึ่งช่วยให้คุณสร้างเมนูแบบเลื่อนลงของคุณเองได้ตามที่คุณต้องการ

■ ใช้ Dreamweaver เพื่อสร้างเมนูแบบเลื่อนลง

??Dreamweaver เป็นเครื่องมือที่ใช้กันมากที่สุดสำหรับการทำเมนูแบบเลื่อนลง มีวิธีการง่ายๆ และการควบคุมแบบอิสระ สามารถสร้างรูปแบบเมนูได้ในระดับสูงสุด
หลักการของการใช้ Dreamweaver เพื่อสร้างเมนูแบบเลื่อนลงนั้นง่ายมาก โดยใช้วิธีการ Show-Hide Layers ในตัวในแผงพฤติกรรม และใช้ onMouseOver (เลื่อนเมาส์ไปที่) และ onMouseOut (เลื่อนเมาส์ออกไป) เพื่อ ทริกเกอร์การซ่อนและการแสดงเลเยอร์ และเมนูที่จะปรากฏขึ้นจะอยู่ในเลเยอร์
??ดังนั้นเราจึงสามารถสร้างเมนูแบบเลื่อนลงได้ในสี่ขั้นตอน ขั้นแรก เราจำเป็นต้องมีแถบนำทางซึ่งใช้สำหรับวางเมนูหลักที่ปรากฏต่อหน้าผู้ชมเป็นอันดับแรก จากนั้น เราจึงสร้างเมนูแบบเลื่อนลงนั้น จะปรากฏขึ้นหลังจากถูกซ่อน จากนั้น ขั้นตอนที่สำคัญที่สุดคือการเพิ่มเอฟเฟกต์ของการซ่อนและการแสดงเลเยอร์ให้กับเมนูหลักและเมนูแบบเลื่อนลง ในที่สุด เราก็ตกแต่งเมนูให้สวยงาม ผลลัพธ์สุดท้ายที่คุณเห็นดังแสดงในรูป คุณยังสามารถไปที่ที่อยู่ต่อไปนี้: menu.htm

??ฉันเชื่อว่าคุณรอไม่ไหวแล้ว ดังนั้นมาเริ่มกันเลยดีกว่า!

1. การผลิตแถบนำทาง

ขั้นแรก ให้ดำเนินการเบื้องต้นที่จำเป็น กด CTRL+J เพื่อเปิดหน้าต่าง Page Properties การตั้งค่าพารามิเตอร์ดังแสดงในรูปที่ 2 การตั้งค่านี้จะมีผลกระทบต่อตำแหน่งของเมนู ดังนั้นโปรดตั้งค่าดังที่แสดงใน รูปภาพ.

กด CTRL+F2 เพื่อเปิดแผงวัตถุแล้วคลิกปุ่มเลเยอร์ สุดท้ายให้กดเมาส์ค้างไว้แล้วลากเลเยอร์บนหน้า จากนั้นตั้งค่าพารามิเตอร์ในแผงคุณสมบัติของเลเยอร์ กรอกชื่อลงในช่อง Layer ID และกรอกข้อมูลลงในช่อง L, T, W และ H ด้วย 8, 15 และ 15 ตามลำดับ 480, 15 เติมสีพื้นหลังด้วย #006699 ดังภาพ

เลื่อนเคอร์เซอร์ไปภายในเลเยอร์แล้วคลิกปุ่มตารางบนแผงวัตถุ ให้แทรกตารางที่มีหนึ่งแถวและสี่คอลัมน์แล้วตั้งค่าดังแสดงในรูป

กดปุ่ม CTRL ค้างไว้แล้วคลิกที่สี่เซลล์ของตาราง จากนั้นตั้งค่าความกว้างเป็น 120 และป้อนข้อความในสองเซลล์แรกซึ่งเป็นชื่อของเมนูหลักของคุณ คุณสามารถป้อนชื่อที่คุณต้องการได้ "Classic Forum" และ "Tianji.com" เป็นตัวอย่างและเพิ่มลิงก์

2. การสร้างเมนูแบบเลื่อนลง

ตอนนี้เริ่มสร้างเมนูที่จะปรากฏเป็นดรอปดาวน์โดยใช้เลเยอร์ด้วย
แทรกเลเยอร์จากแผงออบเจ็กต์อีกครั้งใต้แถบนำทางที่เราสร้างไว้ก่อนหน้านี้ กรอกพารามิเตอร์ดังนี้: กรอกกล่อง ID เลเยอร์ด้วยเมนู 1 กรอกในกล่อง L, T, W และ H ด้วย 8, 34, 120 และ 80 ตามลำดับ เติมสีพื้นหลังด้วย #999966 พารามิเตอร์สองตัว L และ T จะต้องกำหนดระยะห่างระหว่างเลเยอร์นี้กับเส้นขอบด้านซ้ายและด้านบนของหน้าต่าง จะถูกวางผิดที่และการใช้งานหลังจากเสร็จสิ้นจะได้รับผลกระทบ

ในตอนนี้เราสามารถเข้าสู่เนื้อหาเมนูที่เราต้องการในเลเยอร์ menu1 ได้ เพื่อความสะดวกในการจัดวาง ฉันยังคงใช้ตารางเพื่อสร้างเมนูที่นี่ เลเยอร์นี้จะปรากฏเป็นเมนูแบบเลื่อนลงสำหรับ "Classic Forum" กรอกลิงก์เมนูที่คุณต้องการ ในทำนองเดียวกัน ให้สร้างเมนูแบบเลื่อนลง (เมนูเลเยอร์ 2) สำหรับ "Tianji.com"

สิ่งที่ควรสังเกตในขั้นตอนนี้คือตำแหน่งของเลเยอร์ (เมนู 1, เมนู 2) ซึ่งเป็นที่ตั้งของเมนูแบบเลื่อนลงนั้นมีความสำคัญมาก (พิจารณาจากพารามิเตอร์สองตัว L และ T) ขอบบนควรอยู่ใกล้กับขอบล่างของแถบนำทาง เพื่อให้แน่ใจว่าเมนูสามารถใช้งานได้ตามปกติหลังจากที่เราทำตามขั้นตอนที่สามเสร็จแล้ว เพราะหากคุณอยู่ห่างจากแถบนำทาง เมนูจะหายไปทันทีที่เมาส์ออกจากแถบนำทาง
กด F2 เพื่อเปิดแผง LAYER ซึ่งแสดงรายการสามเลเยอร์ในหน้าเว็บ คลิกที่ช่องว่างด้านหน้าเมนู 1 และเมนู 2 จากนั้นไอคอนรูปตาปิดจะปรากฏขึ้น และสองชั้นนี้จะถูกซ่อนไว้ ขั้นตอนนี้เสร็จสิ้นเนื่องจากมองไม่เห็นสถานะเริ่มต้นของเมนูแบบเลื่อนลง

3. การเพิ่มเอฟเฟกต์การแสดงและซ่อน

ขั้นตอนนี้เป็นขั้นตอนสำคัญในการเปลี่ยนความเสื่อมโทรมให้เป็นเวทมนตร์ โปรดติดตามฉันอย่างระมัดระวัง
ขั้นตอนนี้แบ่งออกเป็นสองส่วน: ขั้นแรก เพิ่มคำสั่งเพื่อควบคุมการแสดงผลและการซ่อนเมนูหลักในแถบนำทาง ประการที่สอง เพิ่มคำสั่งเพื่อควบคุมการแสดงผลและการซ่อนเมนูแบบเลื่อนลง

1. ในส่วนแถบนำทาง ขั้นแรกให้กดปุ่ม CTRL ค้างไว้แล้วคลิกเซลล์แรกในแถบนำทาง จากนั้นกด Shift+F3 เพื่อเปิดหน้าต่างพฤติกรรมแล้วคลิก และเลือก "แสดง-ซ่อนเลเยอร์" ในตัวเลือกแบบเลื่อนลง (ดังแสดงในภาพ) หากไม่มีรายการดังกล่าวในตัวเลือก ให้เลือก IE 5.0 ใต้ Show Events For คลิกปุ่มอีกครั้ง จากนั้น "Show-Hide Layers" จะปรากฏขึ้น

จะปรากฎหน้าต่างดังภาพด้านล่าง ในกล่อง Named Layers เลเยอร์ทั้งหมดของหน้าเว็บปัจจุบันจะถูกแสดงรายการ เลือก "layer "menu1" " เพราะเราต้องการให้เลเยอร์ menu1 ตอบสนองต่อ "Classic Forum" จากนั้นคลิกปุ่ม "แสดง" ด้านล่างและตกลง

ในเวลานี้ คุณจะกลับไปที่หน้าต่าง Behaviors และคำที่แสดงด้านล่างจะปรากฏในหน้าต่าง คลิกข้อความ "onClick" ใต้เหตุการณ์ และลูกศรชี้ลงเล็กๆ จะปรากฏขึ้น คลิกแล้วเลือก onMouseOver ในเมนูแบบเลื่อนลง ตัวเลือกลง วัตถุประสงค์ของขั้นตอนนี้คือการเปลี่ยนสถานะของเมนูแบบเลื่อนลง menu1 เป็น แสดงเมื่อเมาส์เลื่อนไปที่เซลล์แรก

ขั้นตอนต่อไปคือการซ่อนเมนูแบบเลื่อนลง menu2 เมื่อเลื่อนเมาส์ไปที่เซลล์ที่สอง
สั่งซื้ออีกครั้ง เลือก "แสดง-ซ่อนเลเยอร์" ในตัวเลือกแบบเลื่อนลง และเลือก "เลเยอร์ "เมนู1" " ในหน้าต่างป๊อปอัป เพราะเราต้องการให้เลเยอร์เมนู1 ตอบสนองต่อ "ฟอรัมคลาสสิก" จากนั้นคลิกปุ่ม "ซ่อน" ด้านล่างและตกลง

กลับไปที่หน้าต่าง Behaviors คลิกลูกศรชี้ลงเล็กๆ และเลือก onMouseOut ในตัวเลือกแบบเลื่อนลง

2. ในส่วนของเมนูแบบเลื่อนลง ขั้นแรกให้เลือกเมนูเลเยอร์ 1 โดยคลิกที่ขอบของเลเยอร์หรือคลิกเมนู 1 ในแผงเลเยอร์ ใช้วิธีเดียวกับส่วนของแถบนำทางเพื่อเพิ่มคำสั่งเพื่อแสดงและซ่อนตัวเองในหน้าต่างพฤติกรรม . ผลของสิ่งนี้ก็คือเมื่อเมาส์เคลื่อนออกจากเมนูเลเยอร์ 1 เมนูเลเยอร์ 1 จะถูกซ่อนโดยอัตโนมัติ สถานะของเมนูเลเยอร์สุดท้าย1 ดังแสดงในรูป

3. ทำซ้ำสองส่วนข้างต้นและเพิ่มคำสั่งแสดงและซ่อนเลเยอร์สำหรับเมนูหลักที่สอง "Tianji.com" และเมนูเลเยอร์ 2 ของแถบนำทาง

4. ความสวยงามและการปรับเปลี่ยนเมนูแบบเลื่อนลง

ณ จุดนี้ เอฟเฟ็กต์การทำงานของเมนูแบบเลื่อนลงได้ถูกนำมาใช้แล้ว และคุณสามารถดูได้ทันทีโดยกด F12 อย่างไรก็ตาม คุณต้องพบว่าเมนูดูน่าเกลียดเล็กน้อย แบบอักษรไม่เพียงพอ สีลิงก์เริ่มต้นของตัวเลือกเมนูไม่สวยงาม และเมนูไม่มีเส้นขอบ ดังนั้นให้เราเพิ่มความสวยงามเล็กน้อย .
1. กำหนดรูปแบบแบบอักษรของเมนู กด Shift+F11 เพื่อเปิดแผงสไตล์ CSS และคลิกด้านล่างของแผง ปุ่ม

เลือกแท็ก td ในกล่องแท็กของหน้าต่างป๊อปอัป "สไตล์ใหม่" เลือกรายการที่สอง กำหนดแท็ก HTML ใหม่สำหรับประเภท และเลือกเอกสารนี้เพื่อกำหนดเท่านั้น ดังแสดงในรูป

ในเวลานี้ หน้าต่างการตั้งค่าจะปรากฏขึ้น โดยไม่คำนึงถึงสิ่งอื่นๆ เพียงเลือก 12 ในกล่องขนาดทางด้านขวา และหน่วยเป็นพิกเซล

2. กำหนดรูปแบบลิงก์เมนู ในแผงสไตล์ ให้คลิกปุ่มด้านล่างแผง ในหน้าต่างป๊อปอัป เลือกรายการที่สาม ใช้ตัวเลือก CSS สำหรับประเภท เลือกแท็ก a:hover ในกล่องแท็ก และเลือกเอกสารนี้ สำหรับ Define เท่านั้น ดังแสดงในรูป

หลังจากคลิกตกลง ในหน้าต่างป๊อปอัป กรอก #ff9933 สำหรับสี เลือกไม่มีสำหรับการตกแต่ง และคลิกตกลง

กลับไปที่แผงสไตล์แล้วคลิกด้านล่างแผง ในหน้าต่างป๊อปอัป ให้เลือกรายการที่สาม ใช้ตัวเลือก CSS สำหรับประเภท เลือกแท็ก a:link ในกล่องแท็ก และเลือกเอกสารนี้เพื่อกำหนดเท่านั้น
หลังจากคลิกตกลง ในหน้าต่างป๊อปอัป กรอก #ffffff สำหรับสี เลือกไม่มีสำหรับการตกแต่ง และคลิกตกลง

กลับไปที่แผงสไตล์แล้วคลิกด้านล่างแผง ในหน้าต่างป๊อปอัป ให้เลือกรายการที่สาม ใช้ตัวเลือก CSS สำหรับประเภท เลือกแท็ก a:visited ในกล่องแท็ก และเลือกเอกสารนี้เพื่อกำหนดเท่านั้น
หลังจากคลิกตกลง ในหน้าต่างป๊อปอัป กรอก #ffffff สำหรับสี เลือกไม่มีสำหรับการตกแต่ง และคลิกตกลง

3. กำหนดสไตล์เส้นขอบเมนูในแผงสไตล์ คลิกปุ่มด้านล่างแผง ในหน้าต่างป๊อปอัป เลือกแท็ก td ในกล่องแท็ก เลือกรายการที่สอง กำหนดแท็ก HTML ใหม่สำหรับประเภท และเลือก เอกสารนี้เท่านั้น เพื่อกำหนด ดังแสดงในรูป

หน้าต่างการตั้งค่าจะปรากฏขึ้น เลือก Border ในรายการด้านซ้าย ป้อนความกว้างของทั้งสี่ด้านทางด้านขวาเป็น 1 ตั้งค่าสีเป็นสีดำ #000000 และเลือกทึบเป็นสไตล์

ณ จุดนี้เราก็ทำสำเร็จแล้ว ใช้มันบนหน้าเว็บของคุณตอนนี้