Breadcrumbs css3. Breadcrumb дизайн, базиран на CSS3. Добавяне на нови елементи

Предишната статия, „Навигация в галета с триъгълници в CSS“, описва начин за създаване на меню с помощта на чист CSS, без използване на графики.

Методът е добър за всички, с изключение на едно нещо - поддръжката на такова меню в по-старите браузъри е под въпрос. Но при превода на тази статия беше спомената връзка към начин за създаване на навигация с помощта на графики.

Статията е написана доста отдавна, но методът е абсолютно работещ. Авторът на статията е Veerle Pieters, а самата публикация се нарича „Simple scalable CSS based breadcrumbs“. По-долу давам дори не свободен превод, а свободен преразказ.

Преди няколко дни ми беше възложено да създам навигационно меню в стил „галета“ за уебсайт, върху който работех. Не мисля, че такова меню е необходимо за всеки уебсайт, но в някои случаи е много полезно и практично.

Този пример обаче е като основа, която може да се разшири и приложи на практика. Менюто ще бъде създадено с помощта на обикновен списък с водещи символи

1 ул
.

Но първо нека да разгледаме примера, с който ще работим:

Менюто е доста просто, както и кодът, с който ще го създадем.

HTML код - списък с водещи символи ул

Всички елементи от менюто имат връзки, с изключение на последния - „Страницата, на която се намирате в момента“ (Страницата, на която се намирате в момента). Когато работех по менюто, се чудех - списък ли е най-подходящата структура за създаване на меню? Вярвам, че използването на списък в този случай не е строго правило, но ми се струва, че това е най-семантичният и правилен вариант.

CSS код - създаване на стилове за менюто

Задаваме общи стилове за менюто - премахване на маркери и нулиране на отстъпи в браузъри Firefox, IE:

Правим ги плаващи през свойство, равно на височината на цялото меню - . И задайте цвета на текста. След това поставяме фоново изображение, изрязано от оформлението за връзката. За да направите това, трябва само да изрежете самата „стрела“:

... който „избутваме“ надясно (100%) и поставяме точно вертикално (50%). Също така правим отстъп на връзката вдясно

1 padding-left: 15px
, който ще съдържа фоновото изображение (изрязана стрелка): .crumbs li a ( display : block ; padding : 0 15px 0 0 ; background : url(img/crumbs.gif) 100% 50% no-repeat ; )

Почти всичко вече е направено. Остава само да зададете стилове за текста на връзката. Нека премахнем стандартното подчертаване и променим цвета му:

.crumbs li a :link , .crumbs li a :visited ( text-decoration : none ; color : #777 ; )
1 :задръжте
И
1 :фокус
. При задържане на курсора на мишката или получаване на фокус от клавиатурата, цветът на текста на връзката ще се промени: .crumbs li a :hover , .crumbs li a :focus ( цвят : #dd2c0d ; )

Резултатът от нашата работа е представен тук:

Бележка на преводача:

Авторът на статията е опростил максимално примера и самия код, доколкото разбирам. Факт е, че примерът ясно показва линеен хоризонтален градиент за всеки елемент от менюто. Това обаче не беше отразено по никакъв начин в кода. Е, няма проблем - наистина ли е проблем да се създаде линеен градиент в CSS3? Самата задача е изпълнена!

Списъците са удобни поради своята йерархична структура и гъвкави настройки на изгледа, така че се използват не само по предназначение, но и за създаване на различни елементи на страници като навигационни пътеки, номериране на страници, менюта, раздели и др.

галета

Навигационните пътеки ви помагат да навигирате в сайта и показват позицията на текущата страница спрямо други раздели на сайта. Това улеснява преминаването на ниво нагоре и разбирането в кой раздел се намирате в момента. И така, за технически сайт навигацията може да бъде както следва (фиг. 1).

Ориз. 1. Вид галета

Последният текст сочи към текущата страница и не е връзка. Всички елементи са разделени един от друг с някакъв символ, обикновено стрелка (→), наклонена черта (/), знак за по-голямо от (>) и други подобни.

Тъй като дизайнът е поверен на стилове, HTML кодът е много лаконичен. Създаваме списък и му присвояваме класа breadcrumbs, така че стилът да не се разпростира върху други списъци.

  • У дома
  • Трансфери
  • Скоростни кутии
  • Червячна скоростна кутия

Обърнете внимание, че тук няма разделители; те се показват чрез свойството стил на съдържание (пример 1).

Пример 1: Създаване на Breadcrumbs

галета

  • У дома
  • Трансфери
  • Скоростни кутии
  • Червячна скоростна кутия

Като начало нулираме всички полета и подложки на списъка и подреждаме елементите хоризонтално, като използваме свойството display със стойността inline-block. Той също така премахва маркери, така че няма нужда да правите това нарочно. Псевдоелементът ::before е необходим за добавяне на разделител между елементите и контрол на външния му вид. Текстът се добавя към всички точки, включително към първата, която, разбира се, не ни е необходима. Затова го премахваме с помощта на псевдокласа :first-child, който прилага стила към първия елемент

  • .

    Голямо количество материали, като например статии в сайта, често се разделят на отделни страници по 10-15 статии на страница, което води до намаляване на натоварването на сайта. Преминаването между отделните страници става чрез тяхното номериране, като всеки номер служи като връзка към съответната страница. Възможно е да се показват всички страници, определен брой от тях или само връзки към следващата и предишната страница. Коя опция да изберете зависи от дизайна на сайта и вашите предпочитания. Един от възможните методи за номериране е показан на фиг. 2.

    Ориз. 2. Номериране на страници

    За да направим това номериране, ние отново използваме прост списък, сега с пейджър клас, всеки елемент в този списък ще бъде връзка към страницата. За да маркирате текущата страница, добавете активния клас (пример 2).

    Пример 2: Номериране на страници

    Пагинация

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Линията между точките се прави чрез свойството border-bottom за елемента