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

បញ្ចូលព័ត៌មានដោយ៖Unknown on Tuesday, August 20, 2013 0

ការបង្កើត 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





លទ្ធផល





ប្រភពដើម៖ ITCambo