วิธีทำเมนูแนวตั้งสำหรับเว็บไซต์

สารบัญ:

วิธีทำเมนูแนวตั้งสำหรับเว็บไซต์
วิธีทำเมนูแนวตั้งสำหรับเว็บไซต์

วีดีโอ: วิธีทำเมนูแนวตั้งสำหรับเว็บไซต์

วีดีโอ: วิธีทำเมนูแนวตั้งสำหรับเว็บไซต์
วีดีโอ: HTML CSS - Minimal Menu สอนทำเมนูแบบมี Dropdown ด้วย CSS 2024, พฤศจิกายน
Anonim

เมนูแนวตั้งสำหรับไซต์เป็นฟังก์ชันที่สะดวกมากที่ช่วยประหยัดพื้นที่และนำทางทรัพยากรได้อย่างง่ายดาย คุณสามารถสร้างตามสไตล์ชีต CSS แบบเรียงซ้อนหรือใช้เครื่องมือพิเศษ

วิธีทำเมนูแนวตั้งสำหรับเว็บไซต์
วิธีทำเมนูแนวตั้งสำหรับเว็บไซต์

คำแนะนำ

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

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

ขั้นตอนที่ 3

ไปที่เมนูรายการเพื่อจัดการรายการเมนู การคลิกที่ปุ่มล้างจะล้างรายการตัวอย่างเพื่อให้คุณสามารถสร้างรายการของคุณเองได้ เพียงคลิกที่ปุ่ม AddItem plus เพื่อเพิ่มรายการไปที่ส่วนท้ายของเมนู การใช้ปุ่ม AddNextItem คุณสามารถเพิ่มรายการที่จะตามมาหลังจากเวลาที่เลือกในปัจจุบัน ปุ่ม AddSubitem ในเมนูจะสร้างรายการที่ซ้อนกันสำหรับรายการที่เลือก หากต้องการลบบรรทัด ให้ใช้ปุ่ม RemoveItem

ขั้นตอนที่ 4

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

ขั้นตอนที่ 5

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