Без обзира да ли је мени за навигацију ваше веб странице водоравни ред преко врха или вертикални ред доле са стране, то је само листа. Приликом пројектовања веб навигација, мени за навигацију је група веза. Када програмирате навигацију помоћу КСХТМЛ + ЦСС, можете да направите мени који је мали за преузимање (КСХТМЛ) и лак за прилагођавање (ЦСС).
Почетак
Да бисте дизајнирали листу за навигацију, морате да користите листу. То је можда стандардни неуређени списак који је идентификован као навигација. На пример:
- Кућа
- Производи
- Услуге
- Контактирајте нас
Када се гледа ХТМЛ, веза Почетна има ИД.
ти си овде
То вам омогућава да креирате мени који идентификује тренутну локацију за ваше читаоце. Чак и ако тренутно не планирате да имате такву врсту визуелног знака на својој веб локацији, можете да укључите те информације. Ако се касније одлучите да додате знак, имаћете мање кода за припрему веб локације.
Без икакве ЦСС стил, овај КСХТМЛ мени изгледа као стандардна неуређена листа. Постоје меци, а ставке на списку су благо увучене. Када користиш
везе резервираних места, већина прегледача не приказује везе као на које је могуће кликнути (подвучено и плаво). Када налепите ХТМЛ на веб страницу, навигација изгледа овако:- Кућа
- Производи
- Услуге
- Контактирајте нас
Ово не личи много на мени. Међутим, са неколико ЦСС стилова додатих на листу, можете створити мени који вас чини поносним.
Ако желите још примера вертикалних менија, потражите следеће:
- Стилизовани вертикални мени
- Основни вертикални образац менија
- Стилизовани вертикални мени са Овде сте
- Основни вертикални образац менија са Овде сте
Вертикални мени за навигацију
Вертикални мени за навигацију лако је написати јер се приказује на исти начин као и нормална листа: горе и доле. Ставке листе приказују се вертикално надоле на страници.
При обликовању менија започните споља и радите унутра. Прво обликујте навигацију:
ул # навигација
Затим пређите на елементе и везе. Прво дефинишите ширину менија. Ово осигурава да ако су ставке у менију дугачке, ставке неће потиснути остатак распореда или изазвати хоризонтално помицање.
ул # навигатион {ширина: 12ем; }
Након што поставите ширину, радите на ставкама листе. То вам омогућава да поставите ствари попут боја позадине, ивица, поравнања текста и маргина.
ул # навигација ли {
стил листе: ниједан;
боја позадине: # 039;
бордер-топ: солид 1пк # 039;
поравнање текста: лево;
маржа: 0;
}
Након што поставите основе за ставке листе, порадите на томе како изгледа мени у области веза. Прво обликовање навигације:
УЛ # навигација ЛИ А
Затим стилизујте следеће:
Линк
О: посећено
О: лебдите
О: активно
За везе нека везе буду блок елемент (а не подразумевани редослед). Ово присиљава везе да заузимају читав простор ЛИ-а и делују као пасус, чинећи везе лакшим за обликовање као дугмад у менију. Затим уклоните следеће:
подвлачење, украс текста: ниједан; као што
Због тога дугмад више личе на дугмад. Ваш дизајн може бити другачији.
ул # навигатион ли а {
дисплеј блок;
декорација текста: ниједна;
подлога: .25ем;
ивица-дно: пуна 1пк # 39ф;
ивица-десно: солидно 1пк # 39ф;
}
Са дисплеј блок; постављено на везама, на цело поље ставке менија се може кликнути, а не само на слова. Ово је такође добро за употребљивост. Подесите боје везе (веза, посета, задржавање и активирање) ако желите да се везе разликују од подразумеване плаве, црвене и љубичасте боје.
а: веза, а: посећено {цолор: #ффф; }
а: ховер, а: ацтиве {боја: # 000; }
Стању лебдења можете такође посветити мало пажње променом боје позадине.
а: ховер {бацкгроунд-цолор: #ффф; }
Мени хоризонталне навигације
Стварање хоризонталних навигационих менија је мало теже од вертикалних навигационих менија јер морате надокнадити чињеницу да ХТМЛ листе преферирају вертикални приказ. Као и код хоризонталног менија, направите листу менија за навигацију:
- Кућа
- Производи
- Услуге
- Контактирајте нас
Да бисте креирали хоризонтални мени, радите исто као и вертикални мени. Почните са споља и радите унутра. Да бисте покренули навигацију у левом углу, подесите је са 0 леве маргине и додатака и лебдите лево.
Стекните навику подешавања ширине тако да ваш мени не заузима више или мање простора него што намеравате. За хоризонталне меније ово је обично пуна ширина дизајна. Такође можете додати боја позадине на листу ради лакшег читања.
ул # навигатион {
лебди: лево;
маржа: 0;
попуњавање: 0;
ширина: 100%;
боја позадине: # 039;
}
Тајна хоризонталног навигационог менија је у ставкама листе. Ставке листе су обично блок елементи, што значи да ове ставке имају нови ред пре и после сваког. Пребацивањем приказа из блока у ред, присиљавате елементе листе да се водоравно поређају један поред другог.
ул # навигација ли {дисплаи: инлине; }
Третирајте везе тачно као вертикални мени за навигацију, са истим бојама и украсом текста. Додајте горњу ивицу да бисте одредили дугмад када корисник пређе курсором преко дугмета. Затим уклоните дисплеј блок; јер то враћа нове редове и уништава хоризонтални мени.
Овде сте Информације о локацији
Следећи аспект ХТМЛ-а је овај идентификатор:
ти си овде
Ако желите да измените свој мени тако да указује на тренутну локацију ваших корисника, користите овај ИД да бисте дефинисали другу боју позадине или други стил. Преместите тај ИД атрибута у тачну ставку менија на другим страницама тако да је тренутна страница увек истакнута.
Ако ове стилове саставите на својој страници, можете да направите хоризонталну или вертикалну траку менија која ради са вашом веб локацијом, брзо се преузима и лако ажурира. Коришћење КСХТМЛ + ЦСС претвара ваше листе у моћну алатку за дизајн.
Ако желите још примера хоризонталних менија, потражите следеће:
- Стилизовани хоризонтални мени
- Основни хоризонтални шаблон менија
- Стилизовани хоризонтални мени са Овде сте
- Основни шаблон хоризонталног менија са Овде сте