Използване на връзки за създаване на вертикални навигационни менюта

Ако погледнете отблизо HTML, ще забележите, че връзката "Начало" има и идентификатор на вас. Това ще ви позволи да създадете меню, което идентифицира текущото местоположение за вашите читатели. Дори и да не планирате да имате такъв тип визуално подреждане на сайта си точно сега, можете да включите тази информация. Ако решите да добавите по-късно, ще имате по-малко кодиране, за да подготвите сайта си.

Без CSS styling , това XHTML меню изглежда като стандартен неорганизиран списък. Има куршуми и елементите в списъка са леко нарязани. Тъй като използвам заместващи символи , повечето браузъри няма да показват връзките под формата на кликване (подчертани и в синьо). Ако в горния HTML поставите в уеб страница, навигацията ви ще изглежда така:

• У дома
• Продукти
• Услуги
• Свържете се с нас

Това е доста скучно и не прилича много на меню. Но само с няколко CSS стила, добавени към списъка, можете да създадете меню, което ви прави горди.

Вертикално навигационно меню

Вертикалното навигационно меню е много лесно за писане, защото се показва по същия начин като нормален списък: нагоре и надолу.

Елементите от списъка се показват вертикално надолу по страницата.

Когато нагласям менютата, искам да започна отвън и да работя. С това искам да кажа, че за първи път стил на # навигация и след това преминете към ли елементите и след това връзките и т.н. Така че за това меню, първо определяте ширината на менюто. Това ще гарантира, че дори ако елементите на менюто са дълги, те няма да натиснат останалата част от оформлението или да причинят хоризонтално превъртане.

ul # навигация {width: 12em; }

След като настроя ширината, мога да играя с елементите в списъка. Това ми позволява да задам неща като (да се отърва от куршумите), цветове на фона, граници, подравняване на текста и маржове.

ul # навигация li {
списък стил: няма;
цвят на фона: # 039;
горна граница: солидна 1px # 039;
текст-подравняване: ляво;
марж: 0;
}

След като зададете основите за елементите в списъка, можете да започнете да играете с това, как изглежда менюто в областта на връзките. Първият стил е UL # навигацията LI A и след това връзката A: A: посетен, A: Hover и A: активен (ако искате). За връзките искам да направя връзките блоков елемент (а не по подразбиране по подразбиране). Това ги принуждава да заемат цялото пространство на LI - и те действат по-скоро като параграф, което ги прави по-лесни за стил като бутони на менюто. Другото нещо, което винаги правя, е премахването на подсветката (текст-декорация: няма; тъй като това прави бутоните да изглеждат по-скоро като бутони за мен.

Разбира се, вашият дизайн може да е различен.

ul # навигация li a {
дисплей: блок;
текстова декорация: няма;
подложка: .25em;
крайно дъно: твърдо 1px # 39f;
граница-дясно: солидно 1px # 39f;
}

Забележете, че с дисплея: блок; зададена в връзките, цялата клетка на елемента от менюто може да се кликва, а не само буквите. Това също е полезно за ползваемостта. Уверете се, че сте задали цветовете на връзката (връзка, посетена, задръжте курсора на мишката и активна), ако искате те да бъдат различни от стандартните сини, червени и лилави.

а: връзка, a: посетена {цвят: #fff; }
а: мишката, а: активна {цвят: # 000; }

Също така искам да дам малко повече внимание на състоянието на ходенето, като променя цвета на фона.

а: задържи {background-color: #fff; }

Ако искате повече примери за вертикални менюта, разгледайте списъка по-долу.

• Стилово вертикално меню
• Основен шаблон за вертикални менюта
• Стилно вертикално меню с вас сте тук
• Основен шаблон за вертикално меню с вас

Хоризонтално навигационно меню

Създаването на хоризонтални навигационни менюта е малко по-трудно от вертикалните навигационни менюта, защото трябва да компенсирате факта, че HTML списъците предпочитат да се показват вертикално. Както при хоризонталното меню, първо създайте списъка си с навигационни менюта :

<Навигация>
<Ул>

За да създадете хоризонтално меню, работете същите като с вертикалното меню. Започнете отвън и работете. Тъй като искам навигацията ми да започне в левия ъгъл, аз я поставям с 0 ляв марж и подложка, а аз я плувам наляво. Трябва също да получите навика да зададете ширината така, че менюто ви да не заема повече или по-малко пространство, отколкото смятате. За хоризонталните менюта обикновено това е цялата ширина на дизайна. Също така добавих цвят на фона в целия списък, за да е по-лесен за четене.

ul # navigation {
плувка: ляво;
марж: 0;
подложка: 0;
ширина: 100%;
цвят на фона: # 039;
}

Но тайната на хоризонталното навигационно меню е в списъка. Елементите от списъка обикновено са блокови елементи, което означава, че те ще имат нов ред преди и след всяка от тях. Чрез превключването на дисплея от блок към инлайн вие принуждавате елементите на списъка да се подреждат една до друга хоризонтално.

ul # навигация li {дисплей: инлайн; }

Третирах връзките точно както ги обработвах във вертикалното навигационно меню със същите цветове и декорация на текст. Добавих горна граница, за да очертае копчетата, когато се движат. Единственото нещо, което премахнах, беше дисплеят: блок; тъй като това ще постави новите линии обратно и ще унищожи хоризонталното меню.

ul # навигация li a {
текстова декорация: няма;
подложка: .25em 1em;
крайно дъно: твърдо 1px # 39f;
горна граница: солидна 1px # 39f;
граница-дясно: солидно 1px # 39f;
}
а: връзка, a: посетена {цвят: #fff; }
ul # навигация li a: мишката {
цвят на фона: #fff;
цвят: # 000;
}

Вие сте тук Информация за местоположението

Друг аспект на HTML е идентификаторът ви. Ако искате да промените менюто си, за да посочите текущото местоположение на вашите потребители, просто използвайте този идентификатор, за да определите различен цвят на фона или друг стил. Преместете този идентификационен атрибут на правилния елемент от менюто на други страници, така че текущата страница винаги да е осветена.

ul # навигация li # youarehere {background-color: # 09f; }

Ако поставите тези стилове заедно на страницата си, можете да създадете хоризонтална или вертикална лента с менюта, която работи с вашия сайт, но бързо се изтегля и много лесно да се актуализира в бъдеще. Използването на XHTML + CSS превръща вашите списъци в много мощен инструмент за дизайн.

Ако искате повече примери за хоризонтални менюта, направете справка със следното.

• Оформено хоризонтално меню
• Основен шаблон за хоризонтално меню
• Стилово хоризонтално меню с вас сте тук
• Основен шаблон за хоризонтално меню с вас