A B E G

Startseite Skripte für das Wintersemester 2017/18 Webdesign DOM und Desktop-Layouts Waagrechte Navigationsmenü mit Lücke


Waagrechte Navigationsmenü mit Lücke

weil Ihr z.B. einen Menüpunkt visuell absetzen möchtet…

Bei den bisherigen Beispielen haben wir nur das Element verwendet, das das Raster definiert – hier wird ein Element (<li class="abgesetzt">) angesprochen, um gezielt positioniert zu werden:

HTML

<nav>
    <ul>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">News</a></li>
        <li class="current"><a href="#">Über uns</a></li>
        <li><a href="#">Kontakt</a></li>

        <li class="abgesetzt"><a href="#">Impressum</a></li>
    </ul>
</nav>

CSS

/* Rest wie beim vorherigen Beispiel */
nav ul {
    /* … */
    display: grid;
    /* Kurzschreibweise für: grid-template-columns: 1fr 1fr 1fr 1fr 1f 1fr; */
    grid-template-columns: repeat(6, 1fr);
}

.abgesetzt {
    /* das Element fängt somit nicht an Raster-Platz 5 sondern 6 an */
    grid-column: 6;
}

Demo

Demoschaut Euch den Source-Code an!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit in Brackets experimentieren…