Қадамдық нұсқаулық
Навигация мәзірі жоғарғы немесе төменгі жағында көлденең жол болып табылады ма, ол әлі де тізім. Веб-навигацияны жасаған кезде, навигация мәзірі тек қана сілтемелердің даңқты тобы екенін ұмытып кету оңай. Бірақ сіз XHTML + CSS арқылы навигацияны бағдарламаласаңыз, қотару үшін кішкентай мәзірді (XHTML) және оңай теңшеуді (CSS) жасауға болады.
Басталу
Навигацияға арналған тізімді жобалауды бастау үшін тізімді пайдалану керек.
Навигация ретінде анықталған стандартты реттелмеген тізім болуы мүмкін:
Егер сіз HTML-ді мұқият қарап шығсаңыз, «Үйге» сілтемесінде сізде басқа идентификатор бар екенін байқайсыз. Бұл оқырмандар үшін ағымдағы орынды анықтайтын мәзірді жасауға мүмкіндік береді. Тіпті қазір сайтында көрнекі белгілердің болуын жоспарламасаңыз да, сол ақпаратты қосуға болады. Егер сіз кейінгі нұсқаны қосуды шешсеңіз, сіздің сайтыңызды дайындау үшін кодтаудың аз болуы керек.
CSS стилі болмаса, бұл XHTML мәзірі қалыпты реттелмеген тізімге ұқсайды. Пулдар бар және тізім элементтері сәл шегінеді. Толтырғыш сілтемелерін пайдаланатындықтан, браузерлердің көбісі сілтемелерді басуға болады (асты сызылған және көк түспен). Жоғарыда көрсетілген HTML-де веб-параққа қойсаңыз, шарлау келесідей болады:
- Үй
- Өнімдер
- Қызметтер
- Бізбен хабарласыңы
Бұл өте скучный және мәзірге ұқсамайды. Бірақ тізімге қосылған бірнеше CSS мәнері бар болса, сіз мақтан тұтатын мәзір жасай аласыз.
Тік навигация мәзірі
Тігінен навигация мәзірі өте қарапайым, себебі ол қалыпты тізім ретінде көрінеді: жоғары және төмен.
Тізім элементтері беттегі тігінен төменде көрсетілген.
Мен мәзірлерді сәндеуде, мен сырттан бастауды және жұмыс істеуді ұнатамын. Бұл арқылы мен бірінші рет стильді # навигацияға айналдырып, содан кейін li элементтеріне, сосын сілтемелерге өтуге болатынын білдіремін. Сондықтан бұл мәзір үшін, алдымен мәзірдің енін анықтаңыз. Бұл мәзір элементтері ұзағырақ болса да, олар орналасудың қалған бөлігін итеруге немесе көлденең жылжытуға мүмкіндік бермейді.
ul # шарлау {width: 12em; }
Енімнің жиынтығын алғаннан кейін, тізім элементтерімен ойнауға болады. Бұл мен сияқты нәрселерді (оқтардан құтылу), өңдік түстерді, шекараларды, мәтінді теңестіруді және шеттерін орнатуға мүмкіндік береді.
ul # navig li {
list-style: none;
background-color: # 039;
шекарасы: қатты 1px # 039;
мәтінді туралау: сол;
маржа: 0;
}
Тізім элементтері үшін негіздерді орнатқаннан кейін, мәзірдің сілтемелер аймағында қалай көрінетінімен ойнауға кірісе аласыз. Алғашқы стиль UL # navigator LI A, содан кейін A: сілтеме, A: барған, A: hover және A: белсенді (қажет болса). Сілтемелер үшін сілтемелерді блоктық элемент (әдепкі in-line емес, орнына) жасағым келеді. Бұл оларды LI-тің барлық кеңістігін қабылдауға мәжбүр етеді және олар мәзірдің түймелері сияқты мәнерге оңай айналдыруға мүмкіндік беретін параграфқа ұқсас әрекет етеді. Мен әрдайым сызылған сызықты (мәтінді безендіру: жоқ); бұл түймелерді маған батырмалар сияқты көп көрінеді.
Бірақ, әрине, сіздің дизайныңыз басқаша болуы мүмкін.
ul # navigate a {
дисплей: блок;
мәтінді безендіру: жоқ;
толтыру: .25м;
шекараның төменгі жағы: қатты 1px # 39f;
border-right: solid 1px # 39f;
}
Назар аударыңыз, дисплей: блок; сілтемелерде орнатылса, мәзір элементінің бүкіл өрісі тек әріптерді ғана емес, басылатын болады. Бұл сондай-ақ ыңғайлылық үшін пайдалы. Әдепкі көк, қызыл және күлгіннен басқаша болуды қаласаңыз , сілтеме түстерін орнатыңыз (сілтеме, барған, қозғалыс және белсенді).
a: сілтеме, a: барған {color: #fff; }
a: hover, a: белсенді {color: # 000; }
Мен сондай-ақ фондық түсті өзгерту арқылы әуенді мемлекетке көбірек назар аударғым келеді.
a: hover {background-color: #fff; }
Тік мәзірлердің қосымша мысалдарын алғыңыз келсе, төмендегі тізімге жүгініңіз.
- Стильді тік мәзірлер
- Негізгі тік мәзір үлгісі
- Стильді тік мәзірлер сіздермен бірге
- Негізгі тік мәз-нің үлгісі сізде бар
Көлденең навигация мәзірі
Көлденең шарлау мәзірлерін жасау тік навигациялық мәзірлерге қарағанда біршама күрделірек болады, себебі HTML тізімдері тігінен көрсетілуді қалайтындығын есепке алу керек. Көлденең мәзір сияқты алдымен навигация мәзірі тізімін жасаңыз:
Көлденең мәзір жасау үшін тік мәзірлермен бірдей жұмыс істеңіз. Сыртпен бастап, жұмыс істеңіз. Навигацияның сол жақ бұрышта басталуын қалайтындықтан, оны 0 сол жақ шетпен және толтырумен орнатып, солға қарай жүзіп отырамын. Сондай-ақ, сіз мәзіріңіз неғұрлым көбірек орын алмайтын етіп, енін орнату әдетінен өтуіңіз керек. Көлденең мәзірлер үшін бұл әдетте дизайнның толық ені болып табылады. Мен сондай-ақ оқуға жеңілдету үшін бүкіл тізімге фондық түсті қостым.
ul # навигация {
float: сол;
маржа: 0;
толтыру: 0;
ені: 100%;
background-color: # 039;
}
Бірақ көлденең навигация мәзірінің құпиялары тізім элементтерінде. Тізім элементтері әдетте блоктық элементтер болып табылады, яғни олар әрқайсысы алдында және кейін орналастырылған жаңа сызықша болады. Дисплейді блоктан ішкі жолға ауыстыру арқылы тізім элементтерін бір-бірінің үстіне көлденең қатар қоюға мәжбүрлейді.
ul # навигация li (көрсету: inline; }
Мен сілтемелерді тік сызық навигация мәзірінде, сол түстермен және мәтінді безендіруімен өңдейтін сияқты жасадым. Мен батырманың үстіңгі жағына қарай жылжу үшін үстіңгі шекара қосылдым. Мен алып тастаған жалғыз дисплей болды: блок; бұл жаңа сызықтарды қайтадан көлденең менюге келтіреді.
ul # navigate a {
мәтінді безендіру: жоқ;
толтыру: .25em 1em;
шекараның төменгі жағы: қатты 1px # 39f;
border-top: қатты 1px # 39f;
border-right: solid 1px # 39f;
}
a: сілтеме, a: барған {color: #fff; }
ul # navigasyon a: hover {
background-color: #fff;
түсі: # 000;
}
Сіз осы жерде орналасқан жер туралы ақпарат
HTML-тағы бір аспект - сіздің идентификаторыңыз. Пайдаланушыларыңыздың ағымдағы орналасуын көрсету үшін мәзіріңізді өзгерткіңіз келсе, әртүрлі өң түсінін немесе басқа стильді анықтау үшін осы ID идентификаторын пайдаланыңыз. Ағымдағы беттің әрдайым бөлектелуі үшін сол ID төлсипатын басқа беттердегі дұрыс мәзір элементіне жылжытыңыз.
Сіз # кез келген жерде {background-color: # 09f; }
Егер осы стильдерді сіздің бетіңізге біріктірсеңіз, сіз сайтымызмен жұмыс істейтін көлденең немесе тік мәзірлер жолағын жасай аласыз, бірақ жүктеуді жылдам әрі болашақта жаңартуға өте оңай. XHTML + CSS-ні пайдалану тізіміңізді дизайн үшін өте қуатты құралға айналдырады.
Егер көлденең мəзірлердің көбірек мысалдарын алғыңыз келсе, келесіні қараңыз.
- Стильдендірілген көлденең мәзір
- Негізгі көлденең мəзір үлгісі
- Стильді көлденең мәзір бар жерде
- Негізгі көлденең мәзір үлгісі сізде бар