មគ្គុទេសក៍មួយជំហានម្តង ៗ
ថាតើម៉ឺនុយរុករករបស់អ្នកជាជួរដេកផ្ដេកនៅលើកំពូលឬជួរដេកបញ្ឈរចុះក្រោមវានៅតែគ្រាន់តែជាបញ្ជី។ នៅពេលរចនាការរុករកបណ្ដាញវាជាញឹកញាប់ងាយស្រួលក្នុងការបំភ្លេចថាម៉ឺនុយការរុករកមួយគ្រាន់តែជាក្រុមដែលមានការតម្កើង។ ប៉ុន្តែប្រសិនបើអ្នកដាក់កម្មវិធីរុករករបស់អ្នកដោយការប្រើប្រាស់ XHTML + CSS អ្នកអាចបង្កើតមឺនុយតូចដែលអាចដោនឡូត (XHTML) និងងាយសម្រួលតាមបំណង (CSS) ។
ចាប់ផ្ដើម
ដើម្បីចាប់ផ្ដើមរចនាបញ្ជីសម្រាប់ការរុករកអ្នកត្រូវប្រើបញ្ជីមួយ។
វាអាចជាបញ្ជីស្តង់ដារគ្មានលំដាប់ដែលត្រូវបានកំណត់អត្តសញ្ញាណថាជាការរុករក:
ប្រសិនបើអ្នកក្រឡេកមើល HTML យ៉ាងជិតស្និទ្ធអ្នកនឹងសម្គាល់ថាតំណ "ទំព័រដើម" ក៏មានលេខសម្គាល់របស់អ្នកដែរ។ នេះនឹងអនុញ្ញាតឱ្យអ្នកបង្កើតម៉ឺនុយដែលកំណត់ទីតាំងបច្ចុប្បន្នសម្រាប់អ្នកអានរបស់អ្នក។ បើទោះបីជាអ្នកមិនមានគម្រោងលើប្រភេទនៃអត្ថបទដែលមើលឃើញនៅលើគេហទំព័ររបស់អ្នកក៏ដោយឥឡូវនេះអ្នកអាចបញ្ចូលព័ត៌មានទាំងនោះ។ ប្រសិនបើអ្នកសម្រេចចិត្តបន្ថែមឃ្លានៅពេលក្រោយអ្នកនឹងមានកូដតិចដើម្បីរៀបចំតំបន់បណ្ដាញរបស់អ្នក។
ដោយគ្មាន រចនាប័ទ្ម CSS ណាមួយទេនោះ XHTML menu នេះមើលទៅដូចជាបញ្ជីគ្មានស្តង់ដារ។ មានចំណុចហើយ ធាតុបញ្ជី ត្រូវបានចូលបន្ទាត់តិចតួច។ ដោយសារតែខ្ញុំកំពុងប្រើ តំណកន្លែងដាក់ កម្មវិធីរុករកភាគច្រើននឹងមិនបង្ហាញតំណដែលអាចចុចបាន (គូសបន្ទាត់ពីក្រោមនិងពណ៌ខៀវ) ។ ប្រសិនបើអ្នកបិទភ្ជាប់ HTML នៅក្នុងទំព័រវ៉ិបសាយមួយការរុករករបស់អ្នកនឹងមើលទៅដូចនេះ:
- ផ្ទះ
- ផលិតផល
- សេវាកម្ម
- ទាក់ទងមកពួកយើង
នេះគឺជាការគួរឱ្យធុញណាស់ហើយមិនមើលទៅដូចជាម៉ឺនុយទេ។ ប៉ុន្តែជាមួយរចនាប័ទ្ម CSS មួយចំនួនដែលបានបន្ថែមទៅបញ្ជីអ្នកអាចបង្កើតម៉ឺនុយដែលធ្វើអោយអ្នកមានមោទនភាព។
ម៉ឺនុយរុករកបញ្ឈរ
ម៉ឺនុយរុករកបញ្ឈរមានភាពងាយស្រួលក្នុងការសរសេរព្រោះវាបង្ហាញតាមរបៀបដូចគ្នានឹងបញ្ជីធម្មតា: ឡើងលើនិងចុះក្រោម។
ធាតុបញ្ជីបង្ហាញចុះក្រោមបញ្ឈរទំព័រ។
នៅពេលខ្ញុំរចនាម៉ូដម៉ឺនុយខ្ញុំចូលចិត្តចាប់ផ្តើមនៅខាងក្រៅហើយធ្វើការ។ ដោយនេះខ្ញុំមានន័យថាខ្ញុំរចនាប័ទ្មដំបូង ul # navigation ហើយបន្ទាប់មកផ្លាស់ទីទៅធាតុ li ហើយបន្ទាប់មកតំណភ្ជាប់។ ដូច្នេះសម្រាប់ម៉ឺនុយនេះ, ដំបូងអ្នកកំណត់ទទឹងរបស់ម៉ឺនុយ។ ការនេះនឹងធានាថាបើទោះបីជាធាតុម៉ឺនុយមានរយៈពេលវែងក៏ដោយក៏វានឹងមិនរុញគំនូសប្លង់ដែលនៅសេសឬបណ្តាលឱ្យរមូរផ្ដេកទេ។
ul # navigation {width: 12em; }
នៅពេលខ្ញុំបានកំណត់ទទឹងខ្ញុំអាចលេងជាមួយធាតុបញ្ជី។ នេះអនុញ្ញាតឱ្យខ្ញុំកំណត់អ្វីៗដូចជា (ដើម្បីលុបគ្រាប់) ពណ៌ផ្ទៃខាងក្រោយស៊ុមតម្រឹមអត្ថបទនិងរឹម។
ul # navigation li {
list-style: none;
background-color: # 039;
border-top: រឹង 1px # 039;
text-align: left;
រឹម: 0;
}
នៅពេលដែលអ្នកបានកំណត់មូលដ្ឋានសម្រាប់ធាតុបញ្ជីអ្នកអាចចាប់ផ្តើមលេងជាមួយរបៀបដែលម៉ឺនុយមើលនៅក្នុងផ្ទៃតំណ។ រចនាប័ទ្មដំបូង UL # នាវាចរ LI ហើយបន្ទាប់មក A: តំណ, A: បានទៅទស្សនា A: ដាក់និង A: សកម្ម (ប្រសិនបើអ្នកចង់បាន) ។ ចំពោះតំណភ្ជាប់, ខ្ញុំចូលចិត្តបង្កើតតំណភ្ជាប់ធាតុប្លុក (ជាជាងលំនាំដើមនៅក្នុងបន្ទាត់) ។ នេះបង្ខំឱ្យពួកវាយកទំហំទាំងមូលរបស់ LI ហើយពួកគេធ្វើសកម្មភាពដូចកថាខណ្ឌដែលធ្វើឱ្យពួកវាងាយស្រួលក្នុងការធ្វើរចនាប័ទ្មជាប៊ូតុងម៉ឺនុយ។ រឿងផ្សេងទៀតដែលខ្ញុំតែងតែធ្វើគឺដកចេញបន្ទាត់ក្រោម (អត្ថបទ - តុបតែង: គ្មាន) ដូចនេះវាធ្វើឱ្យប៊ូតុងមើលទៅដូចជាប៊ូតុងសម្រាប់ខ្ញុំ។
ប៉ុន្តែការរចនារបស់អ្នកប្រហែលជាខុសគ្នា។
ul # navigation li a {
បង្ហាញ: ប្លុក;
ការតុបតែងអត្ថបទ: គ្មាន;
ចន្លោះ: .25em;
border-bottom: solid 1px # 39f;
ស៊ុមខាងស្តាំ: រឹង 1px # 39f;
}
ចំណាំថាជាមួយការបង្ហាញ: ប្លុក; កំណត់នៅលើតំណប្រអប់ទាំងមូលនៃធាតុម៉ឺនុយគឺអាចចុចបានមិនគ្រាន់តែអក្សរនោះទេ។ នេះក៏ល្អសម្រាប់ការប្រើប្រាស់បាន។ ត្រូវប្រាកដថាកំណត់ ពណ៌ភ្ជាប់ (តំណ, បានមើល, ដាក់និងសកម្ម) ប្រសិនបើអ្នកចង់ឱ្យពួកវាខុសគ្នាពីពណ៌ខៀវ, ក្រហមនិងស្វាយលំនាំដើម។
a: link, a: visited {color: #fff; }
a: hover, a: active {ពណ៌: # 000; }
ខ្ញុំក៏ចង់ផ្តល់ការយកចិត្តទុកដាក់បន្តិចបន្តួចដោយការផ្លាស់ប្តូរពណ៌ផ្ទៃខាងក្រោយ។
a: hover {background-color: #fff; }
ប្រសិនបើអ្នកចង់បានឧទាហរណ៏ច្រើនទៀតនៃតារាងបញ្ឈរចូរពិគ្រោះបញ្ជីខាងក្រោម។
- ម៉ឺនុយបញ្ឈរមានរចនាប័ទ្ម
- ពុម្ពម៉ឺនុយបញ្ឈរមូលដ្ឋាន
- ម៉ឺនុយបញ្ឈរមានរចនាប័ទ្មជាមួយអ្នកនៅទីនេះ
- គំរូម៉ឺនុយបញ្ឈរជាមូលដ្ឋានជាមួយអ្នកនៅទីនេះ
ម៉ឺនុយរុករកផ្ដេក
ការបង្កើតម៉ឺនុយរុករកផ្ដេកគឺពិបាកបន្តិចជាងម៉ឺនុយរុករកបញ្ឈរពីព្រោះអ្នកត្រូវតែទូទាត់ការពិតដែលបញ្ជី HTML ចង់បង្ហាញបញ្ឈរ។ ដូចនឹងម៉ឺនុយផ្ដេកជាដំបូងបង្កើត បញ្ជីម៉ឺនុយរុករក របស់អ្នក:
ដើម្បីបង្កើតម៉ឺនុយផ្ដេកធ្វើដូចគ្នានឹងអ្នកបានធ្វើជាមួយម៉ឺនុយបញ្ឈរ។ ចាប់ផ្តើមជាមួយនឹងការនៅខាងក្រៅនិងធ្វើការ។ ចាប់តាំងពីខ្ញុំចង់ឱ្យការរុករករបស់ខ្ញុំចាប់ផ្តើមនៅជ្រុងខាងឆ្វេងខ្ញុំកំណត់វាជាមួយរឹមឆ្វេងនិងចន្លោះខាងឆ្វេងហើយខ្ញុំអណ្ដែតទៅខាងឆ្វេង។ អ្នកក៏គួរមានទំលាប់នៃការកំណត់ទទឹងដូច្នេះម៉ឺនុយរបស់អ្នកមិនប្រើទំហំតិចឬតិចជាងអ្នកមានបំណង។ សម្រាប់ម៉ឺនុយផ្ដេកនេះជាទូទៅមានទទឹងពេញលេញនៃការរចនា។ ខ្ញុំក៏បានបន្ថែម ពណ៌ផ្ទៃខាងក្រោយ ទៅបញ្ជីទាំងមូលដើម្បីធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការអាន។
ul # navigation {
float: left;
រឹម: 0;
ចន្លោះ: 0;
ទទឹង: 100%;
background-color: # 039;
}
ប៉ុន្តែការសម្ងាត់ទៅម៉ឺនុយរុករកផ្ដេកគឺស្ថិតនៅក្នុងធាតុបញ្ជី។ ជារឿយៗបញ្ជីធាតុជាធម្មតាទប់ស្កាត់ធាតុដែលមានន័យថាពួកគេនឹងមានបន្ទាត់ថ្មីមួយមុននិងក្រោយ។ ដោយប្តូរការបង្ហាញពីប្លុកទៅជាតួអក្សរអ្នកបង្ខំធាតុបញ្ជីដើម្បីតម្រង់ជាប់គ្នាទៅវិញទៅមក។
ul # navigation li {display: inline; }
ខ្ញុំបានចាត់ចែងតំណភ្ជាប់យ៉ាងច្បាស់ដូចជាខ្ញុំបានចាត់បញ្ជូនពួកវានៅក្នុងម៉ឺនុយរុករកបញ្ឈរជាមួយនឹងពណ៌ដូចគ្នានិងការតាក់តែងអត្ថបទ។ ខ្ញុំបានបន្ថែមស៊ុមកំពូលមួយដើម្បីគូសធីកប៊ូតុងនៅពេលដែលវាស្ថិតនៅលើ។ រឿងតែមួយគត់ដែលខ្ញុំបានដកចេញគឺការបង្ហាញ: ប្លុក; ដូចដែលនឹងដាក់បន្ទាត់ថ្មីនៅក្នុងត្រឡប់មកវិញនិងបំផ្លាញម៉ឺនុយផ្ដេក។
ul # navigation li a {
ការតុបតែងអត្ថបទ: គ្មាន;
ចន្លោះ: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: រឹង 1px # 39f;
ស៊ុមខាងស្តាំ: រឹង 1px # 39f;
}
a: link, a: visited {color: #fff; }
ul # navigation li a: hover {
background-color: #fff;
ពណ៌: # 000;
}
អ្នកនៅទីនេះព័ត៌មានទីតាំង
ទិដ្ឋភាពមួយទៀតរបស់ HTML គឺអ្នកកំណត់អត្តសញ្ញាណអ្នកមើលឃើញ។ ប្រសិនបើអ្នកចង់កែប្រែម៉ឺនុយរបស់អ្នកដើម្បីចង្អុលបង្ហាញទីតាំងបច្ចុប្បន្នរបស់អ្នកប្រើគ្រាន់តែប្រើលេខសម្គាល់នេះដើម្បីកំណត់ពណ៌ផ្ទៃខាងក្រោយឬរចនាប័ទ្មផ្សេងទៀត។ ផ្លាស់ទីគុណលក្ខណៈ ID ទៅធាតុម៉ឺនុយត្រឹមត្រូវនៅលើទំព័រផ្សេងទៀតដូច្នេះទំព័របច្ចុប្បន្នត្រូវបានបន្លិចជានិច្ច។
ul # navigation li # youarehere {background-color: # 09f; }
ប្រសិនបើអ្នកដាក់រចនាប័ទ្មទាំងនេះរួមគ្នានៅលើទំព័ររបស់អ្នកអ្នកអាចបង្កើតរបារម៉ឺនុយផ្ដេកឬបញ្ឈរដែលធ្វើការជាមួយគេហទំព័ររបស់អ្នកប៉ុន្តែវាងាយស្រួលទាញយកហើយងាយស្រួលក្នុងការធ្វើបច្ចុប្បន្នភាពនាពេលអនាគត។ ការប្រើប្រាស់ XHTML + CSS ធ្វើឱ្យបញ្ជីរបស់អ្នកក្លាយជាឧបករណ៍ដ៏មានឥទ្ធិពលបំផុតសម្រាប់ការរចនា។
ប្រសិនបើអ្នកចង់បានឧទាហរណ៏ច្រើនទៀតនៃម៉ឺនុយផ្ដេកសូមពិគ្រោះដូចខាងក្រោម។
- ម៉ឺនុយរចនាប័ទ្មផ្ដេក
- ពុម្ពម៉ឺនុយមូលដ្ឋានផ្ដេក
- ម៉ឺនុយរចនាប័ទ្មផ្ដេកជាមួយអ្នកនៅទីនេះ
- គំរូម៉ឺនុយមូលដ្ឋានផ្ដេកជាមួយអ្នកនៅទីនេះ