Кодиране на Graceful Breadcrumb Navigation Menu в CSS3
Навигационните менюта и връзки вероятно са най-важните елементи на интерфейса за уеб оформление. Това са единствените възможности за потребителите пътуване между страници и взаимодейства с цялото съдържание, което сте създали. Breadcrumb предлага подобна функционалност с добавената полза проследяване на текущата ви позиция. Ще можеш покаже всички предишни пътища за връзка като потребителят преминава през йерархията на вашия сайт.
В този урок ще създадем блестящо меню за навигация с някои ефекти на CSS3. Това е тествано, за да работи във всички основни CSS3-съвместими браузъри, дори по-старите браузъри, които не поддържат CSS3, ще продължат да го правят правилно в повечето случаи.
Преди да се потопим в кода, ще поговорим малко за функционалността на нашата херикоптер, пълен урок на скок!
Предлагането на пътеката
Пътеката за следа не е по-сложна от всяко друго меню. Нашите стилове ще използват много по-сложни CSS свойства от повечето примери, но нашият шаблон с голи кости все още е на място, за да насочва потребителите от една страница към друга..
В този пример ще пресъздадем подобен стил като менюто за поддръжка на Google. Можете да видите тяхното меню на страницата за поддръжка на Gmail, за да получите представа къде отиваме. В крайна сметка искаме предоставяме на нашите потребители най-доброто потребителско изживяване, независимо от тяхната операционна система или софтуер на браузъра, така че съм построил 2 различни примера за код, които подкрепят грациозната деградация сред по-старите браузъри.
Първият е изграден с помощта на персонализирани фонови изображения и правилно подравняване на CSS. Всички събития и активни събития се създават с няколко CSS стила, но потребителите, които имат изключени изображения, няма да могат да изпитат тези ефекти! Ето защо създадох и подобно изглеждащо меню с CSS градиенти, заоблени ъгли и сенки за кутии.
Ако сте нервен за подкрепа на двата стила, можете да избирате между тях за вашия собствен сайт. Повечето посетители ще използват изображения по подразбиране, но ще копаят инструмента за анализ на уебсайта, ако искате по-точни данни за посетителите.
Достатъчно думи, нека скочи в проекта! Ще започнем с конструирането на основната HTML рамка и ще преминем към различни стилистични ефекти. Преди всичко трябва да изтеглите изображението необходими за проекта.
HTML с голи кости
Започвам документа си с стандартен HTML5 шаблон на страницата. Това включва по подразбиране doctype, свързан CSS и всички основни елементи. Аз добавих кода по-долу, ако искате да започнете свой собствен документ по този начин. Обърнете внимание, че това не трябва да влияе на начина, по който е показана вашата кръстосана следа, така че не се колебайте да използвате своя собствен шаблон на страница, ако желаете.
Страница по подразбиране
Ще разделя кода на два различни блока. Първият блок с изображения е изграден с малко по-различен начин, последван от нашето меню без изображения. Всеки комплект е даден сам документ за самоличност така че можем да идентифицираме съдържанието много по-лесно. Ако сте и фен на jQuery, можете да използвате #ID селектор за манипулиране на всички вътрешни DOM елементи.
Първо имаме a съдържащ div с идентификатора “галета“. В демонстрационния файл използвах това, за да отделя кода и да го премествам по страницата с добавени полета. Можете да премахнете този външен div, но ще трябва отново да оформите всичко, за да се побере в новия шаблон. Наистина не боли да оставите контейнер, тъй като ще можете да контролирате позиционирането много по-лесно.
Вътрешно съм построил трюмовете, като използвам неподреден списък. Има толкова много уникални начини да персонализирате стилизираните HTML списъци, а галериите са само един от тях. Може да забележите, че съм дал първоначалния елемент от списъка a клас на “първи“. Това е необходимо за някои допълнителни подложки, за да запазите елементите от менюто в линия. Освен това малка блок за обхват се добавя, така че имаме правилна лява граница, която не припокрива фоновото изображение.
Освен това всяка закрепваща връзка е засадена с намаляващ брой за Z-индекс Имот. Използвайки изображения, които ще трябва да направим всяка от нашите връзки се припокрива , за да се покаже правилно стрелката. Най-лесният начин да постигнете това е коригиране на z-индекса така че всяка връзка прелиства следващата. Започнах 9 и работи надолу от там, но ако имате повече връзки в менюто си просто започнете с по-високо цяло число.
Меню без изображения
Да се грациозно деградираме нашата паничка имаме нужда от вторичен набор от елементи от списъка с HTML. Ако се опитвате да направите резервно копие на една навигация, можете да използвате jQuery, за да откриете браузъра и да приложите съответно идентификатор. За съжаление това не винаги е надеждно (например за някои мобилни потребители). Друго решение е да включва специална таблица за стилове на IE и скриете или покажете каквото меню работи най-добре - но разбира се, тази опция е само за Internet Explorer.
breadcrumb2 е нашият нов идентификатор, използван за насочване към менюто без изображения. Поддържане на този модел, който съм използвал crumbs2 като клас за неподредения списък. Имайте предвид, че причината, която използваме класове е за неговата простота да дублира тези менюта, така че, когато искате няколко различни кръгови следи на вашата страница, с тези класове това никога няма да се превърне в проблем.
Запазихме .първи клас, но допълнително приложен .последноклас в крайния елемент от списъка. Без изображения не можем да дублираме стрелките за всеки елемент от навигационното меню, така че съм използвал някои заоблени ъгли да подправите второто меню. .първи клас и .последно манипулирайте радиуса на границата в самите ръбове на нашето меню, за да създадете наистина страхотен уеб 2.0 стил.
CSS плъзгащи се фонови изображения
За някои от по-простите ефекти съм съчетал двете галета заедно при изграждането на имоти. Това е полезно, тъй като не само спестява място, но когато се връща към стиловете за редактиране, това е по-лесно да се персонализира свой собствен поглед.
За двете #breadcrumb и # breadcrumb2 Зададох стил в списъка: няма; така че всички вътрешни елементи няма да имат маркери. Можете да оставите тези, ако ви харесва ефектът, но открих, че HTML става изморителна, за да се справя и е много по-лесно да създавате нови икони. Така че нека започнем с нашето .трохи клас.
.трохи дисплей: блок; .crumbs li дисплей: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: връзка, .crumbs li a: visited color: # 666; дисплей: блок; поплавък: наляво; размер на шрифта: 12px; margin-left: -13px; подложка: 7px 17px 11px 25px; позиция: относителна; текст-декорация: няма; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); фон-повторение: не се повтаря; фонова позиция: 100% 0; позиция: относителна; .crumbs li a: hover color: # 333; фонова позиция: 100% -48px; курсор: указател; .crumbs li a: active цвят: # 333; фонова позиция: 100% -96px; .crumbs li.first a span height: 29px; ширина: 3px; граница наляво: 1px твърдо # d9d9d9; позиция: абсолютна; отгоре: 0px; наляво: 0px; ние настройте нашия неуправен списък блок така че нищо друго не се промъква из района. Забележете, че елементите от списъка са показва се вградено докато на всяка връзка на котва се дава много повече място за разпръскване. Искаме цялото пространство в нашето меню да може да се кликне, така че това изисква изграждане на нашите котви като блокови елементи.
Използвал съм изображение, наречено BG-crumbs.png за фон. Това е известно като прост лист спрайт в CSS, или алтернативно a плъзгащи се врати техника. Това означава, че когато потребителят завие или кликне върху дадена връзка, ние преместваме фоновата позиция, за да покаже актуализирания стил. Това единично изображение съдържа всичките три дизайна, от които се нуждаем, за да създадем тласъци на различни позиции, така че можем да използваме фон-позиция собственост за преместване въз основа на взаимодействие с потребителя.
Персонализирани ефекти с CSS3
Оригиналният дизайн е много по-прост за създаване. Това е забележимо, тъй като много от свойствата на CSS са по-основни, отколкото бихте си представили, но сега започваме да се фокусираме върху дублирането на тези ефекти само с CSS3!
Отделните стилове заемат много място, така че ще ги разделя на 2 блокови кода.
.трохи2 (дисплей: блок); margin-left: 27px; пълнеж: 0; пълнеж: 10px; .crumbs2 li дисплей: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: посетен color: # 666; дисплей: блок; поплавък: наляво; размер на шрифта: 12px; подложка: 7px 16px 7px 19px; позиция: относителна; текст-декорация: няма; граница: 1px твърд # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-gradient (линейно, ляво дъно, ляво отгоре, цветен стоп (0.45, rgb (241,241,241)), цветно спиране (0.73, rgb (245,245,245))); background-image: -moz-linear-gradient (център дъно, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * За Internet Explorer 5.5 - 7 * / филтър: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * За Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-радиус: 5px; .crumbs2 li.last a border-right-width: 1px; радиус: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
Най- .crumbs2 менюто CSS градиенти дублиране на фоновите ефекти. Ако не сте запознати с тях, аз силно препоръчвам CSS Tricks 'наръчник за CSS3 Gradients, който трябва да ви помогне да използвате CSS3 градиентите ефективно. Те са включили още няколко свойства за браузърите на Microsoft и Opera, но те не се поддържат напълно във всички случаи. Тук не съм ги включил в демо кода - но е добре да се разберат всички опции.
-WebKit-градиент и -Moz-линеен градиент са основните решения, които извършват по-голямата част от работата. Включих стария код за по-стари версии на Internet Explorer, но това не е гарантирано да се показва правилно през цялото време (в края на краищата използваме мощни техники за визуализиране на изображения). Забележете, че съм задал както RGB, така и шестнадесетични цветни кодове между свойствата на фона. Можете да се придържате към един или друг метод, ако сте по-удобен.
Най- радиус Кодът се прилага само към нашата вторична навигация за следене. Това дава чист ефект в горния ляв и долния десен ъгъл на цялото меню. Барът почти изскача от страницата - наистина фантастичен ефект върху браузърите, които поддържат стиловете, но те покриват само състоянията по подразбиране за нашите връзки. Сега нека създадем ефекти с навъртане, подобни на тези, които използвахме по-горе.
CSS3 Граници и сенки
Всеки път, когато даден потребител надвишава връзка, ние искаме да актуализираме няколко неща. Първо трябва да Затъмнете цветовете на границата отгоре и отдолу на активния ни елемент. Това може да се види и в изображенията, както за навигирането, така и за активните състояния.
.трохи 2 li a: hover border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (линейно, ляво дъно, ляво отгоре, цветен стоп (0.45, rgb (241,241,241)), цветно-стоп (0.73, rgb (248,248,248))); background-image: -moz-linear-gradient (център дъно, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * За Internet Explorer 5.5 - 7 * / филтър: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * За Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; цвят: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: активен border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (линейно, ляво дъно, ляво отгоре, цветен стоп (0.45, rgb (224,224,224)), цветно-стоп (0.73, rgb (235,235,235))); background-image: -moz-linear-gradient (център дъно, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * За Internet Explorer 5.5 - 7 * / филтър: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * За Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; кутия-сянка: -1px 1px 1px 0px #dadada вмъкнати; -webkit-box-shadow: -1px 1px 1px 0px #dadada; -moz-box-shadow: -1px 1px 1px 0px #dadada; цвят: # 333;
Използвам точно същия код на градиента, който използвахме по-горе, но този път цветовете са много различни, ако забележите нашите RGB стойности. Всяка от държавите ще затъмни цвета на текста до # 333, други дескриптори са леко променени, за да съответстват на потребителските команди.
На мишката ще видите a лъскав релефен ефект което е съчетано с затъмнени граници дава изскачащи стилове на страницата. Ако щракнете и задържите, ще влезете в активното състояние, което съдържа a затъмнен градиент на фона. Този ефект кара бутоните да изглеждат всъщност “пресована” в страницата.
Ние също кандидатстваме кутия сянка свойства от новите спецификации на CSS3. -WebKit, -Моз, и стилове по подразбиране се използват със същите настройки. Показва се a светла сянка излизащи от дъното на избраната връзка. Когато е активна, сянката ще се формира в горната, дясната и долната граница. Този ефект се създава с добавям ключова дума, добавена в края на всяка линия на свойствата на кутията-сянка. Отново CSS Tricks е най-добрият ти приятел тук със страхотна статия за box-shadow, тъй като говори за синтаксиса и правилното му използване в CSS3.
Бонус: Още стилове
В допълнение към учебния код включих и допълнителни фонови изображения с адаптирани цветови схеми. Изпробвах от оригиналните фонове и използвах Adobe Photoshop, за да създам няколко варианта, които можете да приложите в собствения си уебсайт.
тези бонус файловете са включени в изходния файл които можете да изтеглите в .zip архивен формат в раздела по-долу.
Можете да видите изображението по-горе, за да получите представа за това, за което говоря. Ако имате нужда от специфична цветова схема, отворете Photoshop> Изображение> Корекции> Hue / Saturation за да промените схемата на цветовете, за да съответства на собствения ви шаблон, не забравяйте маркирайте опцията Оцветяване в прозореца Hue / Saturation (Цвят / Насищане), ако цветът изобщо не се промени.
заключение
Този урок трябваше да ви запознае с някои от по-новите техники на CSS3. Създадохме два фантастични менюта, оформени по подобен начин и го изградихме по начин, който може да се разгради грациозно в по-старите браузъри. Освен това предлагам демо-код и някои бонус изображения, с които да играете.
Харесвате ли особено стиловете, които създадохме тук? Или може би имате въпроси или идеи за това как да подобрите учебния код? Моля, споделете мислите си с нас в дискусионната зона по-долу и не забравяйте да изтеглите изходните файлове, за да можете да играете с демото!
Още уроци за CSS3
Желание за повече CSS3? По-долу са нашите статии, за да разберете CSS3 теоретично и практически!
- CSS3: Създаване на лого на RSS емисия
- CSS3: Създаване на поле за търсене
- CSS3: Създаване на формуляр за връзка с AJAX
- CSS3: Изграждане на HTML5 / CSS3 уеб страници
