របៀបធ្វើ Responsive Menu កូដ HTML និង CSS
បច្ចុប្បន្ននេះ ការធ្វើឲ្យ website ដែលមាន responsive គឺជាការទាញចំណាប់រម្មណ៍របស់អ្នកទស្សនា លើគេហទំព័រ ។ ម្យ៉ាងវិញទៀតការរីកចម្រើនទៅលើឧបករណ៍ប្រើប្រាស់ដែលអាចដំណើរការទៅកាន់ website បានគឺមានច្រើន ដូចជាទូរស័ព្ទជាដើម ដូច្នេះDeveloper ត្រូវធ្វើវាតម្រូវទៅតាមប្រភេទ devices ទាំងនោះ ។ ហើយនៅក្នុងអត្ថបទនេះអាន-ANT នឹងលើកយកពីរបៀបធ្វើ menu ដែលអាចបត់បែនទៅតាមប្រភេទនៃ ទំហំ screen របស់ ឧបករណ៍ ។
ដើម្បីទទូបានវា សូមធ្វើការអនុវត្ដ ដូចខាងក្រោម៖
ជំហានទី១៖
បង្កើត file មួយដោយដាក់ឈ្មោះថា responsive.html រួចហើយសរសេរកូដ HTML ខាងក្រោមបញ្ចូល
នៅបន្ទាត់ទី១៦ <img src=”icon.png”> គឺជាការដាក់រូបទៅឲ្យ menu នៅពេលដែលវា respond
ជំហានទី២៖
នៅបន្ទាត់ទី៥ ក្នុង file responsive.html សរសេរកូដ CSS បញ្ចូល ដូចខាងក្រោម
នៅបន្ទាត់ទី២៩ មានន័យថាយើងមិនបង្ហាញរូបភាពដែលបានដាក់នៅក្នុង menu ទេ ដោយឲ្យវាបង្ហាញនៅពេលដែលយើងសរសេរ responsive ។
ជំហានទី៣៖
បន្ទាប់ពីយើងសរសេរកូដ HTML និង CSS ឲ្យចេញជា menu ហើយ យើងត្រូវសរសេរកូដ CSS responsive ទៀត ដូចខាងក្រោម (សរសេរនៅខាងក្រោម កូដCSS ខាងលើ ក្នុង <style> tag)
– នៅបន្ទាត់ទី៣១ ដល់ទី៣៧ គឺជា responsive កូដ នៅពេលដែលទំហំ screen ចាប់ពី680px ចុះមក្រោម ។ ul.menu li:not (:first-child) {display: none;} មានន័យថា យើងបង្ហាញតែ Home Page តែប៉ុណ្ណោះ ផ្សេងទៀតយើងមិនបង្ហាញទេ នៅពេល screen 680px ។ ប៉ុន្ដែយើងបង្ហាញរូបភាព icon សម្រាប់ responsive:
ul.menu li.icon {
float: right;
display: inline-block;
}
– នៅបន្ទាត់ទី៣៩ ដល់ទី៥៤ គឺជាបណ្ដុំនៃកូដ ដែលជួយឲ្យ menu របស់យើង responsive ។ ហើយ class responsive នឹងហៅទៅប្រើនៅក្នុងកូដ JavaScript ។
ជំហានទី៤៖
នៅក្នុង <body> tag សរសេរកូដ JavaScript ខាងក្រោមបញ្ចូល ដើម្បីដាក់ event ទៅលើ icon responsive
– យើងចាប់យក element ដែលមាន id=”mymenu” បន្ទាប់មកយើងសិក្សាលក្ខខណ្ឌថា ប្រសិនបើ element នោះមាន class=”menu” យើងប្ដូរវាចេញ ជំនួសវិញដោយclass=”responsive” ។ ហើយប្រសិនបើ element មានឈ្មោះ class មិនមែនជា class=”menu” ឲ្យវាទៅជា class=”menu” ។
ជំហានទី៥៖
នៅក្នុងកូដ HTML លោកអ្នកត្រូវ ហៅ function របស់ JavaScript ទៅប្រើ ដើម្បីបង្កើត event ដូចខាងក្រោម
ពេលនេះលោកអ្នកអាចដំណើរការកូដរបស់លោកអ្នក នឹងបានលទ្ធផលដូចខាងក្រោម៖
No comments:
Post a Comment