មេរៀនទី៤: Menu HTML ជាមួយ CSS

មេរៀនទី៤: បង្កើត Menu នៅក្នុង HTML ជាមួយ CSS  

ការបង្កើត Menu ដោយប្រើ HTML + CSS មកបង្ហាញ មិត្តអ្នក អានដូចខាងក្រោម។ របៀបសរសេកូដក្នុង HTML ដំបូងយើងត្រូវបង្កើត Menu ជា Link រួមជាមួយនិង List ជាមុនសិន 11ផ្នែក CSS យើងត្រូវបង្កើត File CSS មួយទៀតនៅក្នុង Folder CSS ដោយដាក់ឈ្មោះថា menu.css ។
* ដោយសារ Menu របស់យើងចែកចេញជា បី ថ្នាក់គឺ

– Main Menu
– Submenu
– Sun-in-sub
ដំណាក់កាលទី១:
-ចំណាំ យើងត្រូវកំណត់ Main Menu ជាមុនសិន ដូច្នេះការសេសកូដ HTML ក៏សូមត្រឹមតែសរសេ Main Menu សិនបានហើយ

ចាប់ផ្តើមសរសេកូដ

// កំណត់ប្រវែងកម្ពស់ និងបណ្តោយ រួមទាំងពណ៌ផ្ទៃរបស់ Menu
1// កំណត់ពណ៌ឲ្យ Text របស់ Menu

.menu a{color:MenuText;}
// កំណត់ឲ្យ ul & li គ្មាន Margin & Padding
1// កំណត់ឲ្យរាល់ Link ទាំងអស់របស់ A គ្មានបន្ទាត់
ul li a{text-decoration:none;}

// កំណត់រាល់ ul នៅក្នុង Menu ត្រូវមានBackground ពណ៌ទឹកក្រូច និងបង្ហាញជាលក្ខណៈ Block
1// កំណត់ឲ្យរាល់ List ទាំងអស់ត្រូវ ប្តូរមករៀបជាជួរវិញ
1លទ្ធផល
1Step 2:
-ចំណាំ : ​បន្ទាប់មកយើងធ្វើ Submenu ដូច្នេះសូមសរសេកូដ Submenu ចូល HTML មុននិង Apply CSS

Start Code:
// ពេល Hover លើ Menu ដែលជា Main Menu ឪ្យចេញ Sub Menu
1// Apply Style ឲ្យ Sub Menu
1លទ្ធផល:
1Step 3:
-ចំណាំ : ​បន្ទាប់មកយើងធ្វើ SUB in SUB menu ដូច្នេះសូមសរសេកូដ SUB in SUB menu ចូល HTML មុននិង Apply CSS

Start Code: កំណត់ឲ្យ Sub in Sub ចេញពេលយក Mouse ដាក់លើ Submenu
1លទ្ធផល
1