OffCanvas Service-Navigation
CODE
×
HTML
<div class='offcanvas-service-navi'> <a class='service-menue user-account'>Max Mustermann</a> <a class='service-menue i1' href='#' role='listitem'>Kontakt</a> <a class='service-menue i3' href='#' role='listitem'>Startseite Kanton Bern</a> <div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div> </div>
CSS
div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } a.service-menue.user-account { position:relative; } div.offcanvas-service-navi > a.service-menue.user-account { display: table; position: relative; margin-bottom: 30px; margin-right: 0px; margin-left: 22px; } div.offcanvas-service-navi > a.service-menue.i1 { display: table; margin-bottom: 30px; margin-right: 0px; margin-left: 0px; } div.offcanvas-service-navi > a.service-menue.i3 { display: table; margin-bottom: 30px; margin-right: 0px; margin-left: 0px; } div.offcanvas-service-navi > div.language-selector { display: block; margin-top: 74px; margin-bottom: 0px; margin-right: 0px; margin-left: -7px; } a.service-menue.user-account:before { background-image: url('../img/logout.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 21px; height: 19px; content: " "; position: absolute; left: -24px; top: -1px; background-size: 21px 19px; background-repeat: no-repeat; } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } @media screen and (max-width: 767px) { div.offcanvas-service-navi > div.language-selector { margin-left: -14px; } } a.service-menue.user-account { margin-left: calc(0.25vw + 34px); height: 20px; border-bottom: 2px solid rgba(234,22,31,0.77); } a.service-menue.user-account::after { border-color: transparent; } a.service-menue.user-account:hover, a.service-menue.user-account:focus { border-bottom: 2px solid #000; } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
OffCanvas Service-Navigation
×
Max Mustermann
Kontakt
Startseite Kanton Bern
DE
|
FR
|
EN