เมนูดรอปดาวน์แนวตั้งมีประโยชน์มาก - ช่วยประหยัดพื้นที่บนหน้าเว็บ ในขณะเดียวกันก็ช่วยนำทางไซต์ได้อย่างง่ายดาย ลองทำเมนูแบบเลื่อนลงตาม CSS - Cascading Style Sheets หากคุณยังไม่เชี่ยวชาญในการสร้างโค้ด CSS ให้ใช้บริการ purecssmenu.com คุณต้องเลือกประเภทเมนู ปรับแต่งลักษณะที่ปรากฏ แล้วปรับให้เข้ากับไซต์ของคุณเอง ตัวบริการเองจะสร้างรหัสที่จำเป็น ซึ่งคุณแทรกลงในไฟล์ของเว็บไซต์ของคุณ
คำแนะนำ
ขั้นตอนที่ 1
ลงทะเบียนบนเว็บไซต์ purecssmenu.com มิฉะนั้น คุณจะไม่สามารถดาวน์โหลดเมนูที่สร้างขึ้นได้ คลิกปุ่มเทมเพลตที่ด้านซ้ายของหน้า ด้านล่าง คุณจะเห็นหน้าต่างเล็กๆ หลายหน้าต่างพร้อมเทมเพลตเมนูแบบเลื่อนลง คลิกซึ่งจะเป็นการโหลดตัวอย่างทางด้านขวาในหน้าต่างแสดงตัวอย่าง เลือกเทมเพลตที่เหมาะกับไซต์ของคุ
ขั้นตอนที่ 2
กำหนดแบบอักษรและสีของเมนูเอง: ใช้แท็บพารามิเตอร์ ในฟิลด์ ฟอนต์ ให้เลือกฟอนต์ ขนาดฟอนต์ ถ้าจำเป็น ขีดเส้นใต้และตัวหนา ในฟิลด์สี ให้ตั้งค่าพื้นหลังของเมนู สีฟอนต์ และโฮเวอร์ฟอนต์ และสีโฮเวอร์พื้นหลั
ขั้นตอนที่ 3
เปิดแท็บรายการเพื่อจัดการรายการเมนู หากคุณคลิกปุ่มล้างถังรีไซเคิล รายการตัวอย่างจะถูกล้างและคุณสามารถสร้างรายการของคุณเองได้ ในการดำเนินการนี้ ให้กดปุ่ม เพิ่มรายการบวก - รายการจะถูกเพิ่มที่ส่วนท้ายของเมนู ปุ่ม เพิ่มรายการถัดไป ใช้เพื่อเพิ่มรายการตามเวลาที่เลือกในปัจจุบัน ปุ่มเพิ่มรายการย่อยจะสร้างรายการเมนูย่อยสำหรับการเลือก ดังนั้น หากต้องการลบรายการ ให้ใช้ปุ่ม ลบรายกา
ขั้นตอนที่ 4
ให้ความสนใจกับฟิลด์พารามิเตอร์รายการที่ด้านล่างของไซต์ ในบรรทัดข้อความ ระบุชื่อของรายการเมนู ในบรรทัดลิงก์ - URL ของหน้าที่จะนำรายการนี้ไป ในบรรทัดคำแนะนำ คุณสามารถทิ้งคำอธิบายของรายการไว้ ซึ่งจะแสดงเมื่อคุณวางเมาส์เหนือลิงก์ เส้นเป้าหมายใช้เพื่อกำหนดวิธีการเปิดหน้าที่ลิงก์นำไปสู่ พารามิเตอร์ _self ในบรรทัดนี้จะเปิดหน้าในหน้าต่างเบราว์เซอร์เดียวกันกับหน้าต่างปัจจุบั
ขั้นตอนที่ 5
หลังจากตั้งค่าเมนูเสร็จแล้ว ให้ดาวน์โหลด - คลิกปุ่มดาวน์โหลดที่ด้านล่างขวาของหน้า (ฟังก์ชันนี้จะใช้งานได้หลังจากลงทะเบียนบนเว็บไซต์) เลือกโฟลเดอร์ในฮาร์ดไดรฟ์ที่จะบันทึกไฟล์เก็บถาวร แกะมัน คุณจะต้องคัดลอกโค้ดที่จำเป็นจากไฟล์ purecssmenu.html ลงในไฟล์เทมเพลต CSS ของเว็บไซต์ เปิดไฟล์ purecssmenu.html ด้วยโปรแกรมแก้ไขข้อความ และคัดลอกโค้ดระหว่างแท็ก และ ลงในเทมเพลต CSS ของไซต์ของคุณ (ไฟล์นี้มีนามสกุล.css และมีลักษณะคล้าย file.css) ตอนนี้วางโค้ดลงในไฟล์เทมเพลต (ธีม) ของไซต์ - โค้ดจาก purecssmenu.html ระหว่างความคิดเห็นและแทนที่จะเป็นโค้ดเมนูปกติ ในการทำเช่นนี้ คุณต้องมีความคุ้นเคยกับการเขียนโปรแกรมอย่างน้อยเล็กน้อย ตรวจสอบให้แน่ใจว่าได้วางรหัสลงในไฟล์ที่ถูกต้องและบันทึก