For Android device For iOS device

ធ្នូ

ការ​បង្កើត Menu ផ្ដេក​ជាមួយនឹង CSS

នៅ​ក្នុង​លេខនេះ យើងនឹងលើកយក property មួយចំនួន ដើម្បី​បង្កើត menu ផ្ដេកដូចរូប​ខាងក្រោម សម្រាប់​ដាក់លើគេហទំព័ររបស់​លោកអ្នក ។

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

ដើម្បី​បង្កើត menu ​ខាងលើ​លោកអ្នក​គប្បីត្រូវចេះភាសា HTML លើការ​បង្កើត <ul> ហើយយើងនឹង​សរសេរ style (CSS) ដើម្បី​ប្ដូរ <ul> ​ឲ្យ​ទៅជាអក្សរ​តម្រៀប​គ្នា​ជា​លក្ខណៈ​ដេកដូចរូប​ខាងលើ ។

កូដ​ខាងក្រោម​គឺជាការ​ប្រើ <ul> ដើម្បី​បង្កើត Menu (ដូច​ខាងលើ​)

​ប្រសិនបើ​យើង​មិនទាន់​សរសេរ style (CSS) ទេ <ul> នេះមានរូបរាងដូចរូប​ខាងក្រោម​៖

ដើម្បី​ងាយស្រួល​ក្នុង​ការ​សរសេរ style ​ឲ្យ <ul> ​ខាងលើ​ក្លាយជា menu យើងដាក់ <div> ​ដែល​មាន id=”navigation” ក្ដោប <ul> នេះ ។

​បន្ទាប់មក​នៅ​ក្នុង​ផ្នែក <head> នៃ​ HTML យើងនឹង​សរសេរ style (CSS) ​ឲ្យ <ul> ដូច​ខាងក្រោម​៖

ពន្យល់កូដ

បន្ទាត់ទី៦ ៖ យើង​សរសេរ style ​ឈ្មោះ navigation ទៅ​ឲ្យ tag <div> ដោយ​ប្រើ​ប្រាស់​ selector ID ហើយយើងបាន​កំណត់ properties មួយចំនួនទៅ​ឲ្យ​វាដូច​ខាងក្រោម​៖

width: 749px ​សម្រាប់​កំណត់​ប្រវែង 749px ទៅ​ឲ្យ navigation menu

height: 30px ​សម្រាប់​កំណត់​កម្ពស់ 30px ទៅ​ឲ្យ navigation menu

background-image: url (Image.png) ​សម្រាប់​ដាក់ផ្ទៃខាងក្រោយជា​រូបភាព​

margin-top: 99px ​កំណត់​គម្លាតពីគែមរបស់ browser ​ផ្នែក​ខាងលើ ចំនួន​ 99px

បន្ទាត់ទី១២ ៖ កំណត់ properties ​ឲ្យ tag <ul> ​ដែល​ថិតនៅ​ក្នុង #navigation

margin: 0px ​កំណត់​គម្លាត​ផ្នែក​ខាងលើ ខាង​ស្ដាំ ខាង​ឆ្វេង និង​ខាងក្រោម ស្មើនឹង 0px

padding: 0px ​កំណត់​គម្លាតនៅជុំវិញអក្សរស្មើ 0px

បន្ទាត់ទី១៥ កំណត់ properties ​ឲ្យ tag <li> ​ដែល​ជាធាតុរបស់ ul

list-style: none ​មានន័យថា​មិន​ឲ្យ​មានសញ្ញានៅ​ផ្នែក​ខាង​ឆ្វេង​នៃធាតុ li ​ដែល​ស្ថិតនៅ​ក្នុង​ធាតុ​ ul

float: left ​ឲ្យ​វា​បង្ហាញ​នៅខាង​ឆ្វេង ជាជួរ

បន្ទាត់ទី១៩ កំណត់ properties ទៅ​ឲ្យ a link ​ដែល​ស្ថិតនៅ​ក្នុង li

display: block ​បង្ហាញ​ជា​ផ្នែក​ៗ​

padding: 5px 70px ​កំណត់​គម្លាត​ផ្នែក​ខាងលើ 5px និង ផ្នែក​ខាង​ស្ដាំ 70px ពីអក្សរ

text-decoration: none ​បំបាត់​នៅការគូសបន្ទាត់ពី​ខាងក្រោម​របស់ link

color: #fff ធ្វើ​ឲ្យ​អក្សរពណ៌ស (FFF)

បន្ទាត់ទី២៥ កំណត់ properties ​ឲ្យ a link

a:hover {background:#384;} ​កំណត់​ឲ្យ​វា​ធ្វើការ​ផ្លាស់ប្ដូរផ្ទៃខាងក្រោយជាពណ៌ #384 ​នៅពេល​ដែល​គេយក mouse ទៅដាក់ពីលើ​ menu

ឥឡូវសូម​ធ្វើការ run html ​របស់អ្នក​ម្ដងទៀតនោះ​លោកអ្នក​នឹងឃើញវាប្ដូររូបរាង menu តាមការចង់បានរបស់​លោកអ្នក​ដូចរូប​ខាងលើ ៕

*** ដកស្រង់ចេញពី​ទស្សនាវដ្ដី​អាន-ANT ច្បាប់​ទី ៣៤ ប្រចាំខែ មករា ឆ្នាំ ២០១២ កែ​សម្រួល​ឡើងវិញនៅខែ សីហា ឆ្នាំ ២០១៦

*** ​កម្មវិធី ANT Music Learner 2016 ដំណើរ​ជាមួយ Android 4.4 ឡើងទៅ)

https://play.google.com/store/apps/details?id=com.antkh.antmusiclearning

*** សម្រាប់​ព័ត៌មាន​វគ្គ​សិក្សា​កុំព្យូទ័រ​នៅអាន-ANT http://training.antkh.com/
*** សម្រាប់​ស្នាដៃសិស្ស​ដែល​ធ្លាប់​បញ្ចប់​វគ្គ​សិក្សា​នៅអាន-ANT http://training.antkh.com/achievements/

​សម្រាប់​ព័ត៌មាន​ទំនាក់ទំនងមកយើង​ខ្ញុំ ៖ លេខ​ទូរសព្ទ ០១០ / ០១៦ ៦៦៦ ៦៥៣

ឬ​ Facebook: https://www.facebook.com/anttrainning

Facebook Page: ANT Magazine

Facebook Group: https://www.facebook.com/groups/ANTTrGroup/

website: www.antkh.com

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

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