สิ่งสำคัญที่สุดประการหนึ่งของการพัฒนาเว็บไซต์และซอฟต์แวร์คือการสร้างเมนู เมนูเลื่อนที่สวยงามยังคงเป็นเกณฑ์มาตรฐานสำหรับเจ้าของเว็บไซต์และโปรแกรมเมอร์จำนวนมาก ซึ่งสามารถทำได้โดยใช้เครื่องมือ CSS และ Expression Web
คำแนะนำ
ขั้นตอนที่ 1
เปิด Expression Web และไปที่ Manage Style เพื่อเริ่มสร้างเมนูแบบเลื่อนและกดปุ่ม New Style ตั้งชื่อ Selector สไตล์ใหม่ ul li ตรวจสอบให้แน่ใจว่าไฟล์ที่สร้างขึ้นมีนามสกุล drop-down.css ในการสร้างเมนูเลื่อน ให้ระบุตำแหน่งที่เหมาะสมบนหน้าจอ กำหนดความกว้างของรายการเมนูแต่ละรายการและลบจุดที่ไม่จำเป็นซึ่งอาจอยู่ข้างหน้า
ขั้นตอนที่ 2
เรียกใช้ตัวเลือกเค้าโครงและตั้งค่าแอตทริบิวต์การแสดงผล ให้ค่าอินไลน์ที่เหมาะสมกับการจัดตำแหน่งบนหน้าจอ ตั้งค่าแอตทริบิวต์ Float เป็น Left และกดปุ่ม Apply ตั้งค่าองค์ประกอบทั้งหมดของรายการเป็นหนึ่งบรรทัด หากต้องการจัดวางให้เป็นระเบียบและไม่ทับซ้อนกัน ให้ตั้งค่าแอตทริบิวต์ Width เป็น Position ในรูปแบบ 150 px ตรวจสอบให้แน่ใจว่ารายการทั้งหมดในรายการมีขนาดเท่ากัน ลบจุดที่อยู่ด้านหน้าของแต่ละองค์ประกอบโดยไปที่แอตทริบิวต์ List และตั้งค่า List Style-type เป็น None คลิก "ตกลง" เพื่อยอมรับการเปลี่ยนแปลงและมีผล
ขั้นตอนที่ 3
ปรับสไตล์และขนาดตัวอักษรสำหรับ ul li ไปที่จัดการสไตล์และคลิกขวาที่ ul li เลือก Modify Style คุณจะเห็นเมนูโต้ตอบที่คุ้นเคยอยู่แล้ว ไปที่ Font เลือก Font-family และตั้งค่าแอตทริบิวต์นี้เป็น Helvetica, Arial, Sans-serif ปรับขนาดแบบอักษรและตั้งค่าเป็น 0, 9 ตั้งค่าแอตทริบิวต์ Text-transform เป็นตัวพิมพ์ใหญ่ ในแอตทริบิวต์ ความสูง - ตำแหน่ง ระบุความสูงที่แน่นอนของรายการเมนูโดยตั้งค่าเป็น 30 พิกเซล
ขั้นตอนที่ 4
บันทึกไฟล์เป็น menu.html เมื่อการดำเนินการแก้ไขทั้งหมดเสร็จสิ้น ทดสอบเมนูที่คุณเพิ่งสร้างในแอปพลิเคชันและเบราว์เซอร์ต่างๆ เพื่อดูว่าใช้งานได้หรือไม่ อย่างที่คุณเห็นการสร้างเมนูดังกล่าวไม่ใช่เรื่องยาก