Независимо дали менюто за навигация на вашия уебсайт е хоризонтален ред отгоре или вертикален ред отстрани, това е просто списък. При проектиране уеб навигация, навигационното меню е група от връзки. Когато програмирате навигацията си с помощта на XHTML + CSS, можете да създадете меню, което е малко за изтегляне (XHTML) и лесно за персонализиране (CSS).
Приготвяме се да започнем
За да създадете списък за навигация, трябва да използвате списък. Това може да е стандартен неподреден списък, който е идентифициран като навигация. Например:
- У дома
- Продукти
- Услуги
- Свържете се с нас
Когато разглеждате HTML, връзката Начало има идентификационен номер.
ти си тук
Това ви позволява да създадете меню, което идентифицира текущото местоположение на вашите читатели. Дори ако не планирате да имате такъв тип визуална реплика на вашия сайт в момента, можете да включите тази информация. Ако решите да добавите репликата по-късно, ще имате по-малко кодиране, за да подготвите сайта си.
Без никакви CSS стил, това XHTML меню изглежда като стандартен неподреден списък. Има куршуми, а елементите от списъка са леко вдлъбнати. При използване връзки за запазени места, повечето браузъри не показват връзките като кликващи (подчертани и в синьо). Когато поставите HTML в уеб страница, навигацията ви изглежда така:
- У дома
- Продукти
- Услуги
- Свържете се с нас
Това не прилича много на меню. Въпреки това, с няколко CSS стила, добавени към списъка, можете да създадете меню, което ви кара да се гордеете.
Ако искате повече примери за вертикални менюта, направете уеб търсене за следното:
- Стилно вертикално меню
- Основен шаблон за вертикално меню
- Стилно вертикално меню с You Are Here
- Основен шаблон за вертикално меню с You Are Here
Меню за вертикална навигация
Менюто за вертикална навигация е лесно да се напише, защото се показва по същия начин като нормалния списък: нагоре и надолу. Елементите от списъка се показват вертикално надолу по страницата.
Когато оформяте менюта, започнете отвън и работете вътре. Първо оформете навигацията:
ul # навигация
След това преминете към елементите и връзките. Първо определете ширината на менюто. Това гарантира, че ако елементите от менюто са дълги, елементите няма да изтласкат останалата част от оформлението или да причинят хоризонтално превъртане.
ul # навигация {width: 12em; }
След като зададете ширината, работете върху елементите от списъка. Това ви позволява да задавате неща като цветове на фона, граници, подравняване на текст и полета.
ul # навигация li {
стил на списък: няма;
фон-цвят: # 039;
граница отгоре: твърдо 1px # 039;
подравняване на текст: вляво;
марж: 0;
}
След като зададете основите за елементите от списъка, поработете как изглежда менюто в областта на връзките. Първо оформете навигацията:
UL # навигация LI A
След това оформете следното:
A: връзка
A: посетен
О: задръжте курсора на мишката
О: активен
За връзките направете връзките блоков елемент (а не стандартния ред). Това принуждава връзките да заемат цялото пространство на LI и да действат като абзац, правейки връзките по-лесни за оформяне като бутони от менюто. След това премахнете следното:
подчертаване, декорация на текст: няма; като
Това прави бутоните да изглеждат по-скоро като бутони. Вашият дизайн може да е различен.
ul # навигация li a {
дисплей: блок;
декорация на текст: няма;
подложка: .25em;
граница-дъно: плътно 1px # 39f;
граница-дясно: плътно 1px # 39f;
}
С дисплей: блок; зададени на връзките, цялото поле на елемента от менюто може да се кликва, не само буквите. Това е добре и за използваемостта. Задайте цветовете на връзката (връзка, посетена, задръжте и активна), ако искате връзките да се различават от стандартната синя, червена и лилава.
a: връзка, a: посетен {цвят: #fff; }
a: hover, a: active {color: # 000; }
Можете също така да обърнете малко внимание на състоянието на задържане, като промените цвета на фона.
a: hover {background-color: #fff; }
Меню за хоризонтална навигация
Създаването на менюта за хоризонтална навигация е малко по-трудно от менютата за вертикална навигация, защото трябва да компенсирате факта, че HTML списъците предпочитат да се показват вертикално. Както при хоризонталното меню, създайте списък с меню за навигация:
- У дома
- Продукти
- Услуги
- Свържете се с нас
За да създадете хоризонтално меню, работете по същия начин, както при вертикалното меню. Започнете от външната страна и работете вътре. За да стартирате навигацията в левия ъгъл, задайте я с 0 ляв поле и подложка и я плувайте вляво.
Вземете навика да задавате ширината, така че менюто ви да не заема повече или по-малко място, отколкото възнамерявате. За хоризонталните менюта това обикновено е цялата ширина на дизайна. Можете също да добавите цвят на фона към списъка, за да е по-лесно за четене.
ul # navigation {
плувка: ляво;
марж: 0;
подплата: 0;
ширина: 100%;
фон-цвят: # 039;
}
Тайната на хоризонталното меню за навигация е в елементите от списъка. Елементите от списъка обикновено са блокови елементи, което означава, че тези елементи имат нов ред, поставен преди и след всеки един. С превключването на дисплея от блок на вграден, вие принуждавате елементите на списъка да се подредят хоризонтално един до друг.
ul # навигация li {дисплей: вграден; }
Третирайте връзките точно като менюто за вертикална навигация, със същите цветове и декорация на текст. Добавете горна граница, за да очертаете бутоните, когато потребителят задържи курсора на мишката върху бутон. След това извадете дисплей: блок; тъй като това връща новите редове обратно и унищожава хоризонталното меню.
Вие сте тук Информация за местоположението
Друг аспект на HTML е този идентификатор:
ти си тук
Ако искате да промените менюто си, за да посочите текущото местоположение на вашите потребители, използвайте този идентификатор, за да дефинирате различен цвят на фона или друг стил. Преместете този идентификатор на атрибута в правилния елемент от менюто на други страници, така че текущата страница винаги да бъде маркирана.
Ако съберете тези стилове заедно на вашата страница, можете да създадете хоризонтална или вертикална лента с менюта, която работи с вашия сайт и е бърза за изтегляне и лесна за актуализация. Използването на XHTML + CSS превръща вашите списъци в мощен инструмент за проектиране.
Ако искате повече примери за хоризонтални менюта, потърсете в мрежата следното:
- Стилно хоризонтално меню
- Основен хоризонтален шаблон на менюто
- Стилно хоризонтално меню с You Are Here
- Основен шаблон за хоризонтално меню с You Are Here