ម៉ឺនុយបញ្ឈរសម្រាប់តំបន់បណ្តាញនៅក្នុងសំណុំបែបបទនៃការ accordion នៅលើ jQuery មួយ

ម៉ឺនុយត្រូវបានគេស្គាល់ថាជាផ្នែកសំខាន់មួយនៃគេហទំព័រ។ ការរុករកគួរឱ្យចាប់អារម្មណ៍នៃធនធានអ៊ីនធើណែតអាចទាក់ទាញអ្នកទស្សនា។ លើសពីនេះទៀតទ្រព្យសម្បត្តិសំខាន់របស់ម៉ឺនុយណាក៏មានលក្ខណៈតូចចង្អៀតដែរ។ ម៉ឺនុយបញ្ឈរសាមញ្ញត្រូវបានបង្កើតយ៉ាងងាយស្រួលដោយប្រើ HTML និង CSS ។ ប៉ុន្តែយើងនឹងបន្តទៅទៀត: ស្វែងយល់ពីរបៀបបង្កើតបញ្ជីអ័រតូយ៉ូនជាមួយ jQuery ។

បង្កើតម៉ឺនុយមួយ - "accordion"

តើអ្វីទៅជាម៉ឺនុយបញ្ឈរនៅក្នុងសំណុំបែបបទនៃការ accordion មួយ? នេះគឺជាបញ្ជីទម្លាក់ចុះដែលបង្កើតការធ្វើនាវាចរណ៍ដ៏ងាយស្រួលនិងផ្តល់នូវរូបរាងទាន់សម័យចំពោះគេហទំព័រ។ ម៉ឺនុយដែលបានប្រតិបត្តិក្នុងទម្រង់នេះអនុញ្ញាតឱ្យអ្នកបញ្ចូលធាតុរងជាច្រើន។ ការចូលដំណើរការពួកវាកើតឡើងនៅពេលអ្នកចុចលើធាតុដែលចង់បាន។ នរណាម្នាក់នឹងនិយាយថាអ្នកអាចបង្កើតម៉ឺនុយសាមញ្ញមួយនៅក្នុងរចនាប័ទ្មនេះដោយមិនចាំបាច់ប្រើ jQuery ទេ។ បាទវាគឺ។ ប៉ុន្តែវត្ថុបែបនេះនឹងមិនងាយស្រួលសម្រាប់ម្ចាស់ទូរស័ព្ទឬស្មាតហ្វូននោះទេ។ ចូរបង្កើតម៉ឺនុយបញ្ឈរដែលទាក់ទាញសម្រាប់មនុស្សគ្រប់គ្នា។ បន្ទាប់មកដោយការផ្លាស់ប្តូររចនាប័ទ្មពណ៌នៃការរុករកបែបនេះវានឹងក្លាយជាអាចធ្វើទៅបានតាមបំណងការរចនាសម្រាប់តំបន់ណាមួយ។

កូដ HTML

ដូច្នេះដើម្បីបង្កើតម៉ឺនុយបញ្ឈររបស់យើងដំបូងអ្នកត្រូវវាយបញ្ចូលកូដ HTML ដែលនឹងមានបន្ទាត់ដូចខាងក្រោម:

រក្សាទុកកូដនេះនៅក្នុងឯកសារដែលមានឈ្មោះថា Accord_menu.html ។

ដូចដែលអ្នកអាចឃើញយើងបានបង្កើតបញ្ជីគ្មានលំដាប់។ វាមាន 3 ចំណុចសំខាន់ៗ:

- រូបថត

- ភាពយន្ត;

- សៀវភៅ។

ធាតុនីមួយៗមានធាតុរងច្រើន។ ដែលមាន #, អ្នកនឹងត្រូវបន្ថែមតំណ។ ឥឡូវនេះវាមានសារៈសំខាន់ណាស់ក្នុងការពិពណ៌នាពីរចនាប័ទ្ម។ វាអាស្រ័យលើអ្វីដែលធនធានអ៊ីនធឺណិតរបស់អ្នកមើលទៅ។ ម៉ឺនុយបញ្ឈរសម្រាប់វែបសាយត៍គួរមានភាពស៊ីចង្វាក់គ្នាក្នុងការរចនារបស់វា។

CSS

ជាមួយរចនាប័ទ្មអ្នកមិនគួរមានការលំបាកណាមួយទេ។ យើងគ្រាន់តែកត់សំគាល់ថានៅក្នុងឧទាហរណ៍នេះការបំពេញពណ៌ជម្រាលត្រូវបានប្រើ។ ខាងក្រោមនេះជារូបរាងរបស់ CSS:

ឯកសារ CSS បញ្ជាក់ពណ៌ទំហំរូបសញ្ញាត្រូវបានយកចេញនៅខាងឆ្វេងនៃធាតុបញ្ជី។ វាត្រូវបានកំណត់ពីរបៀបដែលចំណុចនិងអនុម៉ឺនុយនីមួយៗនឹងមានឥរិយាបថនៅពេលអ្នកដាក់វាលើវា។ ឧទាហរណ៍:

# E1fee2 ជា ពណ៌បៃតងភ្លឺនៃចំណុច រង។

# C4f0f7 គឺជាពណ៌លាំ ៗ នៃអនុចំណុចនៅពេលអ្នកដាក់លើវា។

លក្ខណសម្បត្តិបង្ហាញត្រូវបានកំណត់ដើម្បីរារាំងការចូលបន្ទាត់ចាំបាច់និងទំហំ។ ពណ៌, ទំហំ, ប្រភេទពុម្ពអក្សរ, ទីតាំង - ទាំងអស់នេះក៏ពណ៌នាផងដែរនៅក្នុងឯកសារ CSS ។ ដាក់ឈ្មោះវាឧទាហរណ៍ accordionmenu_my1.css ។

ភ្ជាប់ jQuery សម្រាប់ការធ្វើឱ្យប្រសើរឡើងម៉ឺនុយ

ដូចដែលអ្នកចងចាំគោលដៅរបស់យើងគឺបង្កើតម៉ឺនុយ jQuery បញ្ឈរមួយ។ ប្រសិនបើអ្នកជាអ្នកថ្មីចំពោះបច្ចេកវិទ្យានេះសូមកុំធ្លាក់ទឹកចិត្ត។ ប្រើឃ្លាំង Google និងភ្ជាប់ស្គ្រីប jQuery ។ នេះនឹងធ្វើឱ្យម៉ឺនុយកាន់តែទាក់ទាញ។ JQuery គឺជាបណ្ណាល័យ JavaScript មួយដែលមានមូលដ្ឋានលើអន្តរកម្មនៃការបញ្ចូល HTML និង JavaScript ។ JQuery អនុញ្ញាតឱ្យអ្នកចូលប្រើមាតិកានិងគុណលក្ខណៈនៃធាតុ។

ដូច្នេះយើងភ្ជាប់ស្គ្រីបចាំបាច់នៅក្នុងតួរបស់ឯកសារ HTML ហើយកំណត់ក្បួនសម្រាប់រក្សាទុកអញ្ញត្តិ 2 ដោយមិនរាប់បញ្ចូលការលោតធាតុ។ យើងបង្កើតលេខកូដដែលបិទផ្ទាំងផ្សេងទៀតនៅពេលអ្នកបើកវាដោយចុចកណ្តុរ។ នេះជារបៀបដែលវាមើលទៅ:

រក្សាទុកការផ្លាស់ប្តូរទាំងអស់មើលរបៀបដែលម៉ឺនុយមើលនៅក្នុងកម្មវិធីរុករក។ នេះគឺជាលទ្ធផលរួមនៃការងារនេះ: ជាលទ្ធផលយើងនឹងមានម៉ឺនុយទាក់ទាញដែលតែងតែអាចផ្លាស់ប្តូរបានអាស្រ័យលើចំណង់ចំណូលចិត្តរបស់អ្នក។ ហើយដោយការទទួលបានចំណេះដឹងថ្មីនៅក្នុងវិស័យ jQuery, CSS, អ្នកនឹងបង្កើតធាតុតែមួយគត់នៃគេហទំព័រនេះ, ធ្វើអោយប្រសើរឡើងនូវជំនាញជាក់ស្តែងរបស់អ្នក។