Создание красивого Breadcrumbs для сайта Joomla
- Подробности
- Категория: Для сайта
- Опубликовано 11.08.2012 16:06
Как сделать красивые "Хлебные крошки" на CSS 3 для вашего сайта?
Данный способ можно применять абсолютно к любой CMS, без исключения. Единственным ньюансом может сказаться нессответствие тэгов, в которые заключены пункты "крошек", но это легко поправляется.
В самом итоге у вас должно получиться такой путь на сайте:
1. Посмотрите название основного класса хлебных крошек на сайте (По умолчанию это класс breadcrumbs ( Просмотреть можно с помощью опции в браузере "Исходный код страницы") .
2. Подключите к классу Breadcrumbs CSS следующего содержания:
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
Ну вот путь на сайте у вас готов, если возникли какие то трудности пишите в комментариях.