Service-Navigation BE-Login
CODE
×
HTML
<div class='service-nav be-login' role='list'> <a class='service-menue red' href='#' role='listitem'>Leichte Sprache</a> <a class='service-menue i1' href='#' role='listitem'>Kontakt</a> <a class='service-menue i3' href='#' role='listitem'>Startseite Kanton Bern</a> <a class='service-menue i2' href='#' role='listitem'>Jobs</a> <a class='service-menue login' href='#' role='listitem'>BE-Login</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
@media screen and (max-width: 1119px) { div.service-nav.be-login { display:none; } } div.service-nav { position:absolute; right:0; } @media screen and (max-width: 1119px) { div.service-nav { display:none; } } a.service-menue { font-size: 14px; line-height: 16px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: rgba(0,0,0,1); display:inline-block; text-decoration:none !important; height: 18px; line-height: 1.5; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.service-menue:hover::after, a.service-menue:focus::after, a.service-menue:active::after { transform: scaleX(1); } 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.red { color: var(--red); } 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; } 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
Service-Navigation BE-Login
Erstellt: 11.09.2024 - 10:55 Uhr
Letzte Änderung: 25.09.2024 - 15:33 Uhr
×
Leichte Sprache
Kontakt
Startseite Kanton Bern
Jobs
BE-Login
DE
|
FR
|
EN