Inpage-Navigation
CODE
×
HTML
<ul class='inpage-nav' data-accordion data-allow-all-closed='true'><li class="default inpage-nav-item is-active" data-accordion-item> <a href="#" class="inpage-nav-title">Inhaltsübersicht</a> <div class="inpage-nav-content" data-tab-content> <hr class="accordion"> <div class="inpage-nav"><a class="inpage-nav">Der Mut stellt sich die Wege kürzer vor</a></div> <div class="inpage-nav-active"><a class="inpage-nav-active">Dies ist eine Image Gallery</a></div> <div class="inpage-nav"><a class="inpage-nav">Text-Teaser 1- und 2-spaltig</a></div> <div class="inpage-nav"><a class="inpage-nav">Video-Integration</a></div> </div> </li></ul>
CSS
ul.inpage-nav { border: 1px solid rgba(222,222,222,1); background-color:transparent; margin-top: 0; margin-right: 0; margin-bottom: 30px; margin-left: 0; width: 100%; max-width: 400px; } @media screen and (max-width: 1119px) { ul.inpage-nav { display:none; } } ul.inpage-nav a.inpage-nav-title[aria-selected='true']::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); transition: all 250ms ease-in-out } ul.inpage-nav a.inpage-nav-title[aria-selected='false']::before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition: all 250ms ease-in-out }
JS
Inpage-Navigation
Letzte Änderung: 12.09.2024 - 11:06 Uhr
×
Inhaltsübersicht
Der Mut stellt sich die Wege kürzer vor
Dies ist eine Image Gallery
Text-Teaser 1- und 2-spaltig
Video-Integration