А чекор-по-чекор водич
Дали менито за навигација е хоризонтален ред преку врвот или вертикален ред надолу од страна, тоа се уште е само листа. Кога ја дизајнирате веб-навигацијата, често е лесно да се заборави дека менито за навигација е само прославена група на врски. Но, ако ја програмирате вашата навигација користејќи XHTML + CSS, можете да креирате мени што е мал за преземање (XHTML) и лесно да се прилагоди (CSS).
Да започнеме
За да започнете со дизајнирање на листа за навигација, треба да користите листа.
Тоа може да биде стандардна неподредена листа која е идентификувана како навигација:
Ако погледнете внимателно во HTML, ќе забележите дека линкот "Дома", исто така, има лична карта за вас. Ова ќе ви овозможи да креирате мени што ја идентификува тековната локација за вашите читатели. Дури и ако не планирате да имате таков визуелен знак на вашата веб-локација, можете да ги вклучите тие информации. Ако одлучите да го додадете знакот подоцна, ќе имате помалку кодирање за да го подготвите вашиот сајт.
Без стил на CSS , ова мени за XHTML изгледа како стандардна листа со неповрзани содржини. Постојат куршуми и елементите на листата се малку вовлечени. Бидејќи ги користам линковите за засегнувања , повеќето прелистувачи нема да ги прикажуваат линковите како кликави (подвлечени и сини). Ако поставите во горенаведениот HTML во веб-страница, вашата навигација ќе изгледа вака:
- Дома
- Производи
- Услуги
- Контактирајте не
Ова е прилично здодевно и не изгледа како мени. Но, со само неколку CSS стилови додадени на листата, можете да создадете мени што ве прави горди.
Вертикално мени за навигација
Вертикалното мени за навигација е многу лесно да се напише, бидејќи се прикажува на ист начин како нормална листа: нагоре и надолу.
Ставките на листата се прикажуваат вертикално по страната.
Кога ги менувам менијата, сакам да започнувам однадвор и да работам. Со ова, мислам дека најпрво го нагласувам ul # навигацијата, а потоа се префрлам на ли-елементите, а потоа на линковите итн. Значи, за ова мени, прво ја дефинирате ширината на менито. Ова ќе осигура дека дури и ако ставки од менито се долги, тие нема да го притиснат остатокот од распоредот или да предизвикаат хоризонтално лизгање.
ul # навигација {ширина: 12em; }
Откако ја добив ширината, може да играм со ставките од листата. Ова ми дозволува да ги поставам работите како (да се ослободам од куршуми), бои во заднина, граници, порамнување текст и маргини.
ul # навигација li {
листа-стил: нема;
боја на позадина: # 039;
граница-врв: солидна 1px # 039;
текст-усогласување: лево;
маргина: 0;
}
Откако ќе ги поставите основите за елементите на листата што можете да ги започнете да играте со тоа како изгледа менито во областа на линковите. Прв стил UL # навигација ЛИ А, а потоа линкот A: A: посетени, A: лебдат и A: активен (ако ги сакате). За линковите, сакам да ги направам линковите блок елемент (наместо стандардниот во линија). Ова ги принудува да го заземат целиот простор на ЛИ - и тие повеќе се однесуваат како став, што ги прави полесно да стилуваат како мени копчиња. Друга работа што секогаш ја правам е да се отстрани подвлекувањето (текст-декорација: нема;), бидејќи ова ги прави копчињата повеќе како копчиња за мене.
Но, се разбира, вашиот дизајн може да биде различен.
ul # navigation li a {
дисплеј: блок;
текст-декорација: нема;
подлога: .25em;
граница-дното: солидна 1px # 39f;
граница-десна: солидна 1px # 39f;
}
Забележете дека со екранот: блок; поставени на линковите, целата кутија на менито се клика, а не само буквите. Ова е исто така добро за употребливост. Бидете сигурни да ги поставите боите на врската (врската, посетените, лебди и активни) ако сакате да бидат различни од стандардната сина, црвена и виолетова боја.
a: link, a: visited {color: #fff; }
a: лебди, а: активен {боја: # 000; }
Исто така, сакам да му дадам на држателот на лебди малку повеќе внимание со промена на бојата на позадината.
a: hover {background-color: #fff; }
Ако сакате повеќе примери на вертикални менија, консултирајте се со списокот подолу.
- Стилизирано вертикално мени
- Основен образец на вертикална менија
- Стилизирано вертикално мени со вас се овде
- Основен Вертикален Мени Шаблон со Вие сте тука
Хоризонтално мени за навигација
Креирањето на менија за хоризонтална навигација е малку потешко од менијата за вертикална навигација затоа што мора да се надомести фактот дека HTML-листите претпочитаат да се прикажуваат вертикално. Како и со хоризонталното мени, прво креирајте ја листата на мени за навигација :
За да креирате хоризонтално мени, работите исто како што правите со вертикалното мени. Започнете со надворешноста и работиме. Бидејќи сакам мојата навигација да започне во левиот агол, ја поставив со 0 лева маргина и баласт, и лебдејќи го лево. Исто така треба да добиете навика да ја поставите ширината така што менито не зазема повеќе или помалку простор отколку што имате намера. За хоризонтални менија, ова е обично целосната ширина на дизајнот. Исто така, додадов боја на позадина на целата листа за да може полесно да се прочита.
ul # навигација {
плови: лево;
маргина: 0;
Соочи: 0;
ширина: 100%;
боја на позадина: # 039;
}
Но, тајната на хоризонталното мени за навигација е во ставките на листата. Ставките од листата се нормално блок елементи, што значи дека тие ќе имаат нова линија поставена пред и по секоја од нив. Префрлајќи го екранот од блок до инлајн, ги принудувате елементите на листата да се постават еден до друг хоризонтално.
ul # навигација li {екран: внатрешен; }
Ги третирав линковите токму како што ги третирав во вертикалната мени за навигација, со истите бои и декорација на текст. Јас додадов врвна граница за да ги исцртаат копчињата кога тие се надвиснуваат. Единственото нешто што го отстранив беше прикажувањето: блок; бидејќи тоа ќе ги врати нови линии и ќе го уништи хоризонталното мени.
ul # navigation li a {
текст-декорација: нема;
Соочи: .25em 1em;
граница-дното: солидна 1px # 39f;
граница-врв: солидна 1px # 39f;
граница-десна: солидна 1px # 39f;
}
a: link, a: visited {color: #fff; }
ul # navigation li a: hover {
боја на позадина: #fff;
боја: # 000;
}
Тука се наоѓате информации за локација
Друг аспект на HTML е вашиот идентификатор. Ако сакате да го промените менито за да ја покажете моменталната локација на вашите корисници, едноставно користете го ова ID за да дефинирате различна боја на позадина или друг стил. Премести го атрибутот на идентификацијата на точната ставка на менито на други страници, така што моменталната страница секогаш е означена.
ul # навигација li # yourehere {background-color: # 09f; }
Ако ги ставите овие стилови заедно на вашата страница, можете да креирате хоризонтална или вертикална лента со менија која работи со вашиот сајт, но е брза за преземање и многу лесно да се ажурира во иднина. Користењето на XHTML + CSS ги претвора вашите списоци во многу моќна алатка за дизајн.
Ако сакате повеќе примери на хоризонтални менија, консултирајте се со следново.
- Стилизирано хоризонтално мени
- Основен хоризонтален образец за менија
- Стерилизирано хоризонтално мени со вас се овде
- Основен хоризонтален образец за менија со Вие сте овде