Да ли је ваш навигациони мени хоризонтални ред преко врха или вертикални низ низ страну, то је и даље само листа. Приликом дизајнирања веб навигације, често је лако заборавити да је навигациони мени само прослављена група веза. Али ако програмирате своју навигацију користећи КСХТМЛ + ЦСС, можете креирати мени који је мали за преузимање (КСХТМЛ) и једноставан за прилагођавање (ЦСС).
Почетак
Да бисте започели дизајнирање листе за навигацију, морате користити листу. Можда је стандардна неуређена листа која је идентификована као навигација:
Ако пажљиво погледате ХТМЛ, приметићете да линк "Хоме" такође има ИД од
ти си овде. Ово ће вам омогућити да креирате мени који идентификује тренутну локацију за своје читаоце. Чак и ако не планирате такву врсту визуелног знака на вашој веб локацији управо сада, можете их укључити. Ако одлучите да касније додате биљку, имаћете мање кодирања за припрему вашег сајта.
Без стилског ЦСС-а, овај КСХТМЛ мени изгледа као стандардна неуређена листа. Постоје меци и ставке листе су мало раздвојене. Пошто користим линкове за држаче, већина претраживача неће приказивати везе као кликне (подвучене и плаве). Ако поставите горе наведени ХТМЛ на Веб страницу, ваша навигација ће изгледати овако:
- Кућа
- Производи
- Услуге
- Контактирајте нас
Ово је прилично досадно и не изгледа баш као мени. Али са само неколико ЦСС стилова доданих на листу, можете креирати мени који вас чини поносним.
Вертикално навигацијско мени
Вертикални навигациони мени је веома једноставан за писање, јер приказује на исти начин као и нормална листа: горе и доље. Ставке листе се приказују вертикално на страници.
Када мењам стилове менија, волим да започињем споља и радим. Овим, мислим да прво стајам
ул # навигација а затим пређите на
ли елементе, а затим везе, итд. Дакле, за овај мени прво дефинишете ширину менија. Ово ће осигурати да чак и ако су ставке менија дугачке, неће претерати остатак распореда нити проузроковати хоризонтално скроловање.
ул # навигациа {ширина: 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ф; } Ако ставите ове стилове на своју страницу, можете креирати хоризонталну или вертикалну линију менија која функционише са вашом страном, али је брзо преузети и врло лако ажурирати у будућности. Коришћење КСХТМЛ + ЦСС претвара ваше листе у веома моћан алат за дизајн. Ако желите више примера хоризонталних менија, консултујте следеће.
Хоризонтално навигацијско мени
Ви сте овде информације о локацији
