เมนูมือถือ jquery เมนูเวอร์ชั่นมือถือ

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

โปรดทราบว่าเราใช้ คุณสมบัติซีเอสเอส(การเปลี่ยนแปลง การเปลี่ยนแปลง) ซึ่งใช้ได้เฉพาะในนั้นเท่านั้น เบราว์เซอร์ที่ทันสมัย- ตัวอย่าง ทางเลือกอื่นสำหรับเบราว์เซอร์ที่ไม่รองรับ คุณจะพบได้ที่ส่วนท้ายของไฟล์component.css ซึ่งจะแสดงเมนูระดับแรก เราทำเช่นเดียวกันหากไม่มี JS

สำหรับเมนูเราจำเป็นต้องมีโครงสร้างแบบซ้อนดังต่อไปนี้:

ทุกหมวดหมู่

  • อุปกรณ์ อุปกรณ์
    • โทรศัพท์มือถือ โทรศัพท์มือถือ

ที่นี่ แต่ละระดับจะรวมอยู่ในแท็ก div พร้อมด้วยคลาส mp-level เราจะไม่สามารถใช้การวางตำแหน่งคงที่ประเภทนี้กับเมนูได้เนื่องจากการแปลงจะทำให้ทำงานเหมือนองค์ประกอบที่มีตำแหน่งที่แน่นอน ดังนั้นเราจะต้องใช้การวางตำแหน่งที่แน่นอน ซึ่งจะนำไปสู่ปัญหาพฤติกรรมของไซต์ที่ไม่ต้องการ (เมนู เลื่อนและขึ้นอยู่กับความสูงของเอกสาร)

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

ตอนนี้เรากำหนดสไตล์ CSS ต่อไปนี้ให้กับองค์ประกอบ:

Html, body, .container, .scroller ( ความสูง: 100%; ) .scroller ( overflow-y: scroll; ) .scroller, .scroller-inner ( ตำแหน่ง: ญาติ; ) .container ( ตำแหน่ง: ญาติ; ล้น: ซ่อนอยู่; พื้นหลัง: #34495e )

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

ใหม่ mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"));

หรือหากเมนูย่อยควรปิดระดับก่อนหน้า:

ใหม่ mlPushMenu(document.getElementById("mp-menu"), document.getElementById("trigger"), (ประเภท: "cover"));


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

ปัญหา.

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

http://bitfoundry.ca/

สารละลาย. 1) เมนูแบบเลื่อนลง

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


http://www.smashingmagazine.com/
http://informationarchitects.net/

2) บล็อก

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

http://forefathersgroup.com/

http://loveandluxesf.com/

http://www.londonandpartners.com/

3) ไอคอนเมนู

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

http://www.sony.com

http://twitter.github.com/bootstrap/

http://zync.ca/

http://www.paulrobertlloyd.com/

เมนูมือถือด้วย jQuery()

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

ด้านล่างนี้คือโค้ด HTML อย่างง่ายสำหรับเมนูที่ใช้ในบทช่วยสอนนี้:

< nav id = "nav-wrap" >

< ul id = "nav" >

< li > < a href = "#" >ปุ่ม< / a > < / li >

< li > < a href = "#" >ปุ่ม< / a > < / li >

< / ul >

< / nav >

รหัส jQuery

วางสำเนาของ jQuery และฟังก์ชันด้านล่างระหว่างแท็ก< head >- ฟังก์ชั่นจะเพิ่มแท็ก< div id = "menu-icon" в тег < nav id = "#nav-wrap" >- และเมื่อคุณคลิกที่องค์ประกอบ/ไอคอน “เมนู” เมนูจะเปิดขึ้นพร้อมกับองค์ประกอบเพิ่มเติม

jQuery(document).ready(function($)( /* เพิ่มไอคอนเมนูไว้ข้างหน้า */ $("#nav-wrap").prepend("Menu"); /* สลับ nav */ $("#menu-icon" ).on("คลิก", ​​function())( $("#nav").slideToggle(); $(this).toggleClass("active"); ));

jQuery(เอกสาร) พร้อม(ฟังก์ชั่น($)(

/* นำหน้าไอคอนเมนู */

$("#nav-wrap") . เติมหน้า("เมนู");

/* สลับการนำทาง */

$("#เมนูไอคอน"). บน ("คลิก" , ฟังก์ชั่น () (

$("#nav") . สไลด์สลับ();

$(นี้) toggleClass("ใช้งานอยู่");

} ) ;

} ) ;

โค้ด HTML จะมีลักษณะดังนี้ (โดยคลิก "ดูองค์ประกอบ" หรือดูโค้ดที่สร้างขึ้น)

เมนู

< nav id = "nav-wrap" >

< div id = "menu-icon" >เมนู< / div >

< ul id = "nav" >

ฉันเสนอให้พิจารณาเทคนิคในการสร้างการตั้งค่าที่เรียบง่ายและยืดหยุ่นมาก และยังมีเมนูที่ปรับเปลี่ยนได้ค่อนข้างมีประสิทธิภาพ โดยใช้มาร์กอัปความหมายล้วนๆ เพื่อใช้การออกแบบที่ปรับเปลี่ยนได้ โดยไม่ต้อง การเชื่อมต่อจาวาสคริปต์- ด้วยเหตุนี้ เมื่อใช้ CSS เราจะได้เมนูที่สามารถจัดชิดซ้าย ขวา หรือตำแหน่งตรงกลาง รายการที่ใช้งานอยู่/ปัจจุบันจะถูกไฮไลต์ เมนูที่สามารถจัดเรียงตัวเองใหม่ได้อย่างรวดเร็วเมื่อปรับขนาดหน้าต่างเบราว์เซอร์ ลงในแถบนำทางแนวตั้งแบบเลื่อนลงที่ดูดีบนหน้าจออุปกรณ์ผู้ใช้มือถือต่างๆ (แท็บเล็ต สมาร์ทโฟน แล็ปท็อป และโทรศัพท์มือถือ)

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


มาร์กอัป HTML

ก่อนอื่น เราต้องมาร์กอัปโครงสร้างหลักทั้งหมดของเมนูของเรา เรากำลังสร้างองค์ประกอบการนำทาง ซึ่งหมายความว่าการใช้องค์ประกอบ HTML5 ซึ่งเป็นแท็กที่มีคลาสชื่อเดียวกันจะสมเหตุสมผลและใช้งานได้จริงสำหรับการติดตามในภายหลัง การจัดรูปแบบ CSSสไตล์ตลอดจนการสร้างและ ตำแหน่งที่แน่นอนแบบเลื่อนลง แถบนำทาง- คลาสปัจจุบันชี้ไปที่ลิงก์เมนูที่ใช้งานอยู่/ปัจจุบัน รูปร่างซึ่งเราจะสร้างโดยใช้ css

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

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

ทั้งหมด. เราได้แยกส่วนมาร์กอัปพื้นฐานออกแล้ว คลาสต่างๆ ได้รับการลงทะเบียนแล้ว และเพิ่มไม้ค้ำยันแล้ว ตอนนี้เรามาดูการกำหนดรูปแบบของรายการเมนู กำหนดรูปลักษณ์และทำให้เมนูของเราปรับเปลี่ยนได้อย่างแท้จริง

CSS กำหนดสไตล์

ชุดสไตล์ เมนูซีเอสเอสใต้จอคอมพิวเตอร์ตั้งโต๊ะ ค่อนข้างมาตรฐาน ไม่เห็นประเด็นในการลงรายละเอียด ฉันแค่อยากจะดึงความสนใจของคุณไปที่ความจริงที่ว่าฉันได้ระบุ display:inline-block แทนที่จะเป็นองค์ประกอบ float:left

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

      /* เมนู */ .nav ( ระยะขอบ : 20px 0 ; ) .nav ul ( ระยะขอบ : 0 ; การขยาย : 0 ; ) .nav li ( ระยะขอบ : 0 5px 10px 0 ; การขยาย : 0 ; สไตล์รายการ : ไม่มี ; จอแสดงผล : inline-block ; * display : inline ; /* ie7 */ ) .nav a ( ขยาย : 3px 12px ; ตกแต่งข้อความ : none ; color : #999 ; line-height : 100% ; ) .nav a : hover ( color : #000 ; ) .nav .current a ( พื้นหลัง : #999 ; color : #fff ; รัศมีเส้นขอบ : 3px ; )

      /* เมนู */ .nav ( ระยะขอบ: 20px 0; ) .nav ul ( ระยะขอบ: 0; การขยาย: 0; ) .nav li (ระยะขอบ: 0 5px 10px 0; การขยาย: 0; สไตล์รายการ: ไม่มี; จอแสดงผล: inline-block; *display:inline; /* ie7 */ ) .nav a ( การขยาย: 3px 12px; การตกแต่งข้อความ: none; color: #999; line-height: 100%; ) .nav a:hover ( color : #000; ) .nav .current a ( พื้นหลัง: #999; สี: #fff; รัศมีเส้นขอบ: 3px; )

      ส่วน .nav a:hover และ .nav .current มีหน้าที่รับผิดชอบในการเปลี่ยนสีของลิงก์และพื้นหลังของรายการเมนูที่ใช้งานอยู่/ปัจจุบัน ตามลำดับ ฉันไม่ได้พยายามที่จะฉลาดเกินไปในตัวอย่างนี้ ฉันทำทุกอย่างด้วยจิตวิญญาณของความเรียบง่าย เมื่อคุณวางเมาส์เหนือลิงก์ที่สีเปลี่ยนไป ข้อความจะกลายเป็นสีดำ: #000; และสำหรับรายการที่ใช้งานอยู่ ฉันเพิ่มพื้นหลัง: #999; แทนที่สีตัวอักษรด้วยสีขาว: #fff; และปัดขอบด้วยรัศมีเส้นขอบเล็กน้อย: 3px; ที่ปุ่มผลลัพธ์ คุณสามารถเพ้อฝันและทดลองเรื่องนี้ได้ตามใจชอบ

      จัดกึ่งกลางและไปทางขวา

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

      /* เมนูทางด้านขวา */ .nav .right ul ( text-align : right ; ) /* เมนูตรงกลาง */ .nav .center ul ( text-align : center ; )

      /* เมนูทางด้านขวา */ .nav.right ul ( text-align: right; ) /* เมนูตรงกลาง */ .nav.center ul ( text-align: center; )

      การปรับเมนู

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


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

        ด้านบนในตำแหน่งที่แน่นอน: สัมบูรณ์; - การใช้คุณสมบัติ display: none เราจะซ่อนรายการเมนู li ทั้งหมด เหลือเพียงรายการที่ใช้งานอยู่เท่านั้น ช่วงเวลาปัจจุบันเชื่อมโยงกับคลาสปัจจุบัน โดยกำหนดคุณสมบัติ display: block
        เมื่อคุณวางเมาส์เหนือแถบนำทางที่จัดกลุ่ม รายการเมนูทั้งหมดควรแสดงเป็นรายการแบบเลื่อนลง สำหรับสิ่งนี้ เรากำหนดกฎ .nav ul:hover li ด้วยโค้ดฟังก์ชัน>display: block สำหรับรายการที่ใช้งานอยู่/ปัจจุบัน เราจะเพิ่มไอคอนเพื่อเน้นรายการเหล่านั้นจากรายการที่เหลือ
        หากคุณต้องการย้ายเมนูไปทางขวาหรือจัดกึ่งกลาง ให้ใช้คุณสมบัติการวางตำแหน่งด้านซ้ายและขวาสำหรับรายการ ul ของเมนูของเรา

        หน้าจอ @media และ (ความกว้างสูงสุด: 600px) (.nav (ตำแหน่ง: สัมพันธ์; ความสูงขั้นต่ำ: 40px;).nav ul (ความกว้าง: 180px; การขยาย: 5px 0; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0 ; เส้นขอบ : solid 1px #aaa ; พื้นหลัง : #FAFAFA url (images/icon-menu.png ) ไม่ซ้ำ 10px 11px ; border-radius : 5px ; ; .nav li ( แสดง : none ; /* ซ่อนทั้งหมด
      • คะแนน */ ระยะขอบ : 0 ;
      • ) .nav .current ( display : block ; /* แสดงเฉพาะที่ใช้งานอยู่เท่านั้น
        		•

        รายการ */ ) .nav a ( display : block ; padding : 5px 5px 5px 32px ; text-align : left ; ) .nav .current a ( พื้นหลัง : none ; color : #666 ; ) /* เมื่อเลื่อนเมาส์ไปเหนือรายการเมนู * / .nav ul: hover ( ภาพพื้นหลัง : none ; ) .nav ul: hover li ( display : block ; margin : 0 0 5px ; ) .nav ul : hover current ( พื้นหลัง : url ( images/icon-check. png ) ไม่ทำซ้ำ 10px 7px ; ) /* เมนูตอบสนองทางด้านขวา */ .nav .right ul ( ซ้าย : auto ; ขวา : 0 ; ) /* เมนูตอบสนองที่อยู่ตรงกลาง */ .nav .center ul ( left : 50% ; ) ขอบซ้าย : -90px ;

      • หน้าจอ @media และ (ความกว้างสูงสุด: 600px) ( .nav ( ตำแหน่ง: สัมพันธ์; ความสูงขั้นต่ำ: 40px; ) .nav ul ( ความกว้าง: 180px; การขยาย: 5px 0; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0 ; เส้นขอบ: ทึบ 1px #aaa; พื้นหลัง: #FAFAFA url(images/icon-menu.png) ไม่ซ้ำ 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,. 3); ) .nav li ( แสดง: ไม่มี; /* ซ่อนทั้งหมด
      • คะแนน */ ระยะขอบ: 0;

        ) .nav .current ( display: block; /* แสดงเฉพาะที่ใช้งานอยู่ในปัจจุบันเท่านั้น

        รายการ */ ) .nav a ( display: block; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( พื้นหลัง: none; color: #666; ) /* เมื่อวางเมาส์เหนือรายการเมนู * / .nav ul:hover ( ภาพพื้นหลัง: none; ) .nav ul:hover li ( จอแสดงผล: block; ระยะขอบ: 0 0 5px; ) .nav ul:hover .current ( พื้นหลัง: url(images/icon-check. png) ไม่ทำซ้ำ 10px 7px; ) /* เมนูตอบสนองทางด้านขวา */ .nav.right ul ( ซ้าย: อัตโนมัติ; ขวา: 0; ) /* เมนูตอบสนองที่อยู่ตรงกลาง */ .nav.center ul ( ซ้าย: 50%; ขอบซ้าย: -90px;
        แปลและดัดแปลงฟรี: Andrey /driver/

        ผู้เล่นใหม่ 16 มกราคม 2560 เวลา 01:28 น. เมนูมือถือสำหรับเว็บไซต์ ปลั๊กอินเมนู JQuery
        • jQuery

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

        การเชื่อมต่อ. ผู้เขียนแนะนำให้ใช้ประเภทเอกสาร html 5 ฉันคิดว่าเราไม่ต้องการทางเลือกอื่น เราใช้มัน ในส่วนหัวของเอกสารของเรา เราต้องเชื่อมต่อ JQuery เองและไฟล์ปลั๊กอินสองไฟล์ เราเชื่อมต่อ:


        หากเราต้องการเมนูบนแคนวาส เราจำเป็นต้องรวมไฟล์ jquery.mmenu.oncanvas.min.js และ jquery.mmenu.oncanvas.css On-canvas เป็นเวอร์ชันของเมนูที่มีตำแหน่ง:สัมบูรณ์; ความกว้าง:100%; ความสูง:100% ซึ่งจะขยายให้เต็มหน้าจอ

        การสร้างเมนู เมนูถูกสร้างขึ้นอย่างง่ายดาย เช่นเดียวกับรายการ html ที่ไม่ได้เรียงลำดับ ปลั๊กอินรองรับการซ้อนรายการ ทั้งหมดนี้ควรอยู่ในแท็ก nav ซึ่งมีรหัส

        • บ้าน
        • เกี่ยวกับเรา
          • ประวัติศาสตร์
          • ทีมงาน
          • ที่อยู่ของเรา
        • ติดต่อ

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

        • บ้าน
        • เกี่ยวกับเรา
          • ประวัติศาสตร์
          • ทีมงาน
          • ที่อยู่ของเรา
        • ติดต่อ

        2. เพื่อให้เมนูย่อยมองเห็นได้ตลอดเวลา คุณต้องเพิ่มคลาส "Inset" เข้าไป
        3. เพิ่มคลาส "ที่เลือก" ลงในรายการเมนูเพื่อให้ไฮไลต์
        4. คุณสามารถสร้างตัวคั่นได้ดังนี้

        • เว็บไซต์
        • บ้าน
        • เกี่ยวกับเรา
        • ติดต่อ

        Javascript คุณจะต้องมีปุ่มที่เมื่อคลิกแล้วจะเปิดเมนู ฉันแนะนำให้ใช้แฮมเบอร์เกอร์เหล่านี้ คุณสามารถอ่านวิธีใช้งานได้ที่นั่น กล่าวโดยสรุป คุณจะต้องดาวน์โหลดสไตล์แฮมเบอร์เกอร์ เชื่อมต่อกับหน้า และเพิ่มโค้ด html ต่อไปนี้โดยประมาณ


        ฉันใช้คลาสคงที่เพื่อตั้งค่าตำแหน่ง:คงที่

        เพื่อให้เมนูมือถือของเราใช้งานได้ สิ่งที่เราต้องทำคือเชื่อมต่อสิ่งต่อไปนี้ รหัสจาวาสคริปต์ไปที่หน้า:

        $(document).ready(function() ( var $menu = $("#my-menu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenu"); $icon.on("คลิก", ​​function() ( API.open(); )); API.bind("opened", function() ( setTimeout(function() ( $icon.addClass ("ใช้งานอยู่"); $icon.on("คลิก", ​​function() ( API.close(); )); setTimeout(function() ( $icon.removeClass("is-active") ; , 100); $icon.on("คลิก", ​​function() ( API.open(); ));

        ปัญหาในการใช้ mmenu ฉันพบปัญหาสองประการ ตอนแรกฉันพยายามห่อเนื้อหาทั้งหมดของร่างกายเข้าไป แท็ก divเพราะนี่เป็นสิ่งจำเป็นสำหรับปลั๊กอินในการทำงาน แต่ในกรณีนี้ ด้วยเหตุผลบางอย่าง มันจึงซ่อนเนื้อหาทั้งหมดที่ฉันห่อไว้ ฉันก็เลยยอมแพ้ หากคุณไม่รวมทุกอย่างในร่างกายไว้ใน div ปลั๊กอินก็จะจัดการให้คุณ แต่จะมีปัญหากับการรันสคริปต์ js และอื่นๆ สองครั้ง หลังจากนั้น ฉันพบปัญหาที่สองทันที: ปลั๊กอินไม่ได้รวมสิ่งอื่นใดนอกจาก div นั่นคือ หากคุณมี h1 อยู่ภายในเนื้อหาโดยตรง (body > h1) เช่นเดียวกับที่ฉันมี mmenu จะข้ามพวกมันและจะล้อม div ที่อยู่ด้านหลัง ฉันแก้ไขปัญหานี้โดยเพียงแค่ล้อมแท็กอื่น ๆ ทั้งหมดไว้ใน div เพื่อให้ตรง ๆ ภายในร่างกายเหลือเพียง div เท่านั้น

        สิ่งนี้ทำให้ทุกอย่างได้ผลสำหรับฉัน ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับคุณ

        แท็ก: การออกแบบที่ตอบสนอง, เค้าโครง, ปลั๊กอิน jquery

      • การพัฒนาเว็บไซต์

        • หลายๆ คนกำลังพยายามปรับเว็บไซต์ให้เหมาะกับอุปกรณ์เคลื่อนที่อยู่แล้ว พวกเขาใช้คุณสมบัติใหม่ของ CSS3 ทั้งบนไซต์ธรรมดาและบนไซต์ที่ซับซ้อนกว่ามาก ปัญหาบางอย่างเกิดขึ้นในกระบวนการนี้ และปัญหาที่สำคัญที่สุดประการหนึ่งคือพฤติกรรมของเมนูไซต์เมื่อดูบนหน้าจอขนาดเล็ก ตัดสินใจ ปัญหานี้ตามที่ปรากฎในหลายวิธี สำหรับฉันมันก็เหมือนกัน งานนี้เมื่อเร็ว ๆ นี้มีความเกี่ยวข้องเป็นพิเศษ ดังนั้นฉันจึงจับตาดูเนื้อหาบนอินเทอร์เน็ตที่เกี่ยวข้อง การออกแบบที่ปรับเปลี่ยนได้- และเมื่อไม่นานมานี้ฉันก็ได้เจอ การวิเคราะห์ที่ดีรูปแบบที่มีอยู่ การนำทางแบบปรับได้.

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

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

        มีหลายวิธีในการนำทางแบบปรับเปลี่ยนได้ มาดูกันตามลำดับ

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

        วิธีการนี้ใช้ในธีมแบบเรียบง่าย

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

        2. ลิงก์ไปยังส่วนท้าย เพื่อสาธิตการนำทางพร้อมคำอธิบายแบบเต็ม

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

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

        3. รายการแบบเลื่อนลง () แทนการนำทางสาธิตพร้อมคำอธิบายแบบเต็ม

        แนวทางนี้เริ่มแพร่หลายมากขึ้นเรื่อยๆ ใช้ Javascript ซึ่ง "เรียกใช้" รายการเมนูทั้งหมดเพื่อสร้างรายการจากรายการเหล่านั้น นั่นคือการนำทางจะเป็นองค์ประกอบอินเทอร์เฟซที่รองรับ ระบบปฏิบัติการผู้เยี่ยมชม

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

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

        4. เมนูแบบเลื่อนลงสาธิตพร้อมคำอธิบายแบบเต็ม

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

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

        5. เมนูเลื่อนพร้อมการสาธิตการเปลี่ยนเนื้อหาพร้อมคำอธิบายแบบเต็ม

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

        ไม่สามารถหาวิธีแก้ปัญหาสำเร็จรูปได้ เราจึงสร้างโซลูชันขึ้นมาเอง

        $(function())( $("body").addClass("js"); $(".link_nav").click(function())( $("body").toggleClass("mobile_nav"); )) ; ))

        จริงๆ แล้วสคริปท์ไม่เยอะนะครับ

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



    • บทความที่เกี่ยวข้อง