วิธีทำเมนูแนวนอน

คำแนะนำ

ขั้นตอนที่ 1

ไปที่จัดการสไตล์แล้วคลิกปุ่มรูปแบบใหม่ ตั้งชื่อ Selector ul li ให้กับสไตล์ใหม่ที่คุณเพิ่งสร้างขึ้น อย่าลืมกำหนดสไตล์ใหม่ในไฟล์ drop-down.css

ขั้นตอนที่ 2

หากต้องการยืดเมนูแนวนอน คุณต้องบอกรายการเมนูว่าจะเป็นแนวนอน ถัดไป คุณต้องกำหนดความกว้างของแต่ละรายการในเมนูและลบจุดที่ไม่จำเป็นทั้งหมดที่อยู่ด้านหน้ารายการทั้งหมด

ขั้นตอนที่ 3

สำหรับการจัดตำแหน่งแนวนอน ให้ไปที่ Layout และตั้งค่าแอตทริบิวต์ display เป็น inline ตั้งค่าแอตทริบิวต์ float ไปทางซ้าย คลิกปุ่มใช้ รายการทั้งหมดต้องตั้งค่าเป็นบรรทัดเดียว เพื่อไม่ให้ทับซ้อนกัน คุณต้องทำสิ่งต่อไปนี้: ตั้งค่าตำแหน่งของแอตทริบิวต์ width เป็น 150px ตอนนี้ตรวจสอบออก องค์ประกอบทั้งหมดของรายการควรมีขนาดเท่ากัน

ขั้นตอนที่ 4

ตอนนี้เราต้องพยายามลบจุดที่อยู่หน้ารายการ ในการดำเนินการนี้ ให้ไปที่รายการ และตั้งค่าแอตทริบิวต์ list-style –type เป็น none

ขั้นตอนที่ 5

คลิกตกลงเพื่อยอมรับการเปลี่ยนแปลงทั้งหมด

ขั้นตอนที่ 6

ในการปรับขนาดแบบอักษรสำหรับสไตล์ ul li คุณต้องทำดังต่อไปนี้ ใน Manage Styles ให้คลิกขวาที่สไตล์ ul li ที่คุณต้องการเลือก Modify Style กล่องโต้ตอบที่คุ้นเคยสำหรับการเพิ่มหรือเปลี่ยนแอตทริบิวต์จะเปิดขึ้น ไปที่หมวด Font และตั้งค่าแอตทริบิวต์ font-family เป็น Arial, Helvetica, sans-serif จากนั้นไปที่แอตทริบิวต์ขนาดแบบอักษรและตั้งค่าเป็น 0.9em หลังจากนั้น ตั้งค่าแอตทริบิวต์การแปลงข้อความ ตั้งค่าให้เป็นตัวพิมพ์ใหญ่

ขั้นตอนที่ 7

ความสูงของรายการในเมนูที่สร้างขึ้นสามารถปรับได้ในหมวดตำแหน่ง ตั้งค่าแอตทริบิวต์ความสูงเป็น 30px

ขั้นตอนที่ 8

ถัดไป คุณต้องบันทึกไฟล์ menu.html เมื่อต้องการทำเช่นนี้ Expression Web จะเปิดหน้าต่างบันทึกไฟล์ที่ฝังตัวที่จำเป็นเพื่อบันทึกไฟล์ บันทึกในไฟล์ drop-down.css คลิกตกลงเพื่อบันทึก

ขั้นตอนที่ 9

ตอนนี้ตรวจสอบผลลัพธ์ของคุณ เพื่อความน่าเชื่อถือ การทดสอบในเบราว์เซอร์ต่างๆ จะดีกว่า ในการตรวจสอบผลลัพธ์ที่ได้รับในเบราว์เซอร์เริ่มต้น คุณต้องกดปุ่ม F12 บนแป้นพิมพ์ของคุณ