<div class="breadcrumbs">
<div class="container">
<ul class="items">
<li class="item home">
<a href="#" title="Zur Homepage">
Home </a>
</li>
<li class="item">
<a class="collapsed" href="https://codepen.io/lagudal" title="" >
Thermotransferdrucker </a>
</li>
<li class="item">
<a class="collapsed" href="https://codepen.io/lagudal" title="" >
Labelident </a>
</li>
<li class="item">
<a class="collapsed" href="https://codepen.io/lagudal" title="" >
Desktopdrucker </a>
</li>
<li class="item">
<strong class="collapsed" >Labelident LD BP730, 300 dpi Desktopdrucker, Modell mit Abreißkante (BP730)</strong>
</li>
</ul>
</div>
</div>
.breadcrumbs {
padding: 30px 0 0;
margin: 0 0 20px;
}
breadcrumbs .item {
margin: 0;
}
.breadcrumbs .items>li {
display: inline-block;
vertical-align: top;
}
.breadcrumbs .items {
font-size: 1.2rem;
color: #a3a3a3;
margin: 0;
padding: 0;
list-style: none none;
}
.breadcrumbs .item:not(:last-child) {
display: inline-block;
text-decoration: none;
}
.breadcrumbs .items .item {
height: 25px;
line-height: 22px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
position: relative;
padding: 0 8px 0 18px;
}
breadcrumbs .items .item:first-child {
padding-left: 10px;
border-left: 1px solid #ddd;
}
.breadcrumbs .items .item a {
display: block;
text-decoration: none;
color:#333;
max-width:40px;
height:105%;
overflow:hidden;
text-overflow:ellipsis;
transition:all ease-in-out .4s;
}
.breadcrumbs .items .item:after {
right: -8px;
}
.breadcrumbs .item:not(:last-child):after {
-webkit-font-smoothing: antialiased;
font-size: 24px;
line-height: 18px;
content: '\e608';
font-family: 'icons-blank-theme';
margin: 0;
vertical-align: top;
display: inline-block;
font-weight: normal;
overflow: hidden;
speak: none;
text-align: center;
}
.breadcrumbs .items .item:before, .breadcrumbs .items .item:after {
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
content: "";
display: inline-block;
height: 17px;
position: absolute;
top: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
width: 17px;
}
.breadcrumbs .items .item:last-child:before, .breadcrumbs .items .item:last-child:after {
border-color: #ddd !important;
}
.breadcrumbs .items .item:before {
left: -8px;
}
.breadcrumbs .items .item:hover, .breadcrumbs .items .item:hover {
border-color: rgb(102, 196, 229);
}
.breadcrumbs .items .item:last-child {
border-color: #ddd !important;
color: #444;
}
.breadcrumbs .items .item:last-child strong {
overflow: hidden;
max-width: 40px;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
height:105%;
transition:all ease-in-out .4s;
}
.breadcrumbs .items .item:hover::before, .breadcrumbs .items .item:hover::before, .breadcrumbs .items .item:hover::after, .breadcrumbs .items .item:hover::after {
border-color: rgb(102, 196, 229);
}
$(document).on('click', '.collapsed', function () {
event.preventDefault();
$(this).css( "max-width", "1000px" );
$(this).removeClass("collapsed");
$(this).addClass("expanded");
});
$(document).on('mouseout', '.expanded', function () {
$(this).css( "max-width", "40px" );
$(this).removeClass("expanded");
$(this).addClass("collapsed");
});
