Service-Menue Logged-In (in DLN)
CODE
×
HTML
<div class='dln user-account'><span>Max Mustermann</span> <i class="login-dropdown-dln"> <a class="menue-item-dd v1" href="#"><span>Mein Profil</span></a> <a class="menue-item-dd v2" href="#"><span>Mein Postfach (3)</span></a> <a class="menue-item-dd v3" href="#"><span>Abmelden</span></a> </i></div>
CSS
div.dln.user-account { position:relative; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); display:inline-block; border:none; 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); } div.dln.user-account:before { background-image: url('../img/logout.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } div.dln.user-account { display: table; position: relative; margin-bottom: 0; margin-right: -25px; margin-left: -25px; width: calc(100% + 50px); padding: 15px 25px 18px 48px; margin-top: -15px; cursor: pointer; } div.dln.user-account::before { width: 21px; height: 19px; content: " "; position: absolute; left: 24px; background-size: 21px 19px; background-repeat: no-repeat; } div.dln.user-account > span { border-bottom: 2px solid rgba(234,22,31,1); } div.dln.user-account:hover > span, div.dln.user-account:focus > span { border-bottom: 2px solid #000; } div.dln.user-account.open { background-color: #FCF8F3; font-weight: 500; padding-bottom: 5px; } .login-dropdown-dln { background-color: #FCF8F3; display: none; } .login-dropdown-dln.open { background-color: #FCF8F3; display: block; width: 100%; margin: 0; padding-top: 15px; } .login-dropdown-dln.open > a { 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); width: 100%; min-width: auto; margin: 0; padding: 15px 0; height: fit-content; } .login-dropdown-dln.open > a::before { width: 9px; height: 15px; right: 16px; top: 16px; } .login-dropdown-dln.open > a:hover::before, .login-dropdown-dln.open > a:focus::before{ right: 8px; }
JS
Service-Menue Logged-In (in DLN)
Erstellt: 26.11.2024 - 15:39 Uhr
Letzte Änderung: 27.11.2024 - 12:11 Uhr
×
Max Mustermann
Mein Profil
Mein Postfach (3)
Abmelden