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