0t1 steckt noch in den Kinderschuhen.

Veröffentlicht in Tutorials.

Bildnavigation - Tutorial

Sara Heinrich | .

Co-Autor(en): Eva Weddig

In diesem Tutorial wird eine Bildnavigation in HTML und CSS erstellt. Die Bilder stehen im Vordergrund, mit einer dazugehörigen Bildunterschrift. In den Bildern befindet sich eine weitere Navigation, die zu Unterpunkten führt.

HTML

Grundlage

Wir erstellen uns eine HTML-Datei: index.html.

In die erste Zeile schreiben wir <!DOCTYPE html>, dies sagt dem Browser, dass es sich um eine HTML-Datei handelt. Mit <html lang="de"> legen wir die Sprache der Seite fest. In diesem Fall ist es "de" für Deutsch.

<!DOCTYPE html>

<html lang="de">

Im <head> sind alle wichtigen Information der HTML-Datei beschrieben.

<meta charset="UTF-8"> braucht der Browser um Umlaute, Sonderzeichen und alles andere kodieren zu können.

<link href="css/style.css" rel="stylesheet"> brauchen wir für die Verlinkung unseres CSS-Stylesheets, welches das Aussehen der Webseite definiert.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> sorgt dafür, dass der Inhalt korrekt, vollständig und gut lesbar auf dem Endgerät angezeigt wird.

<title>Bildnavigation - Tutuoraial</title> gibt die Seitenüberschrift an und <meta name="description" content="Bildnavigation"> die dazu gehörige Seitenbeschreibung.

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Bildnavigation - Tutorial</title>
   <meta name="description" content="Bildnavigation">

   <link href="css/style.css" rel="stylesheet">
</head>

Alles, was wir nun als Inhalt der Seite definieren, kommt in den <body>.

<body>


</body>

1. Schritt: Bildbox

Um mit der Navigation anzufangen, brauchen wir erstmal ein Bild mit Bildunterschrift.

Das Bild <img> und die Bildunterschrift <span> werden dann in einen div-Container mit einer Klasse gesetzt:<div class="box">.

Für die Bild-Dateien wird ein neuer Ordner erstellt: Bilder.

Die Verlinkung der Bilder ist dann mit src="" möglich. Falls das Bild nicht geladen werden kann, wird mit alt="" ein alternativer Text für das Bild eingeblendet.

<div class="box">

         <img src="Bilder/Hund.jpg" alt="Hund">
         <span>Hund</span>

</div>

2. Schritt: Unternavigation im Bild

Um die Navigation zu erstellen, legen wir neue div-Container an. Als Erstes eine <div class = “menu”>, dies ist die Unternavigation im Bild. In dieser kommen weitere Elemente hinein.

Die Bildunterschrift soll, wenn man mit dem Cursor über das Bild fährt, nochmal erscheinen. Dies ist die Navigationsüberschrift: <div class = “label”>.

<div class="box">
       
        <img src="Bilder/Hund.jpg" alt="Hund">
        <span>Hund</span>
      
        <div class="menu">
           <div class="label">Hund</div>
        </div>

</div>

Als Nächstes wird ein neuer div-Container erstellt: <div class = “spacer”>.
Mit der Linie, die dort entsteht, hebt sich die Überschrift von den Navigationspunkten ab.

Um die Schrift besser lesbar zu machen, fügen wir eine dunklere Fläche ein, damit sich die Schrift vom Bild abhebt: <div class="background">.

<div class="box">
       
        <img src="Bilder/Hund.jpg" alt="Hund">
        <span>Hund</span>
      
        <div class="menu">
           <div class="background"></div>
           <div class="label">Hund</div>
           <div class="spacer"></div>
        </div>

</div>

Danach wird noch ein neuer div-Container angelegt, der steht für die Navigationspunkte: <div class = “Item”>. Damit die Navigationsüberschrift und die Linie über den Navigationspunkten mit einer neuen Zeile beginnt, wird ein <br> für den Zeilenumbruch angelegt. Es sind maximal 10 Navigationspunkte pro Bild möglich.

Wenn man die Navigationspunkte verlinken möchte, so kannst du das mit <a href=“”> machen.

<div class="box">
        <!--Bild mit Bildunterschirft-->
        <img src="Bilder/Hund.jpg" alt="Hund">
        <span>Hund</span>
        
        <!--Bild Navigation-->
        <div class="menu">
          <div class="background"></div> <!--Verdunkelter Hintergrund-->
          <div class="label">Hund</div> <!--Navigationsüberschrift-->
          <div class="spacer"></div> <!--weißer Unterstrich-->

          <br>

          <!--Navigationspunkte-->
          <div class="item">
            <a href=""><span>Projekt 1</span></a>  <!--möglich mit Verlinkungen-->
          </div>
          
          <div class="item">
            <span>Projekt 2</span>
          </div>

        </div>

</div>

3. Schritt: Zwei Navigationsbilder hinzufügen

Wir kopieren den oben gezeigten Teil noch zweimal und fügen ihn darunter ein, damit wir insgesamt drei Navigationsbilder haben. Damit es nicht zu Doppelungen kommt, werden die beiden neu eingefügten Boxen umbenannt und neue Bilder eingefügt.

Diese drei div-Container mit <div class = “box”> werden in einem neuen div-Container mit <div class = “container”> untergeordnet. Wie wir am Anfang beschrieben haben, kommt dieser ganze Inhalt in den Container <body>.

<body>

<!--BILDNAVIGATION-->
    <div class="container">
      
      <!--BOX 1-->
      <div class="box">

        <!--Bild mit Bildunterschirft-->
        <img src="Bilder/Hund.jpg" alt="Hund">
        <span>Hund</span>
        
        <!--Bild Navigation-->
        <div class="menu">
          <div class="background"></div> <!--Verdunkelter Hintergrund-->
          <div class="label">Hund</div> <!--Navigations Überschrift-->
          <div class="spacer"></div> <!--weißer Unterstrich-->

          <br>

          <!--Navigationspunkte-->
          <div class="item">
            <a href=""><span>Projekt 1</span></a>  <!--möglich mit Verlinkungen-->
          </div>
          
          <div class="item">
            <span>Projekt 2</span>
          </div>
          
          <div class="item">
            <span>Projekt 3</span>
          </div>
          
          <div class="item">
            <span>Projekt 4</span>
          </div>
          
          <div class="item">
            <span>Projekt 5</span>
          </div>
          
          <div class="item">
            <span>Projekt 6</span>
          </div>
          
          <div class="item">
            <span>Projekt 7</span>
          </div>
          
          <div class="item">
            <span>Projekt 8</span>
          </div>
          
          <div class="item">
            <span>Projekt 9</span>
          </div>
          
          <div class="item">
            <span>Projekt 10</span>
          </div>
          
        </div>
      </div>


      <!--BOX 2-->
      <div class="box">

        <!--Bild mit Bildunterschirft-->
        <img src="Bilder/Katze-3.jpg" alt="Katze">
        <span>Katzen</span>

        <!--Bild Navigation-->
        <div class="menu">
          <div class="background"></div>  <!--Verdunkelter Hintergrund-->
          <div class="label">Katze</div>  <!--Navigations Überschrift-->
          <div class="spacer"></div>      <!--weißer Unterstrich-->
          
          <br>

          <!--Navigationspunkte-->
          <div class="item">
            <a href=""><span>Projekt 1</span></a> <!--möglich mit Verlinkungen-->
          </div>
          
          <div class="item">
            <span>Projekt 2</span>
          </div>

        </div>
      </div>


      <!--BOX 3-->
      <div class="box">

        <!--Bild mit Bildunterschirft-->
        <img src="Bilder/Pferd.jpg" alt="Pferd">
        <span>Pferd</span>

        <!--Bild Navigation-->
        <div class="menu">
          <div class="background"></div>  <!--Verdunkelter Hintergrund-->
          <div class="label">Pferd</div>  <!--Navigations Überschrift-->
          <div class="spacer"></div>      <!--weißer Unterstrich-->
          
          <br>

          <!--Navigationspunkte-->
          <div class="item"> 
            <a href=""><span>Projekt 1</span></a> <!--möglich mit Verlinkungen-->
          </div>
            
          <div class="item">
            <span>Projekt 2</span>
          </div>
            
          <div class="item">
            <span>Projekt 3</span>
          </div>
            
          <div class="item">
            <span>Projekt 4</span>
          </div>
          
          <div class="item">
            <span>Projekt 5</span>
          </div>

        </div>
      </div>

  </body>

 
</html>  <!--Ende-->

Anmerkung: Wir haben oben im ersten Schritt <html> eingeführt, nun schließen wir diesen am Ende des Html Dokuments.

CSS

1. Schritt: Allgemeine Gestaltung

Wir legen einen Ordner namens CSS an, dort erstellen wir uns eine CSS-Datei: stlye.css.

Bevor wir mit der Gestaltung beginnen, müssen wir die Schrift, die wir benutzen wollen, mit @import und einer url importieren. Wir benutzen die Schirft Lato von Google Fonts. Einen weiteren @import brauchen wir für eine Verlinkung zu einer weiteren CSS-Datei namens responsiv.css, warum wir das benötigen wird später im Tutorial erklärt.

@import url('https://fonts.googleapis.com/css?family=Lato');

@import url(responsiv.css);

Jetzt zu den allgemeinen Gestaltungseinstellungen, die unten festgelegt werden.

@media screen umfasst den ganzen Inhalt des CSS und erlaubt eine responsive Webseite zu erstellen und ermöglicht dadurch auch die Darstellung auf verschiedene Endgeräten.

Zu den Gestaltungseinstellungen gehören die Hintergrundfarbe, die Schriftfarbe, die Schriftart und der Seitenabstand.

@media screen { 

    * { 
        margin: 0px;
        padding: 0px;
     }

body {
        background-color: #000000;
        color: #ffffffb3;
        font-family: 'Lato', sans-serif;
        margin: 1rem;
     }

Damit die Schriftfarbe und das Aussehen sich bei der Verlinkung a nicht verändern, sind folgende Einstellungen notwendig.

a, a:visited, a:focus{
        color: #ffffffb3;
        text-decoration: none;
    }

2. Schritt: Bilderboxen

2.1 Definition von .container

Als Erstes müssen wir die grundlegende Definition des Containers festlegen. Damit die Navigation responsive ist, verwenden wir display: flex.

.container {
        display: flex;
        width: 100%;
        padding: 4% 2%;
        box-sizing: border-box;
        height: 100vh;
    }

Wir benutzen für height die Einheit vh, sie bezieht sich auf die Höhe des Viewports und nicht auf das umfassende Element. Der Viewport ist allgemein die Bezeichnung für die Größe des zur Verfügung stehenden Displays auf mobilen Endgeräten.

2.2 Definition von .box

Nun werden die Grundeigenschaften der Bildbox definiert. Mit den unten aufgeführten Attributen sorgen wir für die konkrete Anordnung der Boxen und deren Aussehen.

.box {
        flex: 1;
        overflow: hidden;
        transition: .5s;
        margin: 0 1%;
        line-height: 0;
        background-color: #000000;
    }

2.3 Gestaltung der Bilder mit .box > img

Damit das Bild in der Box gleichmäßig und ausfüllend angezeigt wird, brauchen wir diese Eigenschaften:

.box > img {
        width: 150%;
        height: calc(100% - 10vh);
        object-fit: cover;
        transition: .5s;
}

Die Einstellung in height bewirkt auch, dass unter dem Bild etwas Platz bleibt, damit die Bildunterschrift darunter passt.

2.4 Bildunterschrift gestalten mit .box > .span

In diesem Schritt definieren wir die Eigenschaften der Bildunterschrift. Sie soll zentriert unter dem Bild stehen und einen Abstand zur Bildbox haben.

.box > span {
        font-size: 3.8vh; 
    
        display: block;
        text-align: center;
    
        height: 10%;
        line-height: 2.6;
    }

2.5 Bildergröße verändern durch .box:hover

Zuerst müssen wir die Box größer werden lassen, sobald der Cursor über das Bild geht.

.box:hover { 
        flex: 1 1 25%;
    }

Danach wird das Bild separat mit dem Hover-Effekt gestaltet. Durch width und height passt sich das Bild an die neue Größe an.

.box:hover > img {
        width: 100%;
        height: 100%;
    }

2.6 Fortschritt der Seite

Dies ist der aktuelle Stand der Seite, jetzt nehmen wir uns die Bildnavigation vor.

3. Schritt: Bildnavigation gestalten

3.1. Grundlegene Definition

Als Erstes müssen wir die Grundeigenschaften der Navigation festlegen. Da wir die ganze Navigation erst brauchen, wenn wir auf ein Bild navigieren, lassen wir sie mit opacity: 0 verschwinden. Später wird sie wieder eingeblendet.

.menu {
    text-transform: uppercase;
    color: #ffffffb3;

    display: inline-block;
    cursor: pointer;
    pointer-events: none;
    position: sticky; 

    bottom: 5.5rem;
    left: 1rem; 

    opacity: 0;
  }

3.2. Hintergrundfläche .background

Um die Schrift besser lesen zu können, haben wir eine schwarze Farbfläche über das Bild gelegt. Durch die geringere Deckkraft der Fläche kann man das Bild trotzdem noch sehen.

.background {
        position: absolute;

        width: 100rem;
        height: 100rem;

        left: -1rem;
        bottom: -2rem;

        background-color: #00000090;
        filter: blur(1rem);
        opacity: 0;
    }

Um die Farbfläche durch den Hover-Effekt zu aktivieren, benötigen wir diese Eigenschaften.

.menu:hover .background{
        opacity: 1;
        transition: 1s; 
        transition-delay: 0.2s;
     }

3.3. Eigenschaften während dem Hover-Effekt für .menu

Damit das Menü eingeblendet wird, wenn man mit dem Cursor über die Navigations-
überschrift geht, brauchen wir diese Eigenschaften. Wir stellen die opacity, die wir vorhin auf 0 hatten, auf 1, damit sie wieder sichtbar wird. Durch die transition bekommen wir einen weichen Übergang.

.box:hover > .menu {
    opacity: 1;
    transition: opacity 1s; 
    transition-delay: 0.2s;
  }

Der Cursor verändert sich, während er über die Navigationspunkte fährt. So erkennt der Besucher, dass es dort etwas anzuklicken gibt.

.menu:hover {
        pointer-events: all;
    }

3.4. Navigationsüberschrift .label

Die Navigationsüberschrift wird im nächsten Abschnitt positioniert.

.label {
    display: inline-block;
    cursor: pointer;
    pointer-events: all;
  }

3.5. Trennlinie .spacer und .spacer::before

Jetzt wird eine Linie eingefügt, um die Darstellung in der Navigation übersichtlicher zu gestalten. Mit .spacer wird die Box der Linie festgelegt.

.spacer {
    display: inline-block;
    width: 100px;
    margin-left: 15px;
    margin-right: 15px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
  }

Bei .spacer::before wird nun das Aussehen der Linie definiert.

.spacer::before {
    content: "";
    position: absolute;
    border-bottom: 1px solid #ffffff;
    height: 1px;
    width: 0%;
    transition: width 0.25s ease;
    transition-delay: 0.7s;
  }

3.6. Navigationpunkte .item und .span

Im nächsten Schritt wird mit .item die Box der Navigationspunkte gestaltet. Bei .span wird die Schriftfarbe von dem Hover-Effekt langsam eingeblendet.

.item {
    position: relative;

    display:inline-block;

    margin-top: 1rem;
    margin-right: 30px;
    top: 10px;
    opacity: 0; 
    transition: opacity 0.5s ease, top 0.5s ease;
    transition-delay: 0;
  } 


.span {
    transition: color 0.5s ease;
  }

3.7. Hover-Effekte für .span, .spacer und .item

Damit die Schrift .span eine Farbe bekommt, wenn mit dem Cursor darübergefahren wird, muss diese festgelegt werden.

.item:hover span {
    color: #ff0000;
  }

Die Linie .spacer soll auftauchen, wenn der Cursor sich über die Navigationsüberschrift befindet. Um dies zu erreichen, brauchen wir folgende Attribute.

.menu:hover .spacer:before {
    width: 100%;
    transition-delay: 0s;
  }

Zuletzt werden, wenn der Cursor über die Navigationsüberschrift darüberfährt, die Navigationspunkte .item eingeblendet.

.menu:hover .item {
    opacity: 1;
    top: 0px;
  }

3.8. "Animations-Effekt" für .item

Um eine Verzögerung der nachfolgenden Navigationspunkte zu erzielen, werden die Kinder-Selektoren mit einem transition-delay definiert, welcher durch :hover der Navigationsüberschrift .menu aktiviert wird.

Da :nth-child( ) leider nicht nur den genannten Kind-Selektor .item, sondern im Eltern-Selektor .menu alle Kinder-Selektoren liest, müssen wir bei der Aufzählung mit :nth-child(5) beginnen.

Im HTLM ist die zuerst gelistete <div class="item"> das 5. Kind des Eltern-Selektor .menu.

Die davor liegenden Kinderelemente im HTML : <div class="background">, <div class="label">, <div class="spacer"> und <br> werden somit ignoriert.

<!-- BEISPIEL -->
<div class="menu"> <!--Eltern-Selektor-->
          <div class="background"></div> <!--Kind 1-->
          <div class="label">Hund</div> <!--Kind 2-->
          <div class="spacer"></div> <!--Kind 3-->

          <br> <!--Kind 4-->

          
          <div class="item"> <!--Kind 5-->
            <a href=""><span>Projekt 1</span></a> 
          </div>
          
          <div class="item"> <!--Kind 6-->
            <span>Projekt 2</span>
          </div>
</div>

Wir geben also nun den Navigationspunkten eine Verzögerung, die einem 0.05s Tackt folgt.
Im Tutorial benutzen wir maximal zehen Navigationspunkte, daher geht dieser Vorgang bis .menu:hover .item:nth-child(14) .

.menu:hover .item:nth-child(5) {
    transition-delay: 0.25s;
}

.menu:hover .item:nth-child(6) {
    transition-delay: 0.3s;
}

.menu:hover .item:nth-child(7) {
    transition-delay: 0.35s;
}

.menu:hover .item:nth-child(8) {
    transition-delay: 0.4s;
}

.menu:hover .item:nth-child(9) {
    transition-delay: 0.45s;
}

.menu:hover .item:nth-child(10) {
    transition-delay: 0.5s;
}

.menu:hover .item:nth-child(11) {
    transition-delay: 0.55s;
}

.menu:hover .item:nth-child(12) {
    transition-delay: 0.6s;
}

.menu:hover .item:nth-child(13) {
    transition-delay: 0.65s;
}

.menu:hover .item:nth-child(14) {
    transition-delay: 0.7s;
}


} /* ende des @media screen */

Anmerkung: Wir haben im 1. Schritt den @media screen eingefügt, nun beenden wir diesen im letzten Abschnitt.

4. Schritt: Aussehen bei kleiner Bildschirmauflösung

Wir legen uns eine neue CSS-Datei an, diese hat den Namen responsiv.css. Da im stlye.css ein @import url(responsiv.css) steht, kann auf die neu erstellte CSS-Datei zugegriffen werden.

Wir geben mit @media screen and (max-width: 767px) die maximale Weite der Bildschirmauflösung an, damit der Inhalt sich an die Seite anpassen kann.

@media screen and (max-width: 767px) {

Wir ändern bei .container die Anordnung der Bildboxen mit flex-direction: column;, damit diese untereinander stehen.

.container {
        flex-direction: column; /* Anordnung untereinander*/
    }

Damit die Linie der Navigation nicht vom Text verdrängt wird, bekommt sie eine neue Position.

.spacer {
          margin: 0.5rem 0 0 0;
          left: -0.5rem; 
        }

Damit sich die Bilder und Bildunterschriften klar gruppieren, wird dem Bild am oberen Rand eine Linie gegeben.

.box > img {
             border-top: solid 0.1rem #ffffff20; /* für die Übersicht */  
           }

Um zu verhindern, dass sich die Bilder beim Hover-Effekt berühren oder sogar überschneiden, geben wir einen Abstand vor.

.box:hover { 
              margin-bottom: 1rem; /* Lücke zwischen den Bildern wenn HOVER*/     
           }

}  <!-- ende des @media screen  -->

So sieht die Seite mit @media screen and (max-width: 767px) aus.

Wir sind nun fertig.

Vielen Dank, dass du dir dieses Tutorial angesehen hast. Wenn du dir den kompletten Code ansehen möchtest, kannst du die Datei im unteren Link herunterladen.

Download (ZIP)

Quellen
Bildnavigation: https://codepen.io/knyttneve/pen/YgZbLO
Navigation:https://codepen.io/animatedcreativity/pen/wOqBQr

Schlagworte

© 0t1

Cookies

0t1 mag keine Kekse (und kein Tracking). Wir verwenden lediglich notwendige Cookies für essentielle Funktionen.

Wir verwenden Schriftarten von Adobe Fonts. Dafür stellt dein Browser eine Verbindung zu den Servern von Adobe in den USA her. Wenn du unsere Seite nutzen möchtest, musst du dich damit einverstanden erklären.

Weitere Informationen in unserer Datenschutzerklärung.