725 #permalink Navigation

Standard-Seitennavigation für Phoenix Applikationen auf Grundlage dieses Design Systems. Sie fährt, bei Klick auf einen Toggle, von links oder rechts rein.

Möchte man die Navigation von links hineinfahren lassen, muss zusätzlich der Modifier .side-nav--lefted gesetzt werden.

Die Seitenleiste wurde zu Demozwecken static statt fixed positioniert. Der äußere Container ist ebenfalls nur zu Demozwecken und kann gelöscht werden - siehe Markup.

Folgende Linkliste steht zur Verfügung: https://meinereise.phoenixreisen.com/cdn/links.json

Examples

Default styling

.side-nav--lefted

von links hineinfahren lassen

Markup

<div class="relative" style="height: 700px; width: 100%"> <!-- Demostyles. Löschen. -->
    <aside class="side-nav [modifier class]" style="position: absolute"> <!-- Inline Style nur zu Demozwecken -->
        <div class="side-nav-header">
            <button type="button" class="btn--link">
                schließen <i class="fas fa-times ml2"></i>
            </button>
        </div>
        <h3>Linkliste</h3>
        <ul>
            <li>
                <a href="https://www.phoenixreisen.com" target="_blank">
                    <i class="fas fa-angle-right mr2"></i>
                    Homepage
                </a>
            </li>
            <li>
                <a href="https://meinereise.phoenixreisen.com/cdn/mein-phoenix/login/" target="_blank">
                    <i class="fas fa-angle-right mr2"></i>
                    Mein Phoenix
                </a>
            </li>
            <li>
                <a href="https://magazin.phoenixreisen.com/" target="_blank">
                    <i class="fas fa-angle-right mr2"></i>
                    Phoenix Magazin
                </a>
            </li>
            <li>
                <a href="https://www.phoenixreisen.com/kataloge-online-lesen.html" target="_blank">
                    <i class="fas fa-angle-right mr2"></i>
                    Phoenix Kataloge
                </a>
            </li>
            <li>
                <a href="https://meinereise.phoenixreisen.com/cdn/phoenix-katalog-verwaltung/" target="_blank">
                    <i class="fas fa-angle-right mr2"></i>
                    Phoenix Abonnements
                </a>
            </li>
        </ul>
        <h3>Weitere Links</h3>
        <ul>
            <li>
                <a href="#">
                    <i class="fas fa-angle-right mr2"></i>
                    Link I
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-angle-right mr2"></i>
                    Link II
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-angle-right mr2"></i>
                    Link III
                </a>
            </li>
        </ul>
    </aside>
</div>

Source: src/components/_navigation.scss, line 1