Main-Menue (Detailpages)
CODE
×
HTML
<div class='main-nav' role="list"> <a class='main-menue i1' href='#' role='listitem'>E-Services und Dienstleistungen</a> <a class='main-menue i2' href='#' role='listitem'>Themen</a> <a class='main-menue i3' href='#' role='listitem'>Über uns</a> <a class='search-icon-mm' href='#' role='listitem'></a> </div>
CSS
@media screen and (max-width: 1119px) { div.main-nav { display:none; } } a.main-menue:hover::after, a.main-menue:focus::after, a.main-menue:active::after { transform: scaleX(1); } a.main-menue { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; color: rgba(0,0,0,1); letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none !important; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; transform: scaleX(0); transition: all 150ms ease-in-out; } a.search-icon-mm { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: center 22px; background-repeat: no-repeat; background-size: 40px 40px; width: 83px; height: 82px; margin-top: -10px; display:inline-block; vertical-align:middle; } a.search-icon-mm:hover, a.search-icon-mm:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.main-menue.i1:after { display: block; content: ''; border: 1px solid #EA161F; border-radius: 3px; height: 2px; background-color: #EA161F; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.main-menue { font-size: 24px; line-height: 28px; color: var(--black); letter-spacing: 0.01rem; word-spacing: 0.025rem; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a.main-menue { text-decoration: none !important; }
JS
Main-Menue (Detailpages)
Letzte Änderung: 12.09.2024 - 18:29 Uhr
×
E-Services und Dienstleistungen
Themen
Über uns