Навигацията в уеб страниците е форма на списък и навигацията с табове е като хоризонтален списък. Това е доста лесно да се създаде хоризонтална табулационна навигация с CSS, но CSS 3 ни дава още няколко инструмента, за да изглеждат още по-хубави.
Този урок ще ви преведе през HTML и CSS, необходими за създаване на CSS меню. Кликнете върху тази връзка, за да видите как ще изглежда.
Това меню с табове използваняма изображения, само HTML и CSS 2 и CSS 3. Тя може лесно да бъде редактирана, за да добавите още раздели или да промените текста в тях.
Поддръжка на браузъра
Това меню на раздели ще работивсички основни браузъри, Internet Explorer няма да покаже закръглените ъгли, но в противен случай ще покаже разделите точно като Firefox, Safari, Opera и Chrome.
Напишете вашия списък с менюта
Всички навигационни менюта и табулатори са наистина просто неорганизиран списък. Така че, първото нещо, което искате да направите, е да напишете неопределен списък с връзки към мястото, където искате да отидете навигацията с табове.
Този урок предполага, че пишете вашия HTML в текстов редактор и че знаете къде да поставите HTML за менюто си на вашата уеб страница.
Напишете своя неорганизиран списък по следния начин:
клас = "маса на">CSS 3J = "настоящите"> разделиЗаМенюта
клас = "маса на"иID = "ток".Първото е длъжен, Ако не сложитемаса накласа на вашия неорганизиран списък, разделите няма да работят. Втората е по избор. СложиID = "ток"върху който и да е таб, който искате да бъде откроен на тази страница. Обикновено използваме това, за да подчертаем страницата, в която се намираме, но можете да го използвате, за да подчертаете най-важния раздел. Или можете да го премахнете напълно.
Започнете да редактирате стила си
Можете да използвате външен стилов лист или вътрешен лист с стилове. Страницата с извадки от менюто използва вътрешен лист с стилове в
на документа.Първо ще оформят самата UL
Тук използваме класамаса на в HTML. Вместо да оформяте UL етикета, който би оформял всички неопределени списъци на страницата ви, трябва да оформявате само UL класа.маса на Така че първият запис в CSS трябва да бъде:
.tablist {}
Обичаме да вкараме крайната къдрава скоба () напред, затова не я забравяме по-късно.
Докато използваме неразреден таг на списъка за списъка с менюта на раздел, но ние не искаме да се вмъкват куршуми или числа. Така че първият стил, който трябва да добавите, е.списък стил: няма; Това казва на браузъра, че докато е списък, това е списък без предварително определени стилове (като куршуми или числа).
След това можете да зададете височината на списъка си така, че да съответства на мястото, което искате да запълни. Избрахме 2м за нашата височина, тъй като това е двойно по-голямо от стандартния размер на шрифта и дава около половин елемент над и под текста на раздела.височина: 2 дм; Но можете да настроите ширината си до какъв размер искате. UL таговете автоматично ще заемат 100% от ширината, така че ако не искате тя да бъде по-малка от текущия контейнер, можете да оставите ширината.
И накрая, ако вашият главен стилов лист няма предварително зададени UL и OL маркери, вие ще искате да ги въведете. Това означава, че трябва да изключите границите, маржовете и подложките във вашия UL. подложка: 0; марж: 0; граница: няма; Ако вече сте нулирали маркера UL, можете да промените полетата, подложката или границата с нещо, което пасва на вашия дизайн.
Вашият последен клас .tablist трябва да изглежда така:
.tablist {style-style: none; височина: 2 дм; подложка: 0; марж: 0; граница: няма; }
Редактиране на елементите от списъка на LI
След като сте оформени нерегистрирания си списък, трябва да оформите етикетите на LI в него. В противен случай те ще действат като стандартен списък и всяко преместване в следващия ред без правилно поставяне на раздели.
Първо, настройте собствеността си на стил:
.tablist li {}
След това искате да плавате вашите раздели, така че да се подреждат в хоризонталната равнина. плаваш: ляв;
И не забравяйте да добавите известна разлика между разделите, така че да не се слеят заедно. марж-надясно: 0.13em;
Вашите стилове ли трябва да изглеждат така:
.tablist ли {плува: наляво; марж-надясно: 0.13em; }
Създаването на разделите изглежда като разделите с CSS 3
За да направите по-голямата част от тежкото повдигане в този стилов лист, насочваме връзките в несъответстващия списък. Браузърите разпознават, че връзките правят повече на уеб страница, отколкото други тагове, затова е по-лесно да получат по-стари браузъри, за да се съобразят с неща като състоянието на хоста, ако ги прикрепите към етикета за котва (връзки). Затова първо напишете свойствата на вашия стил:
.tablist ли а {}. табл а ли: hover {}
Тъй като тези раздели трябва да действат като раздели в приложение, искате цялата област на раздела да бъде кликван, а не само свързаният текст. За да направите това, трябва да преобразувате маркера А от нормалното му "inline" състояние в блоков елемент. езика: блок; (Ако сте заинтересовани да научите повече за разликата, прочетете блок-ниво срещу вградени елементи.)
После, лесен начин да принудите вашите раздели да бъдат симетрични един с друг, но все пак да се подпирате по ширината на текста, е да направите правилната и лявата подложка същата. Използвахме имота със стенография, за да настроим горната и долната част на 0 и десния и левия на 1ем. подложка: 0 1ем;
Също така избрахме премахването на подчертаната връзка, така че разделите да изглеждат по-малко като връзки.Но ако вашата публика може да бъде объркана с това, оставете тази линия. връзка-декорация: няма;
Чрез поставянето на тънка граница около раздели, това ги прави да изглеждат като раздели. Използвахме граничните стенограми, за да сложим границата около четирите страни граница: 0.06м твърдо # 000; След това използвахме собствеността на долната граница, за да я премахнем отдолу. граница дъно: 0;
След това направихме някои корекции на шрифта, цвета и фоновия цвят на разделите. Задайте ги на стиловете, които съответстват на вашия сайт. шрифт: удебелен 0.88em / 2em arial, генва, helvetica, sans-serif; цвят: # 000; фон-цвят: #ccc;
Всички гореспоменати стилове трябва да отидат в селектора.tablist li a, правилото, така че те по принцип да повлияят на етикетите на котвата. След това, за да направите разделите да изглеждат по-лесно кликване, трябва да добавите няколко правило за държавата. табл.
Обичаме да променим цвета на текста и фона, за да направим раздела поп, когато го поставите над него. фон: # 3cf; Цвят: #fff;
И ние включихме друго напомняне към браузърите, че искаме връзката да не остане подчертана. текстови декорация: няма; Друг често използван метод е да включите подчертаната линия, когато сте натиснали мишката върху раздела. Ако искате да направите това, променете го текст-украса: подчертае;
Но къде е CSS 3?
Ако сте обръщали внимание, вероятно сте забелязали, че в стиловия лист не са използвани стилове на CSS 3. Това има предимството да работи във всеки модерен браузър, включително в Internet Explorer. Но това не прави разделите да изглеждат като нещо повече от квадратни кутии. Чрез добавяне на CSS 3 стил на радиус на повикване (и свързаните с него браузъри), можете да направите краищата закръглени, за да изглеждате по-скоро като раздели в папката manila.
Стилът, който трябва да добавите към .tablist li a са: -webkit гранично-горния десен радиус: 0.50em; -webkit гранично-горния ляв радиус: 0.50em; -moz гранично-радиус-topright: 0.50em; -moz гранично-радиус-topleft: 0.50em; гранично-горния десен радиус: 0.50em; гранично-горния ляв радиус: 0.50em;
Това са последните правила за стил, които написахме:
.tablist li a {дисплей: блок; подложка: 0 1ем; текстови декорация: няма; граница: 0.06м твърдо # 000; граница дъно: 0; шрифт: удебелен 0.88em / 2em arial, генва, helvetica, sans-serif; цвят: # 000; фон-цвят: #ccc; / * CSS 3 елемента * / webkit-border-top-right-radius: 0.50em; -webkit гранично-горния ляв радиус: 0.50em; -moz гранично-радиус-topright: 0.50em; -moz гранично-радиус-topleft: 0.50em; гранично-горния десен радиус: 0.50em; гранично-горния ляв радиус: 0.50em; } .tablist li a: задръжте {background: # 3cf; Цвят: #fff; текстови декорация: няма; }
С тези стилове имате меню с табове, което работи във всички основни браузъри и прилича на хубави отпечатани раздели в браузърите, съвместими със CSS 3. Следващата страница ви дава още една опция, която можете да използвате, за да я обличате още повече.
Маркирайте текущия раздел
В HTML, който създадохме, UL имаше един елемент от списъка с идентификатор. Това ви позволява да дадете на един LI различен стил от останалите. Най-честата ситуация е да направите текущия раздел да се отличава по някакъв начин. Друг начин да се замислите за това е, че искате да зачеркнете раздели, които не са на живо. Тогава променяте къде е идентификационният номер на различните страници.
Стилът е както на #current маркера, така и на #current A: задържите, така че и двата да са малко по-различни. Можете да промените цвета, цвета на фона, дори и височината, ширината и подложката на този елемент. Направете каквито и да са промени в дизайна.
.tablist li # текущ a {background-color: # 777; цвят: #fff; } .tablist li # текущ a: hover {background: # 39C; }
И сте готови! Току-що сте създали меню с табове за уебсайта си.
