Дастури қадам ба қадам
Новобаста аз он, ки менюи менюи шумо сутуни уфуқӣ дар сарлавҳаи болоӣ ё сатрии амудӣ аст, ин танҳо як рӯйхат аст. Ҳангоми тарҳрезии браузери вебсайт, он хеле зуд фаромӯш мекунад, ки менюи пайраҳа танҳо як гурӯҳи зебои пайвасткунанда аст. Аммо агар шумо бо истифодаи XHTML + CSS истифода баред, шумо метавонед менюи хурдро барои боргирӣ (XHTML) ва осон кардани танзимот (CSS) эҷод кунед.
Сар кардани кор
Барои оғози сохтани рӯйхат барои навигатсия, шумо бояд рӯйхати истифода кунед.
Ин метавонад рӯйхати стандартии номуайяние, ки ҳамчун менеҷмент муайян шудааст, дошта бошад:
Агар шумо ба HTML диққат назар андозед, шумо мефаҳмед, ки "Хона" низ дорои ID-и шумо мебошад. Ин ба шумо имкон медиҳад, ки менюе, ки макони ҷорӣ барои хонандагонатон муайян мекунад, эҷод кунед. Ҳатто агар шумо дар бораи ин гуна санади виртуалӣ дар сайти худ нақл накунед, шумо метавонед ин маълумотро дохил кунед. Агар шумо қарор қабул кунед, пас дертар, шумо рамзгузорӣ барои таҳияи сомонаи худ доред.
Бе ҳар гуна CSS сабт кардани ин менюи XHTML ба монанди рӯйхати номутаносиби номатлуб ба назар мерасад. Мастҳо вуҷуд доранд ва рӯйхати номҳои каме ишғол мекунанд. Зеро ман бо истифода аз пайвандҳои ҷойгиркунанда , бештари браузерҳо ба пайвандҳо ҳамчун зеркашида (сақф ва санги) нишон намедиҳанд. Агар шумо дар HTML дар боло як саҳифаро ба саҳифаи веб пайравӣ кунед, навигатсияи шумо чунин хоҳад монд:
- Home
- Маҳсулот
- Хизматҳо
- Бо мо тамос гиред
Ин хеле ғамгин аст ва ба мисли меню хеле назаррас нест. Аммо бо якчанд сабтҳои CSS илова ба рӯйхат шумо метавонед як менюи шуморо эҷод кунед.
Менюи равзанаи виртуалӣ
Менюи виртуалӣи навиштан хеле осон аст, зеро он дар ҳамон як рӯйхати муқаррарӣ нишон медиҳад: боло ва поён.
Рӯйхати номҳо варақа ба саҳифа нигаред.
Вақте ки ман менюи ороишӣ ҳастам, ман мехоҳам, ки дар хориҷа кор кунам ва бо кор машғул шавам. Аз ин рӯ, ман маънои онро дорам, ки ман аввалин таронаҳои навро паймоиш мекунам ва сипас ба асбобҳо, сипас пайвандҳо, ва ғайра. Пас, барои ин меню, Пеш аз он ки тугмачаи менюро муайян кунед. Ин имкон медиҳад, ки ҳатто мӯҳтавои меню дароз карда шавад, онҳо боқимонда боқӣ мемонанд ё боиси такроршавии уфуқӣ мешаванд.
ul # navigation {width: 12em; }}
Пас аз ман маҷмӯи васеъ, ман метавонам бо рӯйхати рӯйхат бозӣ кунам. Ин ба ман имкон медиҳад, ки чизҳоеро, ки ба даст меоваранд, бипӯшонанд), рангҳои аслӣ, сарҳад, матн ва матнҳо.
ul # navigation {
Рӯйхати номуайян: none;
Ранги аслии: # 039;
сатҳи сарҳадӣ: solid 1px # 039;
матн-ҳо: left;
маржа: 0;
}}
Баъд аз он, ки шумо асосҳоро барои рӯйхати рӯйхат муқаррар кардед, шумо метавонед бо чӣ гуна меню дар майдонҳои пайвастшуда бозӣ оғоз кунед. Як услуби аввалини UL # навигатори LI A ва пас A: link, A: боздид, A: hover, ва A: фаъол (агар шумо мехоҳед онҳо). Барои пайвандҳо, ман мехоҳам, ки пайвастҳои элементи блокро ба ҷои худ гузорем. Ин ба онҳо қодир аст, ки тамоми фосилаи LI-ро гирад ва онҳо ҳамчун параграфи бештар амал кунанд, ки онҳоро сабукӣ ба сифати менюи менюи осонтар мекунад. Дигар чизе, ки ман ҳамеша мекӯшам аломати поёнро (матн-ороиши: не) зеро ин тугмаҳоро ба монанди тугмаҳои ман бештар ба назар мерасонад.
Вале албатта, тарҳи шумо метавонад гуногун бошад.
ul # navigation ҳамчун як {
намоиш: блок;
матн-фароғат: none;
padding: .25ем;
сарҳад-поёни: 1px # 39f;
border-right: solid 1px # 39f;
}}
Огоҳӣ медиҳад, ки бо намоиш: блок; дар пайвандҳо ҷойгир карда мешавад, тамоми қуттии қисмҳои меню баста мешавад, на танҳо ҳарфҳо. Инчунин барои истифодаи usable хуб аст. Боварӣ ҳосил намоед, ки рангҳои пайвандро (пайванд, дидан, дурушт ва фаъол) танзим кунед, агар шумо хоҳед, ки онҳо аз санги сафед, сурх ва арғувон фарқ кунанд.
a: link, a: visited {color: #fff; }}
a: hover, a: ранги фаъол: #; }}
Ман инчунин мехоҳам, ки бо тағир додани ранги аслии диверсификатсияи давлатӣ диққати бештар диҳам.
a: hover {color-background-color: #fff; }}
Агар шумо намунаҳои зиёди менюи амудиро мехоҳед, лутфан ба рӯйхат муроҷиат кунед.
- Менюи амудии стиллӣ
- Шаблони асосии менюи оддӣ
- Менюи амудии секунҷа бо шумо дар ин ҷо ҳаст
- A Шаблон менюи оддӣ бо шумо дар ин ҷо ҳастед
Менюи уфуқӣ
Эҷод кардани менюҳои уфуқии уфуқӣ аз рамзҳои уфти уфуқӣ каме душвор аст, зеро шумо бояд аз феҳристе, ки рӯйхатҳои HTML-ро намоиш диҳанд, диққат диҳед. Тавре ки бо менюи уфуқӣ, аввал рӯйхати менюи менюи худро офаред:
Барои эҷоди як уфуқи уфуқӣ, ҳамон тавре, ки шумо бо менюи амудӣ кардед. Азбаски бо ман кор кардан мехоҳед ва аз кор мебаред. Азбаски ман мехоҳам, ки пайроҷаи худро дар гӯшаи чап сар кунам, ман онро бо 0 маржаи чап ва padding ҷудо мекунам, ва онро ба тарафи чап мебарам. Шумо инчунин бояд ба тарзи муқаррар кардани паҳншавии он, то ки менюи шумо аз фосилаи бештар ё камтар аз фосила дур нашавад. Барои менюи уфуқӣ, ин одатан паҳншавии пурраи тарҳ аст. Ман инчунин ранги заминаро ба тамоми рӯйхат илова кардам, то онро хондан осон кунад.
ul # navigation {
float: left;
маржа: 0;
padding: 0;
width: 100%;
Ранги аслии: # 039;
}}
Аммо сирри менюи уфуқи уфуқӣ дар рӯйхатҳои рӯйхат аст. Рӯйхати номҳо одатан блокҳои элементӣ мебошанд, ки ин маънои онро дорад, ки онҳо дар оянда ва пас аз ҳар як навъи ҷойгиршуда ҷойгир карда мешаванд. Бо гузариши намоиш аз блок ба сатри дохилӣ, шумо унсурҳои рӯйхатро ба якҷоя бо уқьёнусӣ кашида метавонед.
ul # navigation {{display: inline; }}
Ман пайраҳоро ба таври рамзӣ ба мисли менюи равзанаи воҳиди бо рангҳо ва ороиши матн ба онҳо муомила кардам. Ман як марзи болоиро барои муайян кардани тугмаҳо, вақте ки онҳо барпо карданд. Танҳо чизе, ки ман тоза кардам, нишон дода буд: блок; зеро он ба навъҳои нави такрорӣ ва нобуд кардани менюи уфуқӣ гузошта мешавад.
ul # navigation ҳамчун як {
матн-фароғат: none;
padding: .25м 1ем;
сарҳад-поёни: 1px # 39f;
сатҳи сарҳадӣ: solid 1px # 39f;
border-right: solid 1px # 39f;
}}
a: link, a: visited {color: #fff; }}
ul # navigation ба як: hover {
Ранги аслии: #fff;
ранг: # 000;
}}
Маълумоти ҷойгиршавӣ дар он аст
Дигар намуди HTML ин муайянкунандаи ҳассос аст. Агар шумо хоҳед, ки менюи худро тағир диҳед, макони ҷории истифодабарандагони шумо нишон медиҳад, ки ин рамзро барои тасвири ранги аслии дигар ё сабки дигар истифода баред. Ин нишонаи ID-ро ба унсурҳои дурусти меню дар саҳифаҳои дигар кӯчонед, то саҳифаи ҷорӣ ҳамеша возеҳ аст.
ul # navigation # # youarehere як ранги аслии: # 09f; }}
Агар шумо ин тарзҳоро дар саҳифаи худ ҷойгир кунед, шумо метавонед варақаи менюи уфуқӣ ё амудиро, ки бо сомонаи шумо кор мекунад, осонтар ва аз нав боргирӣ кунед. Истифодаи XHTML + CSS рӯйхати худро ба як воситаи хеле қавӣ барои тарроҳӣ рӯйхат мекунад.
Агар шумо намунаҳои зиёди менюи уфуқӣ мехоҳед, ба зер муроҷиат кунед.
- Менюи уфуқӣ
- Шаблон асосии асосии уфуқӣ
- Менюи стилизатсияи уфуқӣ бо шумо дар ин ҷо ҳастед
- A Шаблон менюи асосии уфуқӣ бо шумо дар ин ҷо ҳастед