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

#navbar a ( สีพื้นหลัง: #949494; สี: #fff; การขยาย: 5px; การตกแต่งข้อความ: ไม่มี; น้ำหนักแบบอักษร: ตัวหนา; ขอบซ้าย: 5px ทึบ #33ADFF; จอแสดงผล: บล็อก; ) #navbar li ( ขอบซ้าย: 10px ทึบ #666; ขอบล่าง: 1px ทึบ #666 )

เราได้รวมโค้ดทั้งหมดที่อธิบายไว้ข้างต้นเป็นตัวอย่างเดียว เมื่อคลิกที่ปุ่มลอง คุณสามารถไปที่หน้าตัวอย่างและดูผลลัพธ์:

• บ้าน
• ข่าว
• รายชื่อผู้ติดต่อ
• เกี่ยวกับเรา

เมื่อคุณวางเมาส์ไว้เหนือรายการเมนู ลักษณะที่ปรากฏอาจเปลี่ยนแปลงไป เพื่อดึงดูดความสนใจของผู้ใช้ คุณสามารถสร้างเอฟเฟกต์ดังกล่าวได้โดยใช้คลาสหลอก:โฮเวอร์

กลับไปที่ตัวอย่างเมนูแนวตั้งที่กล่าวถึงก่อนหน้านี้ และเพิ่มกฎต่อไปนี้ลงในสไตล์ชีต:

#navbar a:hover ( สีพื้นหลัง: #666; ขอบซ้าย: 5px solid #3333FF; ) ลอง »

เมนูแนวนอน

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

คุณสามารถสร้างเมนูแนวนอนได้โดยจัดสไตล์รายการปกติ แสดงคุณสมบัติสำหรับองค์ประกอบ

หากต้องการวางรายการเมนูในแนวนอน ขั้นแรกให้สร้างรายการสัญลักษณ์แสดงหัวข้อย่อยพร้อมลิงก์:

• บ้าน
• ข่าว
• รายชื่อผู้ติดต่อ
• เกี่ยวกับเรา

มาเขียนกฎสองสามข้อสำหรับรายการของเราซึ่งจะรีเซ็ตสไตล์เริ่มต้นที่ใช้สำหรับรายการ และกำหนดรายการรายการใหม่จากบล็อกเป็นแบบอินไลน์:

#navbar ( ระยะขอบ: 0; การขยาย: 0; list-style-type: none; ) #navbar li ( จอแสดงผล: อินไลน์; ) ลอง »

ตอนนี้สิ่งที่เราต้องทำคือกำหนดสไตล์สำหรับเมนูแนวนอนของเรา:

#navbar ( ระยะขอบ: 0; ช่องว่างภายใน: 0; ประเภทรายการสไตล์: ไม่มี; เส้นขอบ: 2px solid #0066FF; รัศมีเส้นขอบ: 20px 5px; ความกว้าง: 550px; การจัดตำแหน่งข้อความ: กึ่งกลาง; สีพื้นหลัง: #33ADFF; ) #navbar a ( สี: #fff; การขยาย: 5px 10px; การตกแต่งข้อความ: ไม่มี; น้ำหนักแบบอักษร: ตัวหนา; จอแสดงผล: บล็อกอินไลน์; ความกว้าง: 100px; ) #navbar a:hover ( รัศมีเส้นขอบ: 20px 5px ; สีพื้นหลัง: #0066FF ) ลอง »

เมนูแบบเลื่อนลง

เมนูที่เราจะสร้างจะมีลิงก์การนำทางหลักอยู่ในแถบนำทางแนวนอน และรายการย่อยที่จะปรากฏเฉพาะเมื่อคุณวางเมาส์เหนือรายการเมนูที่เกี่ยวข้องกับรายการย่อยเหล่านี้

ก่อนอื่นเราต้องสร้างโครงสร้าง HTML ของเมนูของเรา เราจะวางลิงก์การนำทางหลักไว้ในรายการสัญลักษณ์แสดงหัวข้อย่อย:

• บ้าน
• ข่าว
• รายชื่อผู้ติดต่อ
• เกี่ยวกับเรา

เราจะวางรายการย่อยไว้ในรายการแยกต่างหาก โดยซ้อนไว้ในองค์ประกอบ

• บ้าน
• ข่าว
• รายชื่อผู้ติดต่อ
  • ที่อยู่
  • โทรศัพท์
  • อีเมล
• เกี่ยวกับเรา

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

#navbar ul ( จอแสดงผล: none; ) #navbar li:hover ul ( จอแสดงผล: block; )

เราลบการเยื้องและเครื่องหมายเริ่มต้นออกจากทั้งสองรายการ เราสร้างองค์ประกอบรายการที่มีลิงก์การนำทางลอยอยู่ โดยสร้างเมนูแนวนอน แต่สำหรับองค์ประกอบรายการที่มีรายการย่อย เราตั้งค่า float: none; จึงปรากฏอยู่เบื้องล่างกัน

#navbar, #navbar ul ( ระยะขอบ: 0; การขยาย: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

ต่อไป เราต้องแน่ใจว่าเมนูย่อยแบบเลื่อนลงของเราไม่ได้ดันเนื้อหาที่อยู่ด้านล่างแถบนำทางลง ในการทำเช่นนี้ เราจะตั้งค่าตำแหน่งรายการ: สัมพันธ์; และรายการที่มีตำแหน่งรายการย่อย: สัมบูรณ์; และเพิ่มคุณสมบัติอันดับต้นๆ ที่มีค่า 100% เพื่อให้เมนูย่อยในตำแหน่งที่แน่นอนปรากฏใต้ลิงก์ทุกประการ

#navbar ul ( จอแสดงผล: none; ตำแหน่ง: แน่นอน; ด้านบน: 100%; ) #navbar li ( float: left; ตำแหน่ง: ญาติ; ) #navbar ( ความสูง: 30px; ) ลอง »

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

ตอนนี้เราแค่ต้องจัดสไตล์รายการทั้งสองของเรา จากนั้นเมนูแบบเลื่อนลงก็จะพร้อม:

#navbar ul ( จอแสดงผล: none; สีพื้นหลัง: #f90; ตำแหน่ง: แน่นอน; ด้านบน: 100%; ) #navbar li:hover ul ( จอแสดงผล: block; ) #navbar, #navbar ul ( ระยะขอบ: 0; การขยาย: 0; list-style-type: none; ) #navbar li ( ลอย: ซ้าย; ตำแหน่ง: สัมพันธ์; ความสูง: 100%; ) #navbar li a ( จอแสดงผล: block; padding: 6px; width: 100px; color: #fff; การตกแต่งข้อความ: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover ( สีพื้นหลัง: #f90; ) #navbar ul li:hover ( สีพื้นหลัง: #666; )

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

มาเริ่มกันเลย มาสร้างรายการพร้อมชื่อเมนูของเรากันดีกว่า ให้ชื่อรายการเป็น: "หน้าแรก", "ข่าว", "ผลิตภัณฑ์", "บริการ", "พันธมิตร", "ผู้ติดต่อ" สร้างไฟล์ใหม่ชื่อ menu.html เช่น ใช้โปรแกรม Dreamweawer หรือใช้สมุดจดธรรมดา ระหว่างแท็กเนื้อหาเราวางเมนูของเรา นี่คือรายการสัญลักษณ์แสดงหัวข้อย่อยปกติของ ul พร้อมองค์ประกอบ li แน่นอนว่าเราทำให้แต่ละรายการเมนูเป็นลิงก์ โดยที่แทนที่จะใส่ URL เราจะใส่แฮช # ใช้ Photoshop สร้างรูปภาพขนาด 3x30 px โดยเติมสีไล่ระดับดังแสดงในรูปด้านล่าง เราจะบันทึกไฟล์ในรูปแบบ GIF ลองเรียกมันว่า bg.gif ภาพนี้จะทำหน้าที่เป็นภาพพื้นหลังของเมนูของเรา

นี่คือเนื้อหาของไฟล์ menu.html:

• บ้าน
• ข่าว
• สินค้า
• บริการ
• พันธมิตร
• รายชื่อผู้ติดต่อ

ตอนนี้เรามาสร้างไฟล์สไตล์แยกกันที่เรียกว่า main.css รายการแสดงไว้ด้านล่างทั้งหมด

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*จัดรายการไปทางซ้าย*/ width:auto;/*ตั้งค่าความกว้างของอัตโนมัติตาม ประเภทและเนื้อหาของรายการ */ background-image: url(bg.gif); /*ตั้งค่าภาพพื้นหลัง*/ background-repeat:repeat-x; /*ทำซ้ำรูปภาพของเราในแนวนอน*/ list-style:none; /*ลบเครื่องหมายรายการ*/ สีพื้นหลัง:#4778c3; /*ตั้งค่าสีพื้นหลังสำหรับรูปภาพ*/ ขนาดตัวอักษร:13px; /*ตั้งค่าขนาดตัวอักษร*/ ตระกูลแบบอักษร:Arial, Helvetica, sans-serif ; /*ตั้งค่าแบบอักษร*/ ) ul li ( float:left; /*จัดองค์ประกอบรายการไปทางซ้าย*/ ) ul a ( display:block; /*แสดงลิงก์เมนูเป็นองค์ประกอบบล็อก*/ width:100px; /* กำหนดขนาดบล็อก*/ height:30px; /* และ block height*/ text-align:center; /*centered text*/ line-height: 2.1em; ลบการขีดเส้นใต้ออกจากลิงก์*/ color:#fff; /*สีข้อความลิงก์ - white*/ border-right:#fff solid 1px; /*border ทางด้านขวาของบล็อก (เส้นสีขาว 1px)*/ ) ul a: โฮเวอร์ ( สี:#ccc; /*link เปลี่ยนสีเมื่อวางเมาส์เหนือ*/ )

ฉันคิดว่าไม่ควรมีคำถามเกี่ยวกับเนื้อหาของไฟล์ main.css ฉันเขียนคำแนะนำในความคิดเห็นโดยละเอียดเพียงพอและชัดเจน ดังนั้นฉันจะไม่พูดซ้ำ อย่าลืมเชื่อมต่อกับหน้า menu.html ของเราโดยใช้

มาสรุปกัน ด้วยเหตุนี้เราจึงมีเมนูแนวนอนข้ามเบราว์เซอร์ที่สมบูรณ์ซึ่งมีลักษณะเหมือนกันไม่เพียง แต่ในเบราว์เซอร์สมัยใหม่ทั้งหมดเท่านั้น แต่ยังพบได้ในสิ่งหายากเช่น IE 5.5 และ IE 6.0 องค์ประกอบเมนูทั้งหมดจะแสดงเป็นองค์ประกอบบล็อกและมีขนาดกว้าง 100 พิกเซลและสูง 30 พิกเซลเท่ากัน ในฐานะที่เป็นตัวคั่นสำหรับรายการเมนู การออกแบบองค์ประกอบบล็อกจะใช้เส้นขอบสีขาวด้านขวาหนา 1px นี่เป็นวิธีที่ง่ายที่สุดในการใช้งานเมนูแนวนอน แน่นอนหากต้องการคุณสามารถปรับเปลี่ยนทำให้มันสวยงามและใช้งานได้โดยใช้จินตนาการคุณสมบัติ CSS และองค์ประกอบกราฟิกเพิ่มเติม ดี เมนูแนวนอนของเรามีลักษณะดังนี้:

ข้อดีของโซลูชันนี้:
ง่ายต่อการทำ
รหัสง่ายๆ
ไม่มีตารางหรือจาวาสคริปต์
ความเข้ากันได้ข้ามเบราว์เซอร์: เมนูมีลักษณะเหมือนกันในทุกเบราว์เซอร์
ใช้ภาพวาดเพียงภาพเดียวเท่านั้น
รหัสขั้นต่ำในหน้า menu.html
รหัสขั้นต่ำสำหรับการนำสไตล์ไปใช้ใน main.css

ไฟล์ที่ใช้ในตัวอย่างนี้สามารถดาวน์โหลดได้ในไฟล์เก็บถาวร

งานการจัดกึ่งกลางเมนูแนวนอนอาจเป็นเรื่องยุ่งยาก โดยเฉพาะสำหรับผู้ที่เพิ่งเริ่มใช้ CSS การค้นหาวิธีแก้ปัญหานำไปสู่รายการวิธีการที่จำกัดมาก ซึ่งส่วนใหญ่อาศัยเทคนิค CSS, JavaScript หรือการใช้กฎที่ไม่ได้มาตรฐานซึ่งบางเบราว์เซอร์ไม่รองรับ ในบทช่วยสอนนี้ เราจะอธิบายวิธีการจัดกึ่งกลางเมนูแนวนอนซึ่งใช้เฉพาะกฎ CSS มาตรฐานและใช้ได้กับทุกเบราว์เซอร์

ตัวอย่างเมนูตรงกลาง

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

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

มาร์กอัป HTML

เมนูทั้งหมดที่แสดงในบทช่วยสอนนี้ใช้โครงสร้างที่เรียบง่าย นี่คือรายการลิงก์ที่ไม่เรียงลำดับทั่วไปที่อยู่ในองค์ประกอบ กอง.

รหัส CSS เมนูกึ่งกลาง

ด้านล่างนี้คือโค้ด CSS ที่สมบูรณ์ซึ่งใช้เพื่อจัดกึ่งกลางเมนู คำอธิบายหลักการทำงานจะมีให้ในภายหลังในบทเรียน

#centeredmenu ( float:left; width:100%; พื้นหลัง:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none; padding:0; ตำแหน่ง:relative; text-align:center; padding:0; 3px 10px; พื้นหลัง:#ddd; color:#000; text-height:1.3em; ) #centeredmenu ul li a.active, #centeredmenu เช่นกัน a.active:hover ( color:# fff; พื้นหลัง:#000;

วิธีการตั้งศูนย์ทำงานอย่างไร?

การดำเนินการของวิธีการจะขึ้นอยู่กับตำแหน่งสัมพัทธ์ขององค์ประกอบบล็อกลอยที่อยู่ภายในองค์ประกอบอื่น ก่อนอื่น เรามาดูกันว่าขนาดขององค์ประกอบเปลี่ยนแปลงไปอย่างไรตามการกระจัด

องค์ประกอบ กอง(บล็อก) ที่ไม่มีการกระจัดถูกยืดออกไปจนสุดความกว้างที่มีอยู่

แต่ถ้าเราย้าย div ไปทางซ้าย มันจะย่อขนาดให้พอดีกับเนื้อหาโดยอัตโนมัติ การบีบอัดเป็นกุญแจสำคัญในการใช้วิธีจัดกึ่งกลางเมนูนี้ ช่วยให้คุณย้ายเมนูไปยังตำแหน่งที่ถูกต้อง

เมนูมาตรฐานชิดซ้าย

ลองใช้เมนูมาตรฐานชิดซ้ายแล้วสร้างใหม่ทีละขั้นตอน เพื่อความชัดเจน รายการต่างๆ จะถูกลงสีด้วยสีต่างๆ กัน ดังนั้นจึงชัดเจนทันทีว่าอะไรไปอยู่ที่ไหน

โปรดทราบประเด็นต่อไปนี้:

• องค์ประกอบ แผนกเมนูกึ่งกลาง(สี่เหลี่ยมสีน้ำเงิน) เยื้องไปทางซ้าย แต่มีความกว้าง 100% ดังนั้นจึงยังคงยืดออกไปทั้งหน้า
• องค์ประกอบ ul(สี่เหลี่ยมสีชมพู) อยู่ภายในองค์ประกอบ เมนูกึ่งกลาง กองและเคลื่อนไปทางซ้าย ซึ่งหมายความว่าจะถูกบีบอัดตามความกว้างของเนื้อหาซึ่งก็คือความกว้างรวมของบุ๊กมาร์กทั้งหมด
• องค์ประกอบ li ทั้งหมด (สี่เหลี่ยมสีเขียว) อยู่ภายในองค์ประกอบ ulและย้ายไปทางซ้าย ดังนั้นพวกมันจึงถูกบีบอัดตามขนาดของลิงค์ในนั้นและเรียงกันเป็นเส้นแนวนอนเส้นเดียว
• ภายในแต่ละลิงก์ (สี่เหลี่ยมสีส้ม) ข้อความบุ๊กมาร์กจะปรากฏขึ้น: บุ๊กมาร์ก 1, บุ๊กมาร์ก 2 และอื่นๆ

การเปลี่ยนตำแหน่งของรายการที่ไม่เรียงลำดับ

จากนั้นเราก็ชดเชยองค์ประกอบ ulไปทางขวา 50% โดยใช้ตำแหน่ง:ญาติ; - เมื่อองค์ประกอบถูกชดเชยด้วยเปอร์เซ็นต์ภายใต้เงื่อนไขเหล่านี้ สิ่งสำคัญคือต้องจำไว้ว่าความกว้างรวมขององค์ประกอบนั้นไม่ใช่ความกว้าง ในกรณีของเรา การชดเชยเกิดขึ้นเพียงครึ่งหนึ่งของหน้าต่างเบราว์เซอร์ (หรือพื้นที่ว่างสำหรับการแสดงผล) ด้วยเหตุนี้ เมนูของเราจึงเริ่มต้นที่กึ่งกลางหน้าต่างและขยายออกไปเกินขอบเขตบางส่วน และมาดูขั้นตอนต่อไปกันดีกว่า

เลื่อนตำแหน่งขององค์ประกอบเมนูทั้งหมด

สิ่งที่เหลืออยู่คือการย้ายองค์ประกอบทั้งหมด ลี้เหลือ 50% นี่คือ 50% ของความกว้างขององค์ประกอบ ul ของเรา (คอนเทนเนอร์ที่มีเมนู) ดังนั้นบุ๊กมาร์กจึงเลื่อนไปที่กึ่งกลางหน้าต่างพอดี

หมายเหตุสำคัญบางประการ

เมื่อใช้วิธีการจัดศูนย์กลางนี้ มีประเด็นสำคัญหลายประการที่ต้องจำ:

• ตั้งแต่ธาตุ ulบางส่วนขยายออกไปนอกหน้าต่าง ส่งผลให้มีการแสดงแถบเลื่อน ดังนั้นคุณจึงจำเป็นต้องใช้กฎ overflow:hidden; สำหรับองค์ประกอบ แผนกเมนูกึ่งกลาง- ดังนั้นส่วนที่ยื่นออกมาของธาตุ กองจะถูกตัดออก
• ตั้งแต่ธาตุ ulไม่สอดคล้องกับบุ๊กมาร์ก คุณไม่สามารถใช้สไตล์ภาพใดๆ ได้ ปล่อยองค์ประกอบ ul โดยไม่มีสีพื้นหลังและไม่มีเส้นขอบเพื่อไม่ให้มองไม่เห็นโดยสมบูรณ์ และควรใช้สไตล์สำหรับบุ๊กมาร์กสำหรับองค์ประกอบเท่านั้น ลี้.
• หากคุณต้องการตั้งค่าสไตล์พิเศษสำหรับบุ๊กมาร์กแรกและสุดท้าย คุณต้องเพิ่มคลาสสำหรับองค์ประกอบแรกและสุดท้าย ลี้คุณจึงสามารถจัดสไตล์ทีละรายการได้

บทสรุป

โซลูชันที่นำเสนอเข้ากันได้กับเบราว์เซอร์ทั้งหมด ไม่ใช้ JavaScript และรองรับข้อความที่ปรับขนาดได้

1. เมนู jQuery สว่างแนวตั้ง

2. เอฟเฟกต์สุดเจ๋ง เมนูเต้น.

4. รายการแบบเลื่อนลงโดยใช้ jQuery

การจัดสไตล์องค์ประกอบอินเทอร์เฟซที่ยอดเยี่ยมในรูปแบบของรายการแบบเลื่อนลง

เมื่อคุณวางเมาส์ไว้เหนือปุ่ม แผงจะปรากฏขึ้นที่ด้านบน

6. ปลั๊กอิน jQuery “MobilyBlocks” สำหรับแสดงเมนูแบบรัศมี

7. เมนูโดยใช้สไปรท์

เมนูจาวาสคริปต์แบบเคลื่อนไหวพร้อมเอฟเฟกต์เรืองแสง

เมนูสดอร่อยโดยใช้ jQuery

9. เมนู jQuery “ประตูโรงรถ”

10. เมนูเลื่อนแนวตั้ง jQuery

การใช้งานเมนูที่มีรายการจำนวนมาก เลื่อนเมื่อคุณเลื่อนเคอร์เซอร์ของเมาส์ขึ้นหรือลง

11. การออกแบบรายการแบบเลื่อนลง jQuery

12. ปลั๊กอินนำทางหน้า

เลื่อนไปยังส่วนที่ต้องการบนหน้าได้อย่างราบรื่น ปลั๊กอินการนำทาง jQuery One Page

13. ปลั๊กอิน “เมนูเนื้อหาแบบเคลื่อนไหว”

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

14. ปลั๊กอินเมนู jQuery “เมนูหวาน”

เมนูภาพเคลื่อนไหวพร้อมรายการป๊อปอัป

15. แก้ไขเมนู jQuery

เมื่อคุณเลื่อนหน้าลง เมนูจะยังคงคงที่ที่ด้านบนของหน้าจอ

16. เมนูเลื่อนชุด Slider Kit

เพื่อปรับใช้เมนูแนวตั้งที่มีรายการจำนวนมาก การเลื่อนดูรายการต่างๆ ทำได้โดยใช้ล้อเลื่อนของเมาส์ หรือใช้ลิงก์ "ก่อนหน้า" และ "ถัดไป"

17. เมนู CSS3 มีสไตล์

18. เมนู CSS3 ใหม่สไตล์ Apple

เมนูใหม่สไตล์แอปเปิ้ล ดูเข้มกว่าเดิมแต่ก็น่ารักไม่น้อย

19. เมนู jQuery ดั้งเดิม

เมนูแบบเลื่อนลงพร้อมเอฟเฟกต์พื้นหลัง รายการย่อยของเมนูจะขยายขึ้นด้านบน เมื่อคุณโฮเวอร์เหนือรายการเมนู ภาพพื้นหลังจะเปลี่ยนไป

20. เมนูภาพเคลื่อนไหวด้วย jQuery

เมนูภาพเคลื่อนไหว รายการเมนูจะแสดงในรูปแบบไอคอนและคำอธิบาย เอฟเฟกต์ที่ยอดเยี่ยมมากมายเมื่อวางเมาส์ไว้เหนือรายการเมนู มีเอฟเฟกต์ 8 แบบเพื่อดูทั้งหมด - ตามลิงก์ Exemple1-Exemple8 ในหน้าสาธิต

21. “เมนูเลื่อน” เมนู XML พร้อมการเลื่อน

เมนูเลื่อนแนวตั้งและแนวนอน ทางออกที่ดีหากมีรายการอาหารจำนวนมากในเมนู

22. เมนูบริบทบนเว็บไซต์โดยใช้ jQuery

เมนูจะปรากฏขึ้นเมื่อคุณคลิกขวาที่พื้นที่เฉพาะ

23. เมนูสองระดับแบบวงกลมสำหรับไซต์

เมื่อคุณเลือกรายการเมนู รายการเมนูย่อยจะแสดงทางด้านขวา

24. เมนู jQuery CSS3 พร้อมเอฟเฟกต์เบลอ “เมนูเบลอ” CSS3

เมนู jQuery CSS3 ดั้งเดิมมี 7 สไตล์ที่แตกต่างกัน เมื่อคุณวางเมาส์เหนือรายการเมนูรายการใดรายการหนึ่ง รายการที่เหลือดูเหมือนจะเบลอ

25. เมนู jQuery CSS3 แบบเคลื่อนไหวที่น่าทึ่งบางส่วน

10 เมนูภาพเคลื่อนไหวที่สร้างสรรค์ เมนู CSS3 แนวนอนและแนวตั้งพร้อมเอฟเฟกต์และการเปลี่ยนภาพที่หลากหลาย

ไฟล์เก็บถาวรยังรวมถึงไฟล์ PSD เมนูดั้งเดิมด้วย

27. เมนูเมจิกไลน์

พื้นหลังหรือขีดเส้นใต้ของรายการเมนูจะเลื่อนไปตามเมาส์ด้วยความล่าช้าเล็กน้อย ในขณะที่พื้นหลังจะเปลี่ยนสีได้อย่างราบรื่นเมื่อย้ายจากรายการหนึ่งไปยังอีกรายการหนึ่ง เอฟเฟ็กต์สวยงามมาก ดูแปลกตา ข้อควรสนใจ: เอฟเฟกต์จะไม่ทำงานในโอเปร่า

28. ฟองอากาศรูปภาพ

เอฟเฟกต์ที่ยอดเยี่ยมเมื่อคุณวางเมาส์ไว้เหนือรูปภาพใดรูปภาพหนึ่ง เอฟเฟกต์ค่อนข้างชวนให้นึกถึง jQDock ที่อธิบายไว้ข้างต้น

31. เมนู jQuery ที่น่าสนใจพร้อมเอฟเฟกต์ต่างๆ

เมนูแนวนอนแนวตั้ง ผลกระทบที่น่าสนใจ

32. เมนู jQuery สไตล์ Apple ที่ยอดเยี่ยม

34. เมนู jQuery พร้อมเอฟเฟกต์ที่น่าสนใจ

36. เมนูสดใหม่พร้อมเอฟเฟกต์ที่น่าสนใจโดยใช้ jQuery

เอฟเฟกต์ที่น่าสนใจมาก เหมาะสำหรับการออกแบบเว็บไซต์พอร์ตโฟลิโอ

เอฟเฟกต์ที่น่าสนใจของภาพขนาดย่อที่ปรากฏขึ้นเมื่อโฮเวอร์

40. รายการแบบเลื่อนลงพร้อมการเลื่อนอัตโนมัติ

เอฟเฟกต์การเปลี่ยนแปลงที่ดีระหว่างรายการ

42. เมนู jQuery ที่ยอดเยี่ยม

43. เมนู jQuery ขนาดใหญ่ที่สวยงาม

44. เมนูเลื่อน jQuery

รายการเมนูจะแสดงในรูปแบบภาพขนาดย่อ

46. ​​​​เมนูนำทาง jQuery Radial

47. เมนู CSS และ jQuery

แถบนำทางพร้อมช่องค้นหาที่จะโปร่งแสงเมื่อคุณเลื่อนหน้าลง

48. เมนู jQuery แนวนอน

49. เมนู jQuery แนวตั้ง

เมนูแนวตั้งที่ยอดเยี่ยม เมื่อคุณวางเคอร์เซอร์ รายการเมนูจะปรากฏขึ้น

50. เมนู jQuery แนวนอน

เอฟเฟกต์ที่น่าสนใจเมื่อวางเคอร์เซอร์ไว้เหนือรายการเมนู

52. เมนูแบบเลื่อนลง jQuery

เมื่อคุณวางเมาส์เหนือเมนู รายการต่างๆ จะปรากฏขึ้น รายการที่ปรากฏจะแสดงในรูปแบบของส่วนโค้ง ซึ่งเป็นรัศมีที่คุณสามารถกำหนดได้เมื่อกำหนดค่าปลั๊กอิน ในบางเบราว์เซอร์ คุณจะไม่เห็นการแสดงส่วนโค้ง เมนูจะแสดงเป็นเส้นตรง แต่ยังคงไม่ทำลายความประทับใจโดยรวมของการนำเมนู jQuery นี้ไปใช้

53. แถบนำทาง CSS และ jQuery

เอฟเฟกต์ที่น่าสนใจเมื่อวางเมาส์ไว้เหนือรายการเมนู

54. แผงป๊อปอัป jQuery

เมนูภาพเคลื่อนไหวสดใหม่ในโทนสีเทา

58. การนำทางไซต์แบบเรียงเป็นแนวโดยใช้ jQuery

โซลูชั่นการนำทางที่น่าสนใจซึ่งนำเสนอในรูปแบบของแถบแนวตั้ง เมื่อคุณวางเมาส์เหนือแถบเหล่านี้ รูปภาพของรายการและรายการเมนูย่อยจะปรากฏขึ้น เมื่อคุณคลิกที่รายการเมนูย่อย เพจพร้อมคำอธิบายจะปรากฏขึ้น การใช้งานนี้เหมาะสำหรับไซต์ส่งเสริมการขายหรือการนำเสนอ อย่าลืมตรวจสอบการสาธิตปลั๊กอิน

59. การนำทางไซต์ jQuery

การนำทางไซต์จะแสดงในรูปแบบของรูปภาพ 4 รูป เมื่อคุณวางเมาส์เหนือรูปภาพเหล่านั้น คุณจะสังเกตเห็นเอฟเฟกต์ภาพเคลื่อนไหวที่น่าสนใจ

60. แถบนำทางเลื่อนพร้อมเนื้อหา

แผงนำทาง การคลิกที่ลูกศรจะเลื่อนหน้า การนำทางจะเลื่อนไปตามเนื้อหาของหน้า

61. แผง jQuery พร้อมบริการโซเชียลต่างๆ

62. เมนู jQuery แบบเคลื่อนไหวที่เรียบร้อย

63. เมนู jQuery “แปรงสีน้ำ”