පියවරෙන් පියවර මාර්ගෝපදේශකය
ඔබගේ සවිකෘත මෙනුව ඉහළ සිට ඉහළට හෝ සිරස් පේළියක පැත්තක තිරස් පේළියකි, එය තවමත් ලැයිස්තුවකි. වෙබ් සංචලනය නිර්මාණය කිරීමේදී, සංචාලක මෙනුව යනු මහිමවත්වන සබැඳි සමූහයක් බව අමතක කිරීම බොහෝ විට අමතක වේ. එහෙත් ඔබ ඔබේ සංචාලනය ක්රියාත්මක කරන්නේ XHTML + CSS භාවිතා කිරීමෙන් නම්, ඔබට බාගත කිරීමට ඇති කුඩා මෙනුවක් (XHTML) සහ පහසුවෙන් සැකසීමට (CSS) පහසුවෙන් කළ හැක.
ඇරඹේ
සංචලනය සඳහා ලැයිස්තුවක් සැලසුම් කිරීම ආරම්භ කිරීම සඳහා, ඔබ ලැයිස්තුවක් භාවිතා කළ යුතුය.
එය නාවිකකරණය ලෙස හදුනාගත් සම්මත රහිත ලැයිස්තුවක් විය හැක:
ඔබ HTML ලෙස සමීපව බැලුවහොත්, "මුල් පිටුව" සබැඳිය ද ඔබට හැඳුනුම්පතක් තිබේ. මෙය ඔබගේ පාඨකයන්ට පවතින ස්ථානය හඳුනා ගැනීම සඳහා මෙනුවක් තැනීමට ඉඩ සලසයි. ඔබේ වෙබ් අඩවියට එබඳු ආකාරයේ දෘශ්ය ඇඳුමක් තිබේදැයි ඔබ සැලසුම් නොකරන්නේ නම්, එම තොරතුරු ඇතුළත් කළ හැකිය. ඔබ පසුව එම ගීතය එක් කිරීමට තීරණය කළහොත්, ඔබේ වෙබ් අඩවිය සකස් කිරීමට අඩු කේතයක් ඔබට ඇත.
කිසිදු CSS හැඩවීමකින් තොරව, මෙම XHTML මෙනුව සම්මත නොබැඳි ලැයිස්තුවක් ලෙස පෙනේ. උණ්ඩ ඇති අතර ලැයිස්තුවේ අයිතමයන් තරමක් වෙනස් වී ඇත. මම භාවිතා කරන තැටියක සම්බන්ධතා භාවිතා කරන බැවින්, බොහෝ බ්රව්සර් ක්ලික් කළ හැකි ලෙස ලින්ක් (යටින් සහ නිල් පැහැයෙන්) ඈඳිය හැකිය. ඉහත HTML හි වෙබ් පිටුවකට ඇවැසි නම්, ඔබගේ සංචලනය මෙලෙස දිස්වනු ඇත:
- ගෙදර
- නිෂ්පාදන
- සේවා
- අප අමතන්න
මේක හරිම ලස්සනයි, මෙනුවක් වගේ නෙවෙයි. නමුත් ලැයිස්තුගත කිරීම සඳහා CSS කිහිපයක් පමණි, ඔබ ආඩම්බර වන මෙනුවක් නිර්මාණය කළ හැකිය.
සිරස් සෙවුම් මෙනුව
සාමාන්ය සිරස් ලැයිස්තුවක් ලෙස දර්ශනය වන නිසා සිරස් සංචාලන මෙනුව ඉතා පහසුවෙන් ලිවීමට පහසුය: ඉහළ සහ පහලට.
මෙම ලැයිස්තුවේ පිටු අනුව පහළට දර්ශණය වේ.
මම විලාසිතා හැඩගැන්වීමේදී, මම පිටතින් ආරම්භ කිරීමට සහ වැඩ කරන්නට කැමතියි. මේ අනුව, මම මුලින්ම පළමු ස්ලයිඩය Navigation වලට මාරු කර පසුව ලලි අංග වලට පසුව සබැඳි ආදිය වෙත යවන අතර, එම නිසා මෙම මෙනුව සඳහා, පළමුව ඔබ මෙනුවේ පළල අර්ථ දක්වයි. මෙම මෙනු අයිතම දිගු වුවද, පිරිසැලීමේ ඉතිරි කොටස තල්ලු නොකරන හෝ තිරස් දිශා දිගේ දිග හැරීමට ඉඩ ඇත.
ul # navigation {width: 12em; }}
මා ලබා ගත් පළල, ලැයිස්තුවේ අයිතමයන් සමඟ සෙල්ලම් කළ හැකිය. මෙය මට (උදාහරණ ලෙස උණ්ඩ ඉවත් කිරීමට), පසුබිම් වර්ණ, දේශසීමා, පෙළ සමතලා, සහ ආන්තිකය වැනි දේ සකසා ගැනීමට ඉඩ සලසයි.
ul # navigation li {
ලැයිස්තුව-style: none;
පසුබිම් වර්ණය: # 039;
border-top: solid 1px # 039;
පෙළ-align: වම .;
ආන්තික: 0;
}}
ඔබ ලැයිස්තුවේ අයිතමයන් සඳහා මූලිකවම සකස් කළ පසු ඔබ මෙනුව ප්රදේශය තුළ පෙනෙන ආකාරය සමඟ සෙල්ලම් කළ හැක. UL style # Navigation LI A සහ ඊට පසුව A: link, A: visited, A: hover, සහ A: සක්රීය (ඔබට අවශ්ය නම්). සබැඳි සඳහා, මම සබැඳි බ්ලොක් මූලද්රව්යයක් සෑදීමට කැමතියි (පෙරනිමියෙන් ඉරක්). මේ නිසා LI හි මුළු ඉඩම අල්ලාගන්නවා. ඒ වගේම ඔවුන් වැඩ කරන්නේ ඡේදයක් වගේ වැඩිය. ඒවා මෙනු බොත්තම් ලෙස හැඩගස්වා ගැනීමට පහසුයි. මම හැම විටම කරන්නේ, යටි ඉරි ඇඳීම (පෙළ-සැරසිලි: කිසිවක් නැත) මෙම බොත්තම් මට බොත්තම් මෙන් දිස්වේ.
ඇත්ත වශයෙන්ම, ඔබේ නිර්මාණය වෙනස් විය හැකිය.
ul # navigation li {
පදර්ශනය: බ්ෙලොක්;
පාඨමය අලංකාරය: කිසිවක් නැත;
වැසුම්: .25em;
මායිම්-පහළ: ඝණ 1px # 39f;
දේශසීමා-දකුණු: ඝන 1px # 39f;
}}
සංදර්ශකය සමඟ: බ්ලොක්; සබැඳි මත තබා ඇති, මෙනු අයිතමයේ සම්පූර්ණ කොටුව ක්ලික් කළ හැක, ලිපි පමණක් නොවේ. මෙය ප්රයෝජනවත් වේ. ඔබට පෙරනිමි නිල්, රතු සහ දම් වර්ණයෙන් ඔබට වෙනස් වීමට අවශ්ය නම්, සබැඳි වර්ණ (සබැඳිය, බැලීමට, නැවතුම් සහ ක්රියාකාරී) සැකසීමට වග බලා ගන්න.
: link, a: visited {color: #fff; }}
a: ඇලර්, a: ක්රියාකාරී {වර්ණ: # 000; }}
පසුබිම් වර්ණය වෙනස් කිරීම මගින් හූවෙන්ට වඩා වැඩි අවධානයක් යොමු කරන්න මම කැමතියි.
a: හුවර්බය {පසුබිම වර්ණය: #fff; }}
සිරස් අතට මෙනු සඳහා තවත් උදාහරණ අවශ්ය නම්, පහත ලැයිස්තුවෙන් විමසන්න.
- Styled Vertical මෙනුව
- මූලික සිරස් මෙනු සැකිල්ල
- ඔබ සමඟ සාදන ලද සිරස් මෙනුව මෙතැනින්
- ඔබ සමඟම මූලික සිරස් මෙනු සැකිල්ල මෙන්න
තිරස් පාලක මෙනුව
තිරස් නාවිකකරණ මෙනුව සෑදීම, තිරස් නාවිකකරණ මෙනුවලට වඩා තරමක් අසීරු වනු ඇත. HTML ලැයිස්තු සරලව ප්රදර්ශනය කිරීමට කැමති වීමයි. තිරස් මෙනුව සමඟ මෙන්, මුලින්ම ඔබේ සංචාලන මෙනුව ලැයිස්තුව සාදන්න:
තිරස් මෙනුව සෑදීමට, සිරස් මෙනුව සමඟ ඔබ කළ ආකාරයට ම වැඩ කරන්න. පිටත සිට ආරම්භ කරන්න සහ වැඩ කරන්න. මට වම් කෙළවරේ මගේ යාත්රා කිරීම ආරම්භ කිරීමට අවශ්ය නිසා, වම් විචලනය සහ වැල්ඩින් එකෙන් එය සකසා, මම වම් පස පාවා දෙන්නෙමි. ඔබේ මෙනුව ඔබ බලාපොරොත්තු වන ප්රමාණයට වඩා අඩු හෝ අඩු ඉඩක් නොලැබෙන පරිදි පළල පිහිටීමෙහි පුරුද්දක් තිබිය යුතුය. තිරස් මෙනේරි සඳහා මෙය සාමාන්යයෙන් මෝස්තරයේ සම්පූර්ණ පළල වේ. කියවීමට පහසු වීම සඳහා සමස්ත ලැයිස්තුවට පසුබිම් වර්ණ එකතු කරන ලදි.
ul # navigation {
float: වම්;
ආන්තික: 0;
වැටීම: 0;
පළල: 100%;
පසුබිම් වර්ණය: # 039;
}}
නමුත් තිරස් නාවිකකරණ මෙනුවෙහි රහස ලැයිස්තුවේ ලැයිස්තුගත කර ඇත. ලැයිස්තුගත අයිතම සාමාන්යයෙන් අවහිර වන මූලද්රව්යයන් වන අතර, ඒවාට පෙර සහ පසුව තැබූ නව පේළියක් ඇත. බ්ලොක් එකෙන් පේළියකින් පේළිගත කිරීම මඟින් පේළිය වෙනස් කිරීම මඟින්, ලැයිස්තුවේ මූලද්රව්ය එකිනෙකට එකට තිරස් රේඛාවක් තැබීමට බල කරයි.
ul # navigation li {display: inline; }}
මම සිරස් සංචාලන මෙනුව තුළ මා සලකන ආකාරයට සමාන වර්ණ හා පෙළ සැරසිලි සමග සම්බන්ධකම් වලට මා සම්බන්ධ විය. මම ඉහළට මායිම් බොත්තම් හසුරුවාලීමට බොත්තම් හදුනාගෙන ඇත. මම ඉවත් කළේ එකම ප්රදර්ශනය: බ්ලොක්; එය අන්තිම පේළිය නැවතත් තිරස් මෙනුව විනාශ කරනු ඇත.
ul # navigation li {
පාඨමය අලංකාරය: කිසිවක් නැත;
වැස්ම: .25em 1em;
මායිම්-පහළ: ඝණ 1px # 39f;
border-top: solid 1px # 39f;
දේශසීමා-දකුණු: ඝන 1px # 39f;
}}
: link, a: visited {color: #fff; }}
ul # navigation li a: lumbar {
පසුබිම් වර්ණය: #fff;
වර්ණය: # 000;
}}
ඔබ මෙහි ස්ථාන තොරතුරු
HTML හි තවත් අංගයක් වන්නේ ඔබ හඳුනාගත් ස්ථානයයි. ඔබේ පරිශීලකයින්ගේ වත්මන් පිහිටීම පෙන්නුම් කිරීමට ඔබට අවශ්ය නම්, වෙනත් පසුබිම් පාට හෝ වෙනත් ආකාරයේ අර්ථ දැක්වීම සඳහා මෙම ID භාවිතා කරන්න. අනෙක් පිටු මත නිවැරදි මෙනු අයිතමයට එම හැඳුනුම් පත් ලබා ගන්න. වර්තමාන පිටුව සැමවිටම උද්දීපනය වන පරිදි.
ul # navigation li # ඔබට කොතැනක {background-color: # 09f; }}
ඔබ මෙම පිටුව එකට එක් කළ විට ඔබේ වෙබ් අඩවිය සමඟ වැඩ කරන තිරස් හෝ තිරස් මෙනු බාර්එකට සෑදිය හැකි නමුත් අනාගතයේ දී යාවත්කාලීන කිරීමට ඉතා ඉක්මණින් බාගත කර ගත හැකිය. XHTML + CSS භාවිතා කරමින් ඔබේ ලැයිස්තු නිර්මාණය සඳහා ඉතා බලවත් මෙවලමක් බවට හරවයි.
තිරස් මෙනු සඳහා තවත් උදාහරණ ඔබට අවශ්ය නම්, පහත දැක්වෙන උපදෙස් විමසන්න.
- නූතන තිරස් මෙනුව
- මූලික දිඹුල් මෙනු සැකිල්ල
- ඔබ සමඟ සම්බන්ධිත තිරස් මානසික මෙනුවක් මෙහි තිබේ
- ඔබ සමඟ ඔබ මූලික මානසික මෙනු සැකිල්ලක් මෙන්න