Цей варіант нам сподобався, з безліч подібних кількома параметрами, але головний з них - легкість стилізації під будь-який браузер. Ми додали всього кілька своїх строк і на цьому експеременти залишили, бо до існуючої теми все одно цей варіант не підходив. Можливо, коли будемо робити світлу тему, ми повернемось до його повторного розгляду.
/* Стилізація меню "хлібних крошок" CSS */
[CSS]
.breadcrumbs {
display: inline-block;
border: 1px solid #999;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
background: -webkit-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
background: -moz-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
background: -ms-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
background: -o-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
background: linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
}
.breadcrumbs:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.breadcrumbs ul {
padding: 0;
margin: 0;
list-style: none;
}
.breadcrumbs ul li {
list-style: none;
float: left;
}
.breadcrumbs a:hover {
color:Tomato
}
.breadcrumbs ul li:first-child a, .breadcrumbs ul li:first-child span {
padding-left: 1em;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.breadcrumbs a, .breadcrumbs span {
color: #444;
display: block;
float: left;
position: relative;
line-height: 2em;
padding: 0 1em 0 1.5em;
text-decoration: none;
background: -webkit-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
background: -moz-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
background: -ms-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
background: -o-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
background: linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
}
.breadcrumbs a:after, .breadcrumbs span:after {
content: '';
display: block;
z-index: 1;
height: 2em;
width: 2em;
border-right: 2px solid #999;
border-top: 2px solid #999;
position: absolute;
right: 0;
top: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
background: -webkit-linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
background: -moz-linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
background: -ms-linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
background: -o-linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
background: linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
/* 1/sqrt(3) = 0.5774 */
-webkit-transform: translateX(1em) rotate(45deg) scale(0.5774) skew(15deg,15deg);
-moz-transform: translateX(1em) rotate(45deg) scale(0.5774) skew(15deg,15deg);
-ms-transform: translateX(1em) rotate(45deg) scale(0.5774) skew(15deg,15deg);
-o-transform: translateX(1em) rotate(45deg) scale(0.5774) skew(15deg,15deg);
transform: translateX(1em) rotate(45deg) scale(0.5774) skew(15deg,15deg);
}
.breadcrumbs .current {
color: #777;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.breadcrumbs .current:after {
content: normal;
}
Для вокористання стилю на сторінках необхидно додати класи в блок <nav class="breadcrumbs">
і останній елемент <span class="current">
, який відображає неактивний запис меню.
<!-- Стилізація меню "хлібних крошок" -->
[HTML]
<nav class="breadcrumbs">
<ul>
<li><a href="#">Головна</a></li>
<li><a href="#">Блог</a></li>
<li><em><a href="#">Нотатки</a></em></li>
<li><em><span class="current">Меню</span></em></li>
</ul>
</nav>
Результат: