Breadcrumb
CODE
×
HTML
<div class='breadcrumb clearfix' role='list'> <a class='bc-home' href='#' role='listitem'></a> <div class='bc-arrow'></div> <a class='bc-link' href='#' role='listitem'>erste Hierarchie</a> <div class='bc-arrow'></div> <a class='bc-link' href='#' role='listitem'>zweite Hierarchie</a> <div class='bc-arrow'></div> <a class='bc-link' href='#' role='listitem'>dritte Hierarchie</a> <div class='bc-arrow'></div> <div class='bc-link-active'>aufgerufene Seite</div> </div>
CSS
@media screen and (max-width: 1119px) { div.breadcrumb.clearfix { margin-right: 30px; margin-left: 30px; width: calc(100% - 60px); max-width: 979px; } } @media screen and (max-width: 767px) { div.breadcrumb.clearfix { display:none; margin-right: 20px; margin-left: 20px; width: calc(100% - 40px); } } div.clearfix:before { display:table-cell; } div.clearfix:after { position:-webkit-sticky;position:sticky; } .context-column + .clearfix { height: 15px; width: 100%; display: inline-block; } a.bc-home { background-image: url('../img/home-button.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; float:left; margin-top: -3px; margin-right: 12px; width: 20px; height: 20px; } div.bc-arrow { background-image: url('../img/arrow-right_.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; float:left; margin-top: 2px; margin-right: 10px; width: 15px; height: 12px; } div.bc-link-active { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; float:left; display:inline-block; border-bottom: 1px solid rgba(255,255,255,1); text-decoration:none; margin-right: 12px; color: rgba(112,112,112,0.68); } a.bc-home:hover, a.bc-home:focus { background-image: url('../img/home-button_.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.bc-link { font-size: 14px; line-height: 18px; letter-spacing: 0.02rem; word-spacing: 0.05rem; float:left; display:inline-block; border-bottom: 1px solid rgba(255,255,255,1); margin-right: 12px; color: var(--black); } a.bc-link:hover, a.bc-link:focus { border-bottom: 1px solid rgba(0,0,0,1); } a.bc-link { text-decoration: none !important; }
JS
Breadcrumb
Letzte Änderung: 12.09.2024 - 13:07 Uhr
×
erste Hierarchie
zweite Hierarchie
dritte Hierarchie
aufgerufene Seite