Кодирање Грацефул Бреадцрумб Навигатион Мену у ЦСС3
Навигациони менији и линкови су можда најважнији елементи интерфејса за веб изглед. То су једине могућности за кориснике путовање између страница и интеракцију са свим садржајем који сте креирали. Бреадцрумб нуди сличну функционалност са додатном погодношћу праћење ваше тренутне позиције. Моћи ћете приказати све претходне путање везе док корисник прелази хијерархију вашег сајта.
У овом туторијалу креираћемо бриљантан навигациони мени са неким ЦСС3 ефектима. Ово је тестирано да ради у свим већим ЦСС3-компатибилним претраживачима, чак и старији претраживачи који не подржавају ЦСС3 ће и даље исправно приказивати у већини случајева.
Пре него што уђемо у код, мало ћемо причати о функционалности нашег хлеба, пун туторијал на скоку!
Нудим Траил
Траг трагова није сложенији од било којег другог менија. Наши стилови ће користити много сложеније ЦСС особине од већине примера, али наш шаблон је још увек на месту да усмерава кориснике са једне странице на другу..
У овом примеру ћемо поново креирати сличан стил као Гооглеов изборник подршке. Можете да видите њихов мени на Гмаил страници за подршку да бисте добили идеју о томе где идемо. На крају желимо пружити најбоље корисничко искуство свим корисницима, без обзира на њихов оперативни систем или софтвер за прегледач, тако сам направио 2 различита примера кода који подржавају грациозну деградацију међу старијим претраживачима.
Први се користи прилагођене позадинске слике и одговарајуће ЦСС поравнања. Сви ховер догађаји и активни догађаји су унапред направљени са само неколико ЦСС стилова, али корисници који имају искључене слике неће моћи да доживе ове ефекте! Због тога сам такође направио мени сличног изгледа са ЦСС градијентима, заобљеним угловима и сјенама.
Ако сте нервозни када говорите о подржавању оба стила, можете бирати између њих за сопствени сајт. Већина посетилаца ће користити слике по подразумеваној вредности, али прокопајте алатку за анализу веб локације ако желите прецизније податке о посетиоцима.
Доста речи, хајдемо у пројекат! Почећемо са конструисањем основног ХТМЛ оквира и прећи на различите ефекте стила. Најпре потребно је да преузмете слику потребне за пројекат.
Баре-Бонес ХТМЛ
Покрећем свој документ са стандардни ХТМЛ5 шаблон странице. Ово укључује подразумевани доцтипе, повезане ЦСС и све основне елементе. Додао сам код испод ако желите да покренете свој документ на овај начин. Имајте на уму да не би требало да утиче на то како ће се приказати ваша хронична трава, па слободно користите свој шаблон странице ако желите.
Дефаулт Паге
Поделићу код на два различита блока. Први блок са сликама је изграђен нешто мало другачије, након чега следи наш мени без слика. Сваком сету се даје сопствени ИД тако да можемо да идентификујемо садржај много лакше. Ако сте и обожаватељ јКуери-а можете користити #ИД селектор да манипулишете свим интерним ДОМ елементима.
Прво имамо цонтаининг див са ид “бреадцрумб“. У демо фајлу сам то искористио да одвојим наш код и преместим га преко странице са неким додатним маргинама. Можете уклонити овај спољашњи див, али ћете морати поново да стилизујете све како бисте одговарали новом предлошку. Стварно не боли оставити контејнер јер ћете моћи много лакше да контролишете позиционирање.
Интерно сам направио хлебне мрвице користећи неуређену листу. Постоји толико много јединствених начина за прилагођавање стилизованих ХТМЛ листа, а хлебне мрвице су само једна од њих. Можете приметити да сам дао почетну ставку листе а класа оф “први“. Ово је потребно за неке додатне облоге како би ставке менија биле у линији. Додатно мала спан блоцк додаје се тако да имамо праву леву ивицу која не преклапа позадинску слику.
Поред тога, сваки сидрени линк је засађен са смањеним бројем за з-индек својство. Користећи слике које ћемо морати да се свака од наших веза преклапа да бисте исправно приказали стрелицу хлеба. Најлакши начин да се то постигне је подешавање з-индекса тако да свака веза прекрива следећу. Почео сам са 9 и одрадио доле, али ако имате више линкова у вашем менију, само почните са вишим бројем.
Мени без слика
До грациозно деградирамо наш хлеб потребан нам је секундарни сет ставки у ХТМЛ листи. Ако покушавате да се вратите на једну навигацију, можете да користите јКуери да бисте открили агент претраживача и сходно томе примените ИД. Нажалост, ово није увек поуздано (на пример, за неке мобилне кориснике). Друго решење је да укључују стилове специфичне за ИЕ и сакриј или покажи који мени најбоље ради - али наравно, ова опција је само за Интернет Екплорер.
бреадцрумб2 је наш нови ИД који се користи за циљање менија без слика. Држати се овог узорка који сам користио црумбс2 као класа за неуређену листу. Имајте на уму разлог због којег користимо класе је за своје једноставност дуплирања ових менија, тако да када желите неколико различитих хлебних мрвица на вашој страници, са овим класама ово никада неће постати проблем.
Задржали смо .први класе, али додатно додата .последњикласу на коначну листу. Без слика не можемо дуплирати стрелице за сваку ставку навигацијског изборника, тако да сам користио неке заобљени углови зачинити секундарни мени. .први цласс анд .последњи манипулишите радијусом ивице на самим ивицама нашег менија да бисте направили заиста цоол стил који изгледа веб 2.0.
ЦСС Слидинг Бацкгроунд Имагес
За неке од једноставнијих ефеката спојио сам оба крушна мрвица заједно приликом изградње својстава. Ово је корисно јер не само да штеди простор, већ се враћа на стил уређивања лакше прилагодити сопствени изглед.
За обе #бреадцрумб и # бреадцрумб2 Поставио сам лист-стиле: нема; тако да све интерне ставке неће имати ознаке. Можете оставити ово ако вам се допада ефекат, али открио сам да ХТМЛ постаје заморан за рад и много је лакше креирати нове иконе. Почнимо са нашим .мрвице класа.
.мрвице дисплаи: блоцк; .црумбс ли дисплаи: инлине; .црумбс ли.фирст паддинг-лефт: 8пк; .црумбс ли а, .црумбс ли а: линк, .црумбс ли а: виситед цолор: # 666; дисплеј блок; флоат: лефт; фонт-сизе: 12пк; маргин-лефт: -13пк; паддинг: 7пк 17пк 11пк 25пк; позиција: релативна; тект-децоратион: ноне; .црумбс ли а позадина-слика: урл ('… /имг/бг-црумбс.пнг'); позадина-понављање: нема понављања; позиција у позадини: 100% 0; позиција: релативна; .црумбс ли а: ховер цолор: # 333; позиција у позадини: 100% -48пк; курсор: показивач; .црумбс ли а: активно цолор: # 333; бацкгроунд-поситион: 100% -96пк; .црумбс ли.фирст а спан хеигхт: 29пк; видтх: 3пк; бордер-лефт: 1пк солид # д9д9д9; позиција: апсолутна; топ: 0пк; лево: 0пк; Ми поставите нашу неуређену листу на блокирати тако да се ништа друго не креће по том подручју. Обратите пажњу на ставке листе инлине док је свакој везној линији дат много више простора за ширење. Желимо да се сви простори у нашем менију могу кликнути тако да то захтева изградњу наших сидара као блок елемената.
Користио сам слику која се зове бг-црумбс.пнг за позадину. Ово је познато као једноставан спрајтов лист у ЦСС-у, или алтернативно а клизна врата техника. То значи да када корисник лебди или кликне на линк, ми померимо позицију у позадини да бисмо приказали ажурирани стил. Ова појединачна слика садржи сва три дизајна која су нам потребна за креирање позадина на различитим позицијама, тако да можемо користити позиција у позадини својство да се пресели на основу интеракције корисника.
Цустом Еффецтс са ЦСС3
Оригинални дизајн хлеба је много једноставнији за креирање. Ово је приметно, јер је много ЦСС својстава више базично него што бисте могли замислити, али сада почињемо да се фокусирамо на дуплирање ових ефеката само са ЦСС3!
Поједини стилови заузимају доста простора тако да ћу их поделити у 2 кодна блока.
.црумбс2 дисплаи: блоцк; маргин-лефт: 27пк; паддинг: 0; паддинг-топ: 10пк; .црумбс2 ли дисплаи: инлине; .црумбс2 ли а, .црумбс2 ли а: линк, .црумбс2 ли а: виситед цолор: # 666; дисплеј блок; флоат: лефт; фонт-сизе: 12пк; паддинг: 7пк 16пк 7пк 19пк; позиција: релативна; тект-децоратион: ноне; бордер: 1пк солид # д9д9д9; бордер-ригхт-видтх: 0пк; .црумбс2 ли а бацкгроунд-имаге: -вебкит-градиент (линеарно, лево дно, леви врх, боја-стоп (0,45, ргб (241,241,241)), боја-стоп (0,73, ргб (245,245,245))); бацкгроунд-имаге: -моз-линеар-градиент (централно дно, ргб (241,241,241) 45%, ргб (245,245,245) 73%); / * За Интернет Екплорер 5.5 - 7 * / филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = # ф1ф1ф1, ендЦолорстр = # ф5ф5ф5); / * За Интернет Екплорер 8 * / -мс филтер: "прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = # ф1ф1ф1, ендЦолорстр = # ф5ф5ф5)"; .црумбс2 ли.фирст а бордер-топ-лефт-радиус: 5пк; -моз-бордер-радиус-топлефт: 5пк; -вебкит-бордер-топ-лефт-радиус: 5пк; .црумбс2 ли.ласт а бордер-ригхт-видтх: 1пк; бордер-боттом-ригхт-радиус: 5пк; -моз-бордер-радиус-боттомригхт: 5пк; -вебкит-бордер-боттом-ригхт-радиус: 5пк;
Тхе .црумбс2 мени користи ЦСС градијенти да дуплирате позадинске ефекте. Ако нисте упознати са овим, препоручујем ЦСС Трицкс 'водич за ЦСС3 градијенте који би вам омогућио да ефикасно користите ЦСС3 градијенте. Укључили су још неколико својстава за Мицрософт и Опера прегледаче, али они нису у потпуности подржани у свим случајевима. Овде их нисам укључио у демо код - али добро је разумети све опције.
-вебкит-градиент и -моз-линеарни градијент су основна решења која обављају највећи део посла. За старије верзије програма Интернет Екплорер укључио сам стари код, али то није загарантовано да би се све време исправно приказивало (на крају крајева користимо моћне технике приказивања слика). Обратите пажњу да сам поставио РГБ и хек шифре боја између својстава позадине. Можете се држати једне или друге методе ако вам је удобније.
Тхе радијус границе Код се примењује само на нашој секундарној навигацији. Ово даје уредан ефекат у горњем левом и доњем десном углу целог менија. Чини се да трака готово поп-офф страницу - заиста фантастичан учинак на прегледнике који подржавају стилове, али они само покривају дефаулт стања за наше везе. Сада, хајде да изградимо ефекте лебдења сличне онима које смо користили горе.
ЦСС3 Границе и сенке
Кад год корисник прелази преко везе, желимо да ажурирамо неколико ствари. Прво морамо потамнити боје обруба на врху и дну нашег активног елемента. Ово се може видети и на сликама, како за ховер тако и за активна стања.
.црумбс2 ли: ховер бордер-топ-цолор: # ц4ц4ц4; бордер-боттом-цолор: # ц4ц4ц4; бацкгроунд-имаге: -вебкит-градиент (линеарно, лево дно, леви врх, боја-стоп (0,45, ргб (241,241,241)), боја-стоп (0,73, ргб (248,248,248))); бацкгроунд-имаге: -моз-линеар-градиент (централно дно, ргб (241,241,241) 45%, ргб (248,248,248) 73%); / * За Интернет Екплорер 5.5 - 7 * / филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = # ф8ф8ф8, ендЦолорстр = # ф1ф1ф1); / * За Интернет Екплорер 8 * / -мс-филтер: "прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = # ф8ф8ф8, ендЦолорстр = # ф1ф1ф1)"; цолор: # 333; -моз-бок-схадов: 0пк 2пк 2пк # е8е8е8; -вебкит-бок-схадов: 0пк 2пк 2пк # е8е8е8; бок-схадов: 0пк 2пк 2пк # е8е8е8; .црумбс2 ли а: активна бордер-топ-цолор: # ц4ц4ц4; бордер-боттом-цолор: # ц4ц4ц4; бацкгроунд-имаге: -вебкит-градијент (линеарно, лево дно, леви врх, боја-стоп (0,45, ргб (224,224,224)), боја-стоп (0,73, ргб (235,235,235))); бацкгроунд-имаге: -моз-линеар-градиент (централно дно, ргб (224,224,224) 45%, ргб (235,235,235) 73%); / * За Интернет Екплорер 5.5 - 7 * / филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = # ебебеб, ендЦолорстр = # е0е0е0); / * За Интернет Екплорер 8 * / -мс-филтер: "прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = # ебебеб, ендЦолорстр = # е0е0е0)"; бок-схадов: -1пк 1пк 1пк 0пк #дадада инсет; -вебкит-бок-схадов: -1пк 1пк 1пк 0пк #дадада инсет; -моз-бок-схадов: -1пк 1пк 1пк 0пк #дадада инсет; цолор: # 333;
Користим исти код градијента као што смо користили горе, али овај пут боје су много другачије ако сте приметили наше РГБ вредности. Свака од држава ће замрачити боју текста # 333, други дескриптори су благо измењени да би одговарали корисничким командама.
На лебдењу ћете видети а сјајан рељефни ефекат што је повезано са замрачене границе даје попуп стилове страница. Ако кликнете и задржите, ући ћете у активно стање које садржи а замрачен позадински градијент. Овај ефекат доводи до тога да дугмад изгледају стварно “притиснут” на страници.
Такође се пријављујемо бок-схадов својства из нових ЦСС3 спецификација. -вебкит, -моз, и подразумевани стилови се користе са истим поставкама. Лебдење приказује а лигхт схадов излази из дна изабране везе. Када је активна, сенка ће бити формирана на горњој, десној и доњој граници. Овај ефекат се креира са инсет кључна реч додата је на крај сваке линије својстава бокс-сенке. Поново ЦСС Трицкс је ваш најбољи пријатељ овде са одличним чланком о бок-схадову, јер говори о синтакси и њеној правилној употреби у ЦСС3.
Бонус: Више стилова
Поред туторског кода, додао сам и додатне позадинске слике са прилагођеним колор шемама. Пробао сам из оригиналних позадина и користио Адобе Пхотосхоп да направим неколико варијација које можете применити на сопственом веб сајту.
Ове бонус датотеке су укључене у изворну датотеку које можете преузети у .зип формату у одељку испод.
Можете погледати горњу слику да бисте добили идеју о чему говорим. Ако вам је потребна посебна схема боја, отворите је Пхотосхоп> Слика> Подешавања> Хуе / Сатуратион да модификујете шему боја да одговара Вашем предлошку, не заборавите означите опцију Цолоризе у окну Хуе / Сатуратион, ако се боја уопште не промени.
Закључак
Овај водич би вас упознао са неким од новијих ЦСС3 техника. Направили смо два фантастична менија која су обликована на сличан начин и направила их тако да се могу деградирати у старијим претраживачима. Додатно сам понудио свој демо код и неке бонус слике са којима се можете играти.
Да ли вам се посебно свиђају стилови које смо овде направили? Или можда имате питања или идеје о томе како побољшати туториал код? Молимо вас да поделите своје мисли са нама у области за дискусију у наставку, и не заборавите да преузмете изворне датотеке тако да можете играти са демо верзијом!
Море ЦСС3 Туториалс
Жудња за више ЦСС3? У наставку су наши чланци за вас да разумете ЦСС3 теоретски и практично!
- ЦСС3: Креирајте лого РСС Феед
- ЦСС3: Креирајте поље за претрагу
- ЦСС3: Креирајте АЈАКС образац за контакт
- ЦСС3: Изградња ХТМЛ5 / ЦСС3 Веб страница
