การสร้างเมนูน่าจะเป็นหนึ่งในประเด็นหลักในการพัฒนาไซต์และโปรแกรม นอกจากนี้ ความละเอียดรอบคอบและการออกแบบที่ดีของเมนูดังกล่าวคือหน้าตาของเว็บไซต์หรือโปรแกรมใดๆ ตัวอย่างเช่น ลองใช้ Microsoft และระบบปฏิบัติการ Windows 7 กัน หลังจากการเปิดตัว Windows 7 Microsoft ได้ยินคำวิจารณ์มากมายที่ไม่ประจบประแจงสำหรับตัวเอง มีการวิพากษ์วิจารณ์มากมาย แต่ส่วนใหญ่มักจะอยู่ในตำแหน่งที่ไม่สะดวก โปรดอ่านบทแนะนำนี้อย่างละเอียดเกี่ยวกับวิธีสร้างเมนูดรอปดาวน์แนวนอนด้วย CSS และ Expression Web รูปแบบแท็กจะเปลี่ยนเพื่อสร้างเมนู
คำแนะนำ
ขั้นตอนที่ 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 บนแป้นพิมพ์ของคุณ