Создание красивого Breadcrumbs для сайта Joomla

Как сделать красивые "Хлебные крошки" на CSS 3 для вашего сайта?

Данный способ можно применять абсолютно к любой CMS, без исключения. Единственным ньюансом может сказаться нессответствие тэгов, в которые заключены пункты "крошек", но это легко поправляется.

В самом итоге у вас должно получиться такой путь на сайте:

breadcrumbs

1. Посмотрите название основного класса хлебных крошек на сайте (По умолчанию это класс breadcrumbs ( Просмотреть можно с помощью опции в браузере "Исходный код страницы") .

2. Подключите к классу Breadcrumbs CSS следующего содержания:

.breadcrumbs{
margin-top:3px !important;
padding-left:3px;
overflow: hidden;
width: 100%;
}

.breadcrumbs span{
/*float: left;
margin: 0px 0px;*/
}


.breadcrumbs{color:#FFF;Text-align:left;Line-height:26px;}
.breadcrumbs .pathway{color:#FFF;}


.breadcrumbs a, .breadcrumbs span{
background: #555;
margin: 0px 10px 0px 5px;
padding: 0px 5px 0px 5px;
float: left;
text-decoration: none;
color: #FFF;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
position: relative;
}

.breadcrumbs a:hover{
background: #333;
}

.breadcrumbs a::before, .breadcrumbs span::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #555 #555 #555 transparent;
left: -1em;
}

.breadcrumbs a:hover::before{
border-color: #333 #333 #333 transparent;
}

.breadcrumbs a::after, .breadcrumbs span:after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #555;
right: -1em;
}

.breadcrumbs a:hover::after{
border-left-color: #333;
}
.breadcrumbs .current,
.breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}

.breadcrumbs .current::after,
.breadcrumbs .current::before{
content: normal;
}
.breadcr {position:absolute; right: 50%; top:0px; width: 850px; margin-right: -335px; height:40px;}

 Как видно из кода, идентифицируется отдельный пункт "Крошек" тегом <span>. В зависимости от вашей CMS, это может быть <li> или даже <div>. Просто замените <span> на соответствубщее вашиму коду тэг, в который заключён каждый пункт. Если у вас вышло криво отображение "Крошек" на сайте, рекомендуется вложить HTML Хлебных крошек в слой div, к которому прописать класс breadcr. Это происходит из-за родительских предустановок css к определённым модулям и классам. Для того чтобы посмотреть применяемые к чему-либо стили, в браузере Хром, например достаточно кликнуть по объекту правой кнопкой мыши и выбрать "Просмотр кода элемента", после чего внизу откроется окно в котором можно будет просмотреть практически любую информацию об использовании стилей, картинок, подключении скриптов.

Вы так же можете не редактировать ваши файлы стилей, а просто скачать и подключить к странице этот файл стилей:

http://youon.ru/files/menu/bread.css

Ну вот путь на сайте у вас готов, если возникли какие то трудности пишите в комментариях.


Добавить комментарий


Защитный код
Обновить

Карта сайта