Application Navigation
CODE
×
HTML
<ul class='accordion an v2 level-1' data-accordion data-allow-all-closed='true'> <li class='an-item-1' data-accordion-item> <a class='an-title with-subs' href="#Mein-Profil"><span>Mein Profil</span></a> <div class='accordion-content an' data-tab-content><ul class='accordion an level-2' data-accordion data-allow-all-closed='true'> <li> <a id="Zugangsdaten" class="an-title without-subs not_prevent" href="#Zugangsdaten"><span>Zugangsdaten</span></a> </li> <li> <a id="Account-loeschen" class="an-title without-subs not_prevent" href="#Account-loeschen"><span>Account löschen</span></a> </li> </ul></div> </li> <li class='an-item-2' data-accordion-item> <a class='an-title with-subs' href="#Mein-Postfach"><span>Mein Postfach</span></a> <div class='accordion-content an' data-tab-content><ul class='accordion an level-2' data-accordion data-allow-all-closed='true'> <li> <a id="Posteingang" class="an-title not_prevent without-subs" href="#Posteingang"><span>Posteingang</span></a> </li> <li> <a id="Gesendet" class="an-title not_prevent without-subs" href="#Gesendet"><span>Gesendet</span></a> </li> <li> <a id="Geloescht" class="an-title not_prevent without-subs" href="#Geloescht"><span>Gelöscht</span></a> </li> <li data-accordion-item> <a href="#Einstellungen" class='an-title with-subs'><span>Einstellungen</span></a> <div class='accordion-content an' data-tab-content> <ul class='accordion an level-3' data-accordion data-allow-all-closed='true'> <li><a id="Benutzerkonto" class="an-title not_prevent without-subs" href="#Benutzerkonto"><span>Benutzerkonto</span></a></li> <li><a id="Anmelde-Daten" class="an-title not_prevent without-subs" href="#Anmelde-Daten"><span>Anmelde-Daten</span></a></li> <li><a id="Benachrichtigungen" class="an-title not_prevent without-subs" href="#Benachrichtigungen"><span>Benachrichtigungen</span></a></li> </div> </li> </ul></div> </li> <li class='an-item-3'> <a class='an-title without-subs not_prevent' href="#Abmelden" id="Abmelden"><span>Abmelden</span></a> </li> </ul>
CSS
@media screen and (max-width: 1119px) { ul.accordion.an.v2.level-1 { margin-top: 45px; margin-right: 30px; margin-bottom: 45px; margin-left: 30px !important; } } @media screen and (max-width: 767px) { ul.accordion.an.v2.level-1 { margin-top: 45px; margin-right: 20px; margin-bottom: 45px; margin-left: 20px !important; width: calc(100% - 40px); max-width: calc(100% - 40px); min-width: calc(100% - 40px); } } ul.accordion.an.v2 { background-color: transparent; border-color: transparent; } ul.accordion.an.v2 a.an-title { background-color: #FAF1E3; /* Sand */ } ul.accordion.an.v2 *:focus-visible { outline: none; border-left: 1px solid #1775D3; border-top: 1px solid #1775D3 !important; border-right: 1px solid #1775D3 !important; border-bottom: 1px solid #1775D3 !important; } ul.accordion.an.v2 a.an-title.with-subs[aria-selected='true']::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); transition: all 250ms ease-in-out } ul.accordion.an.v2 ul.accordion.an.level-2 a { font-size: 18px; line-height: 26px; height: 52px; position: relative; display: block; text-decoration: none; color: rgba(0,0,0,1); letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 300; padding-top: 13px; padding-right: 65px; padding-bottom: 13px; padding-left: 25px; width: 100%; max-width: 100%; min-width: 100%; } ul.accordion.an.v2 ul.accordion.an.level-3 a { font-size: 16px; line-height: 26px; height: 45px; position: relative; display: block; text-decoration: none; color: rgba(0,0,0,1); letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 300; padding-top: 9px; padding-right: 65px; padding-bottom: 9px; padding-left: 45px; width: 100%; max-width: 100%; min-width: 100%; } ul.accordion.an.v2 ul.accordion.an.level-2 a.an-title.with-subs::before { top: 20px; } ul.accordion.an.v2 a.an-title:hover > span, ul.accordion.an.v2 a.an-title:focus > span { border-bottom: 1px solid #000; } ul.accordion.an.v2 a.an-title[aria-selected='true'] { background-color: #FCF8F3; /* Light Sand */ font-weight: 400; } ul.accordion.an.v2 a.an-title[aria-selected='true']:hover > span, ul.accordion.an.v2 a.an-title[aria-selected='true']:focus > span { border-bottom: 1px solid #000; } ul.accordion.an.v2 a.an-title.without-subs:target { background-color: #FFFFFF !important; /* white */ border-left-color: #EA161F; border-left-width: 6px; border-left-style: solid; padding-left: 19px !important; font-weight: 500 !important; border-right: 1px solid #F7E9D2; } ul.accordion.an.level-1 > li:first-of-type: > a.an-title.without-subs:target { border-top: 1px solid #EBD3AE; border-right: 1px solid #EBD3AE; } ul.accordion.an.level-1 > li:last-of-type > a.an-title.without-subs:target { border-bottom: 1px solid #EBD3AE; border-right: 1px solid #EBD3AE; } ul.accordion.an.v2.level-1 > li:last-of-type > a.an-title.without-subs:target { border-right: 1px solid #EBD3AE; border-bottom: 1px solid #EBD3AE; } ul.accordion.an.v2 ul.accordion.an.level-3 a.an-title.without-subs:target { padding-left: 39px !important; } ul.accordion.an.v2 a.an-title.without-subs:target > span, ul.accordion.an.v2 a.an-title.without-subs:target:hover > span, ul.accordion.an.v2 a.an-title.without-subs:target:focus > span { border-bottom: none !important; } ul.accordion.an.v2 a.an-title.without-subs:active { font-weight: 500 !important; } ul.accordion.an.v2 div.accordion-content.an, ul.accordion.an.v2 ul.accordion.an { margin: 0; background-color: #FCF8F3; /* Light Sand */ } ul.accordion.an.v2 ul.accordion.an div.accordion-content.an, ul.accordion.an.v2 ul.accordion.an ul.accordion.an { margin: 0; background-color: #FCF8F3; /* Light Sand */ border: none; } ul.accordion.an.v2 ul.accordion.an a.an-title { background-color: #FCF8F3; /* Light Sand */ } ul.accordion.an.v2 ul.accordion.an a.an-title:hover span, ul.accordion.an.v2 ul.accordion.an a.an-title:focus span { border-bottom: 1px solid #000; } ul.accordion.an.v2 ul.accordion.an.level-2 > li:last-of-type { padding-bottom: 6px; } ul.accordion.an.v2 ul.accordion.an.level-3 > li:last-of-type { padding-bottom: 4px; } ul.accordion { margin-bottom: 36px; margin-top: 36px; margin-left: 0px !important; margin-right: 0; max-width: 800px; background-color:transparent; } ul.accordion a.acc-title:hover::before { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } ul.accordion a.acc-title[aria-selected='true']::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out } ul.accordion a.acc-title[aria-selected='true']:hover { background-color: rgba(242,224,195,1) !important; } ul.accordion a.acc-title[aria-selected='true']:hover::before { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } a.an-title.with-subs { position:relative; display:block; text-decoration:none; color: var(--black); letter-spacing: 0.01rem; word-spacing: 0.025rem; font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; padding-top: 21px; padding-right: 65px; padding-bottom: 21px; padding-left: 25px; width: 330px; max-width: 330px; min-width: 330px; height: 68px; } div.accordion-content.an { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; width: 330px; max-width: 330px; min-width: 330px; } a.an-title.without-subs.not_prevent { position:relative; display:block; text-decoration:none; color: var(--black); letter-spacing: 0.01rem; word-spacing: 0.025rem; font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; padding-top: 21px; padding-right: 65px; padding-bottom: 21px; padding-left: 25px; width: 330px; max-width: 330px; min-width: 330px; height: 68px; } a.an-title.with-subs:before { background-image: url('data:image/svg+xml;utf8,
'); content: ' '; position: absolute; width: 18px; height: 12px; right: 25px; top: 28px; background-size: 18px 12px; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } @media screen and (max-width: 767px) { a.an-title.with-subs { width: 100%; max-width: 100%; min-width: 100%; } div.accordion-content.an { width: 100%; max-width: 100%; min-width: 100%; } a.an-title.without-subs.not_prevent { width: 100%; max-width: 100%; min-width: 100%; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); } div.accordion-content { display:none; border:none; background-color: rgba(250,241,227,1); padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 65px; max-width: 800px; padding-right: 25px; padding-bottom: 25px; }
JS
Application Navigation
Erstellt: 18.09.2024 - 16:04 Uhr
Letzte Änderung: 22.09.2024 - 16:04 Uhr
×
Mein Profil
Zugangsdaten
Account löschen
Mein Postfach
Posteingang
Gesendet
Gelöscht
Einstellungen
Benutzerkonto
Anmelde-Daten
Benachrichtigungen
Abmelden