បង្កើត Menu នៅក្នុង HTML ជាមួយ CSS

បង្កើត Menu នៅក្នុង HTML ជាមួយ CSS

ការបង្កើត Menu ដោយប្រើ HTML + CSS មកបង្ហាញ មិត្តអ្នក អានដូចខាងក្រោម។ របៀបសរសេកូដក្នុង HTML ដំបូងយើងត្រូវបង្កើត Menu ជា Link រួមជាមួយនិង List ជាមុនសិន ផ្នែក CSS យើងត្រូវបង្កើត File CSS មួយទៀតនៅក្នុង Folder CSS ដោយដាក់ឈ្មោះថា menu.css ។
* ដោយសារ Menu របស់យើងចែកចេញជា បី ថ្នាក់គឺ
- Main Menu
- Submenu
- Sun-in-sub
ដំណាក់កាលទី១:
-ចំណាំ យើងត្រូវកំណត់ Main Menu ជាមុនសិន ដូច្នេះការសេសកូដ HTML ក៏សូមត្រឹមតែសរសេ Main Menu សិនបានហើយ
ចាប់ផ្តើមសរសេកូដ
// កំណត់ប្រវែងកម្ពស់ និងបណ្តោយ រួមទាំងពណ៌ផ្ទៃរបស់ Menu
// កំណត់ពណ៌ឲ្យ Text របស់ Menu

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

ul li a{text-decoration:none;}

// កំណត់រាល់ ul នៅក្នុង Menu ត្រូវមានBackground ពណ៌ទឹកក្រូច និងបង្ហាញជាលក្ខណៈ Block
// កំណត់ឲ្យរាល់ List ទាំងអស់ត្រូវ ប្តូរមករៀបជាជួរវិញ
លទ្ធផល
Step 2:
-ចំណាំ : ​បន្ទាប់មកយើងធ្វើ Submenu ដូច្នេះសូមសរសេកូដ Submenu ចូល HTML មុននិង Apply CSS
Start Code:
// ពេល Hover លើ Menu ដែលជា Main Menu ឪ្យចេញ Sub Menu
// Apply Style ឲ្យ Sub Menu
លទ្ធផល:
Step 3:
-ចំណាំ : ​បន្ទាប់មកយើងធ្វើ SUB in SUB menu ដូច្នេះសូមសរសេកូដ SUB in SUB menu ចូល HTML មុននិង Apply CSS
Start Code: កំណត់ឲ្យ Sub in Sub ចេញពេលយក Mouse ដាក់លើ Submenu
លទ្ធផល

Related product you might see: