ด้วยความช่วยเหลือของโค้ด HTML ที่มีความสามารถและกฎ CSS อย่างง่าย คุณสามารถสร้างเมนูป๊อปอัป เสริม และแก้ไขได้ ด้วยการใช้ตารางเรียงซ้อนและเครื่องมือภาษามาร์กอัป คุณสามารถมั่นใจได้ว่าเมนูจะทำงานอย่างถูกต้องในเบราว์เซอร์ทั้งหมด
คำแนะนำ
ขั้นตอนที่ 1
กดค้างไว้ที่แถบเมนูพื้นฐานก่อน สร้างรายการลำดับเลขพิเศษด้วยเมนูย่อยในโปรแกรมแก้ไขข้อความ โดยปกติแล้ว "Notepad" จะใช้เพื่อจุดประสงค์เหล่านี้ เมนูย่อยทำหน้าที่เป็นองค์ประกอบของรายการหลัก ตัวอย่างเช่น: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
ขั้นตอนที่ 2
บันทึกรายการนี้ในไฟล์ html แยกต่างหาก จากนั้นสร้างไฟล์.css ป้อนพารามิเตอร์สไตล์ชีตที่จำเป็นทั้งหมด ทำเช่นนี้อย่างระมัดระวัง เนื่องจากข้อผิดพลาดเพียงครั้งเดียว เมนูป๊อปอัปจะไม่แสดงอย่างถูกต้องหรือไม่ทำงานเลย
ขั้นตอนที่ 3
ลบสัญลักษณ์แสดงหัวข้อย่อยและช่องว่างภายในที่ใช้ในรายการหัวข้อย่อย ตั้งค่าความกว้างของเมนูโดยใช้เครื่องมือ CSS: ul -style: none; width: 200px; }
ขั้นตอนที่ 4
ทำเครื่องหมายตำแหน่งสัมพัทธ์ของรายการทั้งหมดในรายการด้วยแอตทริบิวต์ที่เรียกว่าตำแหน่ง: ul li: ญาติ; }
ขั้นตอนที่ 5
จากนั้นจัดเรียงเมนูย่อย ซึ่งองค์ประกอบต่างๆ จะปรากฏขึ้นจากเมนูหลักทางด้านขวาเมื่อเคอร์เซอร์ของเมาส์อยู่เหนือรายการ: li ul: absolute; left: 199px; top: 0; display: none; }
ขั้นตอนที่ 6
แอตทริบิวต์ด้านซ้ายน้อยกว่าความกว้างของเมนูหนึ่งพิกเซล ซึ่งช่วยให้รายการป๊อปอัปสามารถวางตำแหน่งได้อย่างถูกต้องโดยไม่ต้องสร้างเส้นขอบคู่ แอตทริบิวต์ display ใช้เพื่อซ่อนเมนูย่อยเมื่อเปิดหน้า
ขั้นตอนที่ 7
จัดรูปแบบลิงก์ตามต้องการโดยใช้ตัวเลือก css ที่เหมาะสม รวมพารามิเตอร์ display: block เพื่อให้ลิงก์ใช้พื้นที่ทั้งหมดที่สงวนไว้สำหรับพวกเขา หากต้องการให้เมนูปรากฏขึ้นเมื่อวางเคอร์เซอร์เมาส์ไว้เหนือเมนู ให้ป้อนรหัสต่อไปนี้: li: hover ul: block; }
ขั้นตอนที่ 8
ตั้งค่าตัวเลือกเพิ่มเติมสำหรับแสดงรายการและลิงก์ตามต้องการ รวมแอตทริบิวต์ในไฟล์.html เมนูป๊อปอัปพร้อมใช้งาน