เมนู CSS แนวตั้ง: ทำมันด้วยตัวคุณเอง

เว็บมาสเตอร์บางคนไม่ต้องการที่จะใช้เวลาในการพัฒนาจากองค์ประกอบที่เรียบง่ายรอยขีดข่วนที่มีอยู่แล้ว พวกเขาเชื่อว่ามีจุดใดในการเสียเวลาของคุณในสิ่งที่มีมานานมี ในความเป็นจริงสำหรับผู้ที่เพิ่งเรียนรู้ HTML และ CSS มันเป็นสิ่งสำคัญที่จะทำให้ตัวเองมากของสิ่งที่จะมีความเข้าใจที่ดีของการทำงานของพวกเขา นี้ใช้กับเมนู สร้างเมนู CSS แนวตั้ง มันจะขึ้นอยู่เฉพาะใน HTML และ CSS โดยไม่ต้องใช้ Javascript และ JQuery แต่ละเมนูเป็นรายการของการเชื่อมโยงที่นำไปสู่หน้าเว็บของเว็บไซต์

ขั้นตอนพื้นฐาน

เพื่อสร้างง่าย เมนูแนวตั้ง CSS คุณต้องทำตามขั้นตอนต่อไปนี้:

1. ขั้นแรกให้กำหนดรายชื่อของการเชื่อมโยง (โดยใช้ HTML code) เป็นเมนูที่จะได้รับ ให้พวกเขามีชื่อเช่นมีดังต่อไปนี้:

1. บ้าน
2. ประวัติของเรา
3. คู่มือ
4. บริการ
5. รายชื่อผู้ติดต่อ

2. จากนั้นก็จัดแต่งทรงผมการเชื่อมโยงตามที่คุณต้องการด้วยความช่วยเหลือของซีเอสเอ

เราเขียน โค้ด HTML, เก็บไว้ในไฟล์ my_Vmenu.html และดูว่ามันจะมีลักษณะในเบราว์เซอร์:

นี่คือพื้นฐาน (โครงกระดูก) ของเมนูของเรา # 1 # 2 ฯลฯ ควรถูกแทนที่ด้วยการอ้างอิง ดูว่าจะดูในเบราว์เซอร์ ภาพที่คุณจะไม่ชอบ ตอนนี้เราจะต้องเริ่มต้นที่จะอธิบายองค์ประกอบของรูปแบบเพื่อให้สมบูรณ์เมนู CSS แนวตั้ง

คำอธิบายรูปแบบ

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

คำอธิบายรายละเอียดการใช้สไตล์ชีต

ตอนนี้พิจารณารายละเอียดของเมนูแนวตั้งของเรา CSS นี้:

รูปแบบรายการประเภทช่วยให้คุณลบรายชื่อของเครื่องหมาย โดยการตั้งค่า "0" เป็นอัตราและ padding ลบ padding พิเศษในรายการ ที่สามารถมองเห็นได้จากรหัส HTML, เมนูของเราเป็นรายการและรูปแบบจะมีการกำหนดใช้ CSS

ยู # my_Vmenu - รูปแบบโดยรวมของรายชื่อทั้งหมด

การเชื่อมโยงระหว่างรูปแบบ li แท็ก - ยู # my_Vmenu หลี่

ยู # my_Vmenu li A: เลื่อน - รายละเอียดของประเภทที่อยู่ภายใต้การพิจารณาของรายการเมนูในช่วงเวลาหนึ่งวนเวียนอยู่เหนือประชาชนที่

ยู # my_Vmenu li ช่วง - คำอธิบายข้อความ (เมนูชื่อเรื่อง)

โปรดจำไว้ว่าไฟล์ my_Vmenu.css my_Vmenu.html และต้องเก็บรักษาไว้ในไดเรกทอรีเดียวกัน แต่พวกเขาอาจจะอยู่ในโฟลเดอร์ที่แตกต่างกัน แต่แล้วมันเป็นสิ่งสำคัญที่จะลงทะเบียนในเส้นทางของไฟล์ my_Vmenu.html เพื่อ my_Vmenu.css ต้องระวังเพราะคนที่มาใหม่เพื่อแก้ไขปัญหานี้มักจะ

รูปแบบจะต้องเชื่อมต่อระหว่างแท็กหัวในไฟล์ HTML menu_1.png และ menu_2.png - นี้เป็นภาพสำหรับรายการเมนูภาพในสภาวะปกติและเลื่อน

มันจะดีกว่าที่จะบันทึกภาพในโฟลเดอร์ที่แยกต่างหากสำหรับภาพชื่อมัน my_images แต่แล้วปรับโค้ด CSS เขียนซึ่งมีภาพเหล่านี้จะแสดงให้เห็นว่าพวกเขาอยู่ในไดเรกทอรีนี้:: url (my_images / menu_1.png) และ URL (my_images / menu_2.png)

ในส่วนที่เหลือของคุณสมบัติที่อธิบายไว้ในโค้ด CSS ที่จะเข้าใจได้อย่างง่ายดาย พวกเขากำหนดลักษณะของเมนูของเรา มันเป็นเรื่องง่ายที่จะสังเกตเห็นว่ามีความกว้างและความสูงของรายการที่ระบุไว้สำหรับรายการเดียวกันในสภาวะปกติและเมื่อคุณวางเมาส์เหนือพวกเขา ขนาดตัวอักษร 18px, padding ระบุเยื้องจากด้านข้างแตกต่างกันของชื่อสถานที่ จอแสดงผลช่วยให้คุณกำหนดหน่วยแสดงผลในการตั้งค่าความกว้างและ padding

เมนูแนวตั้งของเรา

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