For Android device For iOS device
៣១
តុលា

របៀបធ្វើ Responsive Menu កូដ HTML និង CSS

​បច្ចុប្បន្ន​នេះ ការធ្វើ​ឲ្យ website ​ដែល​មាន responsive គឺជាការទាញចំណាប់អារម្មណ៍​របស់អ្នក​ទស្សនាលើគេហទំព័រ ។ ម្យ៉ាង​វិញទៀតការរីក​ចម្រើន​ទៅលើ​ឧបករណ៍​ប្រើ​ប្រាស់​ដែល​អាច​ដំណើរ​ការ​ទៅកាន់ website បានគឺមាន​ច្រើន​ដូចជា​ទូរស័ព្ទជាដើម ដូច្នេះ Developer ត្រូវធ្វើវា​តម្រូវ​ទៅតាម​ប្រភេទ devices ​ទាំងនោះ ។ ហើយនៅ​ក្នុង​អត្ថបទនេះ អាន-ANT នឹងលើកយកពីរបៀបធ្វើ menu ​ដែល​អាចបត់បែន​ទៅតាម​ប្រភេទ​នៃ ទំហំ​ screen របស់​ឧបករណ៍ ។

សូមចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ប្រចាំ​ថ្ងៃ​

ដើម្បី​ទទួលបានវា សូម​ធ្វើការ​អនុវត្ដដូច​ខាងក្រោម​៖

ជំហានទី១៖

​បង្កើត 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 ដូច​ខាងក្រោម​

ពេលនេះ​លោកអ្នក​អាច​ដំណើរ​ការ​កូដរបស់​លោកអ្នក នឹងបាន​លទ្ធផល​ដូច​ខាងក្រោម​៖

 

*** រៀបរៀងអត្ថបទដោយ៖ លោក សំ រិទ្ឋី ត្រួត​ពិនិត្យ និងកែ​សម្រួល​អត្ថបទដោយ៖ លោក ហេង ពេងលាប

*** មុខវិជ្ផា HTML+HTML5+Dreamweaver តម្លៃ ៥៥ដុល្លា ឬ ២២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​ http://training.antkh.com/html.aspx

*** មុខវិជ្ផា Web Design with CSS + Bootstrap តម្លៃ ៨០ដុល្លា ឬ ៣២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​នេះ http://training.antkh.com/website_design_with_css.aspx

*** សម្រាប់​ស្នាដៃសិស្ស​ដែល​បាន​បញ្ចប់​វគ្គ​គេហទំព័រជា​ច្រើន នៅអាន-ANT http://training.antkh.com/achievements/?c=web

*** សូម​ចូលរួម​ជាសមាជិក ANT Training Group ដើម្បី​តាមដានសម្មភាពប្រចាំ​ថ្ងៃ​ជាមួយអាន-ANT
*** ចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ដែល​ទាក់ទងនឹង​បច្ចេកវិទ្យា​រៀងរាល់​ថ្ងៃ​

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា