Design Navigation

← zurück zum Design Wiki

Verantwortlicher: Patrick Puritscher

Beschreibung: Die Hauptnavigation basiert auf einer HTML-Liste <ul><li></li></ul> und wird mithilfe des Gridsystems ergänzt.

Betroffende Dateien: index.html, elements.css, style.css

Eingebundene Bibliotheken: -

---

HTML

<ul class="e__navigation-vertical clearfix">
 <li class="e__navigation-vertical-element col-5"><a href="#refresh">Aktuelle Route</a></li>
 <li class="e__navigation-vertical-element col-2"><a href="#refresh">Top 7</a></li>
 <li class="e__navigation-vertical-element col-5"><a href="#refresh">Offline Routen</a></li>
</ul>

CSS

style.css

#theatre-head-subbar .e__navigation-horizontal-element:first-of-type > a {
    padding: 0px 3px;
}
#theatre-head-subbar .e__navigation-horizontal-element:last-of-type > a {
    padding-right: 3px;
}

elements.css

/**
 * Navigationen
 */

.e__navigation-horizontal,
.e__navigation-horizontal-element {
    margin: 0;
    padding: 0;
}

.e__navigation-horizontal {
    list-style: none;
}

.e__navigation-horizontal-element {
    text-align: center;
}

.e__navigation-horizontal-element > a {
    display: block;
    height: 100%;
    width: 100%;
    font-size: 1rem;
    line-height: 2.5;
    text-decoration: none;
    color: #333;
    position: relative
}

.e__navigation-horizontal-element > a:hover,
.e__navigation-horizontal-element > a:focus {
    outline: 0;
    cursor: pointer;
}

.e__navigation-horizontal-element > a.active,
.e__navigation-horizontal-element > a:hover {
    font-weight: 400;
}

.e__navigation-horizontal-element > a.active::after,
.e__navigation-horizontal-element > a:hover::after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 5px;
    bottom: 0;
    left: 0;
    background: #4d4d4d;
}

/** /Navigation **/