Im sechsten Teil dieses Tutorials lernen Sie, wie Sie Menü- und Link-Stile einrichten und das Menü mittels JavaScript in Abhängigkeit der Bildschirmgröße ein- und ausblenden.
5496-create-first-website_1408x792


Hinweis: Über die Download-Buttons können Sie die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Sie können entweder mit der Datei weiterarbeiten, die Sie im ersten Teil des Tutorials angelegt haben, oder die Version im Ordner für diese Lektion verwenden.

Einführung

Willkommen zu Teil 6 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver CC. Die einspaltige Version des Designs ist beinahe fertig. Es fehlt nur noch die Formatierung der Links und des Navigationsmenüs. Sie werden außerdem eine JavaScript-Datei mit Ihrer Website verknüpfen, um die Anzeige des Menüs auf kleinen Bildschirmen zu steuern.

Links werden standardmäßig blau und unterstrichen dargestellt. Wenn ein Link bereits aufgerufen wurde, ändert sich die Schriftfarbe in Lila. Obwohl diese Formatierung gängig ist, passt sie in den seltensten Fällen zu modernen Designs. Heutzutage neigt man eher dazu, die Unterstreichung zu entfernen und das Erscheinungsbild von Links beim Mouseover zu verändern. Für die verschiedenen Zustände von Links werden in den CSS-Anweisungen sogenannte Pseudoklassen verwendet. Die Bezeichnung leitet sich davon ab, dass im Gegensatz zu normalen Klassen keine Klassenattribute zu den Elementen hinzugefügt werden. Die Pseudoklasse wird dynamisch vom Browser auf Basis der im Stylesheet hinterlegten CSS-Anweisungen angewendet.

Sie beginnt stets mit einem Doppelpunkt (:) und wird direkt an einen Selektor angefügt. Folgende Pseudoklassen werden für Links eingesetzt:

  • „:link“ formatiert einen Link, der noch nicht aufgerufen wurde.
  • „:visited“ formatiert einen zuvor aufgerufen Link.
  • „:hover“ bestimmt das Erscheinungsbild eines Elements (nicht nur eines Links), wenn der Cursor darüber bewegt wird. Sie haben dieses Attribut bereits im fünften Teil verwendet, um das Aussehen eines Bildes beim Mouseover zu verändern.
  • „:active“ formatiert ein Element in dem Moment, in dem es angeklickt wird.
  • „:focus“ formatiert ein aktuell ausgewähltes Element, z. B. beim Navigieren innerhalb einer Seite mithilfe der Tastatur.

Beim Formatieren von Links ist es wichtig, die Pseudoklassen in der hier gezeigten Reihenfolge zu verwenden. Andernfalls kann es zu Fehlern bei der Anwendung der CSS-Anweisungen kommen. Die Reihenfolge lässt sich mithilfe der Eselsbrücke LoVe-HAte (Liebe-Hass) leichter merken. Auch die Codehints in Dreamweaver helfen Ihnen, die Pseudoklassen in der korrekten Reihenfolge aufzulisten. Die „:focus“-Pseudoklasse ist wichtig für die barrierefreie Nutzung einer Website durch Personen, die eine Maus auf dem Laptop oder Desktop nicht bedienen können oder wollen.

  1. Wählen Sie in der Live-Ansicht einen Link aus, und markieren Sie im Bereich „Selektoren“ von CSS Designer den H2-Selektor. Die nächste CSS-Anweisung wird direkt nach dem H2-Selektor eingefügt, sodass die meisten generischen Selektoren im Stylesheet beieinander bleiben. Klicken Sie auf das Pluszeichen, um einen neuen Selektor zu erstellen. Drücken Sie die Nach-oben-Taste, um den Detailgrad des vorgeschlagenen Selektors zu senken. Für dieses Beispiel benötigen Sie einen A-Selektor, der Links in allen Zuständen formatiert.

  2. Setzen Sie im Text-Abschnitt des Bereichs „Eigenschaften“ den Wert für „font-weight“ auf bold.

  3. Wählen Sie neben der Property „text-decoration“ das erste Symbol für den Wert none aus. Alle Links auf der Seite sind nun fett und ohne Unterstreichung.

  4. Erstellen Sie einen neuen Selektor für „a:link“. Wenn Sie den Doppelpunkt eingeben, zeigt Dreamweaver Codehints für die Pseudoklassen an.

  5. Klicken Sie im Bedienfeld „CC Libraries“ auf das rosa Farbfeld, um den Hex-Wert #F68979 in die Zwischenablage zu kopieren. Fügen Sie diesen Wert in das editierbare Feld der Property color ein.

  6. Erstellen Sie einen neuen Selektor für a:visited, kopieren Sie den Hex-Wert #FF944C des hellorangen Farbfeldes, und fügen Sie diesen Wert für die Property „color“ ein.

  7. Erstellen Sie einen neuen Selektor für „a:hover, a:active, a:focus“, kopieren Sie den Hex-Wert #7F3300 des braunen Farbfeldes, und fügen Sie diesen Wert für die Property „color“ ein.

    Legen Sie für die Property „text-decoration“ den Wert underline fest, indem Sie auf das zweite Symbol klicken.

  8. Fahren Sie in der Live-Ansicht mit dem Cursor über einen Link. Die Schriftfarbe sollte sich in Braun ändern, und der Text sollte unterstrichen sein. Falls nicht, haben Sie die Link-Stile im Bereich „Selektoren“ möglicherweise in der falschen Reihenfolge angelegt. Vergleichen Sie Ihre Einstellungen mit Abbildung 1.
fig01
Abbildung 1: Die Pseudoklassen für Link-Stile müssen in der richtigen Reihenfolge angelegt sein.

Falls nötig, können Sie die Reihenfolge der CSS-Anweisungen ändern, indem Sie im Bereich „Selektoren“ die Selektoren per Drag-and-Drop umsortieren. Eine horizontale schwarze Linie zeigt an, wo der oder die Selektor(en) im Stylesheet platziert werden.

Im Moment sind alle Links gleich formatiert. Die Darstellung der Navigations-Links muss noch angepasst werden. Sie müssen aber zuerst einen sogenannten Trigger-Link (Auslöser) für das Navigationsmenü auf kleinen Bildschirmen erstellen.

Auf kleinen Bildschirmen wie bei Smartphones ist das Navigationsmenü normalerweise ausgeblendet und wird erst durch das Anklicken oder Antippen eines Menü-Buttons eingeblendet. In diesem Abschnitt werden Sie der ungeordneten Liste eine ID zuweisen und eine Überschrift zweiter Ordnung mit einem Link zu dieser Liste hinzufügen. Der Menü-Link wird per CSS-Anweisung auf Bildschirmen mit hoher Auflösung verborgen. Die gleitende Bewegung des Navigationsmenüs auf kleineren Bildschirmen wird mithilfe einer Kombination aus CSS- und JavaScript-Code gesteuert.

  1. Wählen Sie in der Live-Ansicht die ungeordnete Liste mit den Navigations-Links aus, indem Sie auf einen der Links klicken. Der Link wird braun und unterstrichen dargestellt, weil er aktiviert wurde. Drücken Sie dann mehrmals die Nach-oben-Taste, bis die Elementanzeige anzeigt, dass die Liste ausgewählt ist. Auf dem Tab der Elementanzeige sollte „ul“ zu sehen sein (siehe Abbildung 2).
fig02
Abbildung 2: Die ungeordnete Liste ist ausgewählt.

Durch Drücken der Nach-oben-Taste in der Live-Ansicht wandert die Auswahl in der HTML-Hierarchie nach oben. Wenn Sie ein Listenelement in der Mitte der Liste auswählen und die Nach-oben-Taste einmal drücken, wird das A-Tag (der Hyperlink) des darüber liegenden Listenelements ausgewählt. Wenn Sie die Taste erneut drücken, wird das LI-Tag des übergeordneten Elements ausgewählt. Je öfter Sie die Nach-oben-Taste drücken, desto weiter bewegt sich Dreamweaver in der Hierarchie nach oben. Falls Sie zu weit nach oben gehen, wählt Dreamweaver zunächst das NAV-Element und dann das H1-Element aus. Drücken Sie in diesem Fall die Nach-unten-Taste, um zum UL-Element zu gelangen.

Klicken Sie bei ausgewähltem UL-Element auf das Pluszeichen der Elementanzeige, und weisen Sie der ungeordneten Liste die ID „navlinks“ zu, indem Sie im eingeblendeten Feld „#navlinks“ eingeben. Drücken Sie die Tabulator- oder Eingabetaste, um die Änderung zu bestätigen. Vergewissern Sie sich, dass im Popup-Bedienfeld unter Quelle auswählen die Datei responsive.css ausgewählt ist, und klicken Sie außerhalb des Bedienfelds, um es zu schließen.

Hinweis: Wenn Sie eine ID oder Klasse über die Elementanzeige zuweisen, erstellt Dreamweaver automatisch eine leere CSS-Anweisung für die ID oder Klasse, sofern diese im CSS-Code noch nicht vorhanden ist. Wenn Sie keine CSS-Anweisung erstellen möchten, drücken Sie die Esc-Taste, um das Popup-Bedienfeld zu schließen. Die automatische Erstellung von CSS-Anweisungen wird nur ausgelöst, wenn Sie Klassen oder IDs über die Elementanzeige zuweisen. Wenn Sie das DOM-Bedienfeld oder den Eigenschafteninspektor verwenden, wird keine leere CSS-Anweisung erstellt.

  1. Während die ungeordnete Liste noch ausgewählt ist, wählen Sie Einfügen > Überschrift > Ü2. Wählen Sie im Dialogfeld zur Positionierungshilfe die Option Vor, um eine Überschrift zweiter Ordnung direkt über der ungeordneten Liste einzufügen.

  2. Machen Sie einen Doppelklick auf den Platzhaltertext der Überschrift, um in den Bearbeitungsmodus zu wechseln, und überschreiben Sie ihn mit dem Wort Menu.

    Bleiben Sie im Bearbeitungsmodus, markieren Sie das Wort Menu, und klicken Sie auf das Verknüpfungssymbol, um es in einen Link umzuwandeln.

    Geben Sie in das Link-Feld „#navlinks“ ein (siehe Abbildung 3), und klicken Sie außerhalb des Textes, um den Bearbeitungsmodus zu beenden.
fig03
Abbildung 3: Erstellen Sie einen Link zum Navigationsmenü.

Es wird ein Link zum Element mit der ID navlinks auf derselben Seite erstellt – also zur ungeordneten Liste der Navigations-Links.

  1. Prüfen Sie, ob das H2-Element in der Live-Ansicht ausgewählt ist (wenn das A-Element ausgewählt ist, müssen Sie die Nach-oben-Taste einmal drücken). Weisen Sie mithilfe des Pluszeichens in der Elementanzeige dem H2-Element die ID menulink zu.

  2. Sehen Sie sich den HTML-Code in der Code-Ansicht an. Das NAV-Element sollte nun so aussehen:
<nav>
  <h2 id="menulink"><a href="#navlinks">Menu</a></h2>
      <ul id="navlinks">
            <li><a href="index.html">Home</a></li>
            <li><a href="sights.html">Sights</a></li>
            <li><a href="#">Dining</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Lodging</a></li>
      </ul>
</nav>

Beachten Sie, dass die ID-Attribute für H2 und UL nicht mit einem Hash-Zeichen # beginnen. Das HREF-Attribut im Link dagegen schon, denn hier bedeutet das Hash-Zeichen: „Suche nach dieser ID“.

In der Elementanzeige oder im DOM-Bedienfeld setzen Sie ein # an den Anfang einer ID, um sie von einer Klasse zu unterscheiden. In der CSS-Sprache beginnt ein ID-Selektor mit einem Hash-Zeichen # und ein Klassen-Selektor mit einem Punkt (.). Dreamweaver behält also für die Anwendung von IDs und Klassen auf Elemente im Code dieselbe Konvention bei.

Hinweis: Eine ID kann nur einmal pro Seite verwendet werden, wohingegen eine Klasse für mehrere Elemente eingesetzt werden kann. ID- und Klassennamen sollten keine Leerzeichen enthalten. Verwenden Sie Bindestriche oder Unterstriche, um Wörter im Namen voneinander zu trennen. Alternativ können Sie Binnenversalien verwenden, d. h. jeweils den ersten Buchstaben eines Wortes innerhalb des Namens großschreiben. Verzichten Sie in jedem Fall auf Sonderzeichen oder Satzzeichen.

  1. Wenn Sie eine neue ID oder Klasse über die Elementanzeige erstellen, wird der entsprechende Selektor immer am Ende der Liste im Bereich „Selektoren“ eingefügt. Um die Stile logisch zu organisieren, wählen Sie im Bereich „Selektoren“ den Selektor „#menulink“ aus, und ziehen Sie ihn unter die anderen Link-Stile. Lassen Sie die Maustaste los, wenn die horizontale schwarze Linie direkt unter der Gruppe von Selektoren „a:hover, a:active, a:focus“ liegt (siehe Abbildung 4).
fig04
Abbildung 4: Sie können die CSS-Anweisungen in CSS Designer neu organisieren, indem Sie Selektoren per Drag-and-Drop verschieben.
  1. Verschieben Sie den Selektor „#navlinks“ direkt unter „#menulink“.

Der Trigger-Link ist innerhalb einer H2-Überschrift verschachtelt. Browser stellen Überschriften zweiter Ordnung standardmäßig groß und fett dar. Das Design verlangt jedoch nach einer kleineren, schlankeren Schrift. Da die Website auch auf Mobilgeräten verwendet wird, muss der Link selbst leicht anzutippen sein. Er sollte also die gesamte Breite der Überschriftenzeile einnehmen, nicht nur den eigentlichen Text.

  1. Wählen Sie im Bereich „Selektoren“ von CSS Designer den „#menulink“-Selektor aus, und entfernen Sie alle Ränder des Elements. Dazu gibt es zwei Möglichkeiten:

    • Klicken Sie auf Kurzschrift festlegen, geben Sie 0 ein, und klicken Sie außerhalb des Feldes.
    • Oder klicken Sie auf das Verknüpfungssymbol in der Mitte des visuellen Tools (siehe Abbildung 5), und legen Sie für eine Seite den Wert 0 oder 0px fest.
fig05
Abbildung 5: Über das Verknüpfungssymbol schalten Sie die Anwendung desselben Wertes auf alle Seiten ein oder aus.
  1. Legen Sie die folgenden Properties fest:
text-align: center
background-color: #1E1E1E (the dark gray swatch in the CC Libraries panel)

Der Text ist nun zentriert ausgerichtet und steht vor einem schwarzen Hintergrund, der sich über die gesamte Breite des Wrapper-DIV-Elements erstreckt. Überschriften werden als Blockelemente behandelt, die die gesamte Breite des Containers einnehmen.

  1. Vergewissern Sie sich, dass in der Live-Ansicht das A-Element des Trigger-Links ausgewählt ist. Der Rahmen der Elementanzeige umschließt nur den Text (siehe Abbildung 6).
fig06
Abbildung 6: Nur der Link-Text kann angeklickt werden.
  1. Erstellen Sie einen Selektornachfahren für „#menulink a“. Legen Sie im Abschnitt „Text“ des Bereichs „Eigenschaften“ folgende Properties fest:
color: white
font-weight: 200
text-decoration: none
text-transform: uppercase
  1. Klicken Sie auf das Symbol für Layout , und erstellen Sie die folgenden Properties:
display: block
padding-top: 0.1em
padding-bottom: 0.1em

Sobald Sie die Property „display“ auf block setzen, erstreckt sich die Elementanzeige für das A-Tag über die gesamte Breite der Überschrift und macht so die gesamte Zeile zum klickbaren Element (siehe Abbildung 7).

fig07
Abbildung 7: Die Überschrift kann nun über die gesamte Breite des Bildschirms angeklickt werden.

Die Navigations-Links sind in einer ungeordneten Liste enthalten. Um sie zu formatieren, müssen Sie die Aufzählungszeichen sowie die Standardwerte für Ränder und Auffüllungen entfernen, die Browser auf Listen anwenden. Außerdem werden Sie die Listenelemente über die gesamte Breite des Bildschirms anklickbar machen, so wie zuvor den Trigger-Link.

  1. Wählen Sie im Bereich „Selektoren“ von CSS Designer den „#navlinks“-Selektor aus, und legen Sie im Abschnitt „Layout“ des Bereichs „Eigenschaften“ folgende Properties fest:
width: 100%
margin: 0 (all sides)
padding: 0 (all sides)
  1. Klicken Sie auf das Symbol für Text , und setzen Sie die Property „text-align“ auf center.

  2. Scrollen Sie zum Ende des Abschnitts „Text“, und entfernen Sie die Aufzählungszeichen, indem Sie für die Property „list-style-type“ den Wert none festlegen.

  3. Klicken Sie auf das Symbol für den Hintergrund , um zu den Hintergrund-Properties zu wechseln. Klicken Sie auf das Farbfeld neben „background-color“, um den Farbwähler zu öffnen. Die Standardeinstellung ist Schwarz, was Sie auch möchten. Doch sollte der Hintergrund nicht deckend, sondern halbtransparent sein.

    Wählen Sie unten im Farbwähler RGBa, und ziehen Sie den Regler für den Alphakanal (ganz rechts) um ungefähr ein Drittel der Skala nach unten. Der Wert im Feld links unten sollte rgba(0,0,0,0.65) oder so ähnlich lauten (siehe Abbildung 8).
fig08
Abbildung 8: Legen Sie mithilfe des Farbwählers einen halbtransparenten Hintergrund fest.

Das RGBa-Farbformat besteht aus vier Werten, die durch Kommata voneinander getrennt sind. Die ersten drei legen die Rot-, Grün- und Blauanteile der Farbe über einen Ganzzahlwert von 0 bis 255 fest. Der letzte Wert bestimmt den Alphawert der Transparenz und reicht von 0 (völlig transparent) bis 1 (völlig deckend).

Klicken Sie außerhalb des Farbwählers, um ihn zu schließen.

  1. Ältere Browser können das RGBa-Farbformat nicht interpretieren. Sie müssen daher unbedingt eine alternative Hintergrundfarbe festlegen. Dazu müssen Sie das Stylesheet in der Code-Ansicht manuell bearbeiten.

    Machen Sie im Bereich „Selektoren“ einen Rechtsklick bzw. Ctrl-Klick auf den Selektor „#navlinks“, und wählen Sie im Kontextmenü die Option Gehe zu Code (siehe Abbildung 9).
fig09
Abbildung 9: Über das Kontextmenü im Bereich „Selektoren“ können Sie direkt zu einer CSS-Anweisung im Stylesheet navigieren.

Die geteilte Ansicht wird geöffnet, und die Einfügemarke steht am Ende der ausgewählten CSS-Anweisung.

  1. Fügen Sie eine neue Zeile über der „background-color“-Definition ein, und geben Sie folgenden Code ein:
background-color: #000000;

Sobald Sie das #-Zeichen eingeben, öffnet sich der Farbwähler. Drücken Sie die Eingabetaste, um ihn zu schließen. Dreamweaver fügt den Hex-Wert für Schwarz ein. Vergessen Sie nicht das Semikolon (;) am Ende der Zeile. Die geänderte CSS-Anweisung sollte nun wie in Abbildung 10 aussehen.

fig10
Abbildung 10: Der Hex-Farbwert ist für ältere Browser wichtig.

Bei dieser doppelten Angabe der Farbe machen Sie sich die CSS-Kaskade zunutze. Der zweite Wert hat bei Browsern, die das RGBa-Format interpretieren können, Vorrang vor dem ersten Wert. Ältere Browser, die die RGBa-Angabe nicht erkennen, ignorieren die zweite Anweisung einfach. Sie nutzen den Hex-Wert und zeigen einen deckend schwarzen Hintergrund an.

  1. Schließen Sie die geteilte Ansicht, indem Sie auf die Schaltfläche Live-Ansicht klicken.

  2. Erstellen Sie einen Selektornachfahren „#navlinks a“ für die Links im Navigationsmenü, und legen Sie folgende Properties im Abschnitt „Layout“ fest:
display: block
padding-top: 10px
padding-bottom: 10px
  1. Klicken Sie auf das Symbol für Text , und legen Sie die folgenden Werte fest:
color: white
font-weight: 400
text-decoration: none
text-transform: uppercase

Ihr Navigationsmenü sollte nun wie in Abbildung 11 aussehen.

fig11
Abbildung 11: So sieht das fertig formatierte Navigationsmenü aus.

Die Navigations-Links sind immer noch in einer ungeordneten Liste enthalten. Durch die eben definierten Stile hat sich aber ihr Look komplett verändert.

Das Ein- und Ausblenden des Menüs wird über eine Kombination aus CSS und JavaScript bewerkstelligt. Wann immer der Trigger-Link angetippt oder angeklickt wird oder das Browser-Fenster schmaler als die vorgegebene Breite ist, tauscht der JavaScript-Code die Klasse für die ungeordnete Liste der Navigations-Links aus. Das Menü wird nur ausgeblendet, wenn JavaScript aktiviert ist.

Den JavaScript-Code werden Sie später mit der Seite verknüpfen. Zuerst kümmern Sie sich um die Formatierung des Navigationsmenüs im angezeigten Zustand.

  1. Die Position des Navigationsmenüs – ob ein- oder ausgeblendet – wird über die absolute Positionierung im CSS-Code bestimmt. Markieren Sie im Bereich „Selektoren“ von CSS Designer den „#navlinks“-Selektor, und setzen Sie die Property „position“ auf absolute. Sie finden die Property im Abschnitt „Layout“ des Bereichs „Eigenschaften“ direkt unter dem visuellen Tool für die Auffüllung.

    Sobald Sie das tun, rückt das Bild mit der Golden Gate Bridge hinter die Navigations-Links (siehe Abbildung 12).
fig12
Abbildung 12: Das Hauptbild bewegt sich nach oben, wenn die ungeordnete Liste der Navigations-Links absolut positioniert wird.

Das passiert, weil absolut positionierte Elemente aus dem normalen Fluss der Dokumentenelemente ausgeschlossen werden und auf einer separaten Ebene vor den anderen Elementen liegen.

  1. Fügen Sie im DOM-Bedienfeld eine Klasse zur ungeordneten Liste hinzu, indem Sie einen Doppelklick auf das „#navlinks“-Element machen und im editierbaren Feld ein Leerzeichen nach „#navlinks“ gefolgt von „.displayed“ (mit einem Punkt am Anfang) eingeben (siehe Abbildung 13). Klicken Sie außerhalb des Feldes, um die Änderung zu bestätigen.
fig13
Abbildung 13: Fügen Sie im DOM-Bedienfeld eine Klasse zur ungeordneten Liste hinzu.

Sie könnten die Klasse auch über die Elementanzeige zur ungeordneten Liste hinzufügen, aber diese Methode hier hat den Vorteil, dass nicht automatisch ein Selektor im Bereich „Selektoren“ von CSS Designer angelegt wird.

  1. Lassen Sie im Bereich „Selektoren“ den „#navlinks“-Selektor ausgewählt, und klicken Sie auf das Pluszeichen, um einen neuen Selektor anzulegen. Geben Sie im editierbaren Feld „#navlinks.displayed“ ein.

    Achten Sie darauf, dass sich kein Leerzeichen zwischen „#navlinks“ und dem Punkt am Anfang des Klassenselektors befindet. Dies ist kein Selektornachfahre: „#navlinks.displayed“ wirkt sich auf Elemente aus, die die ID „navlinks“ und die Klasse „displayed“ aufweisen.

  2. Legen Sie im Abschnitt „Layout“ des Bereichs „Eigenschaften“ mithilfe des visuellen Tools unter „position“ einen oberen Wert von 135px fest (siehe Abbildung 14).
fig14
Abbildung 14: Positionierte Elemente können von den Rändern des sie umschließenden Blocks abgesetzt werden.

Technisch ausgedrückt wird damit die absolute Position des Anfangs der ungeordneten Liste auf 135px unterhalb der Oberkante des sie umschließenden Blocks festgelegt. In diesem Beispiel ist der umschließende Block die Seite selbst, also wird die Liste 135px unter dem oberen Seitenrand gesetzt. Im siebten Teil des Tutorials erfahren Sie mehr über absolute Positionierung.

  1. Setzen Sie im Abschnitt „Layout“ die Property „z-index“ auf den Wert 1 und die Property „opacity“ ebenfalls auf 1.

    Um die Property „z-index“ festzulegen, wählen Sie im Dropdown-Menü value aus, und geben Sie 1 ein. Diese Property bestimmt die Stapelreihenfolge von positionierten Elementen und stellt sicher, dass das Navigationsmenü nicht versehentlich hinter anderen Elementen verschwindet.

    Für die Property „opacity“ können Sie einen Wert von 0 (völlig transparent) bis 1 (völlig deckend) festlegen. Das Menü wird während des Ein- und Ausblendens seine Deckkraft verändern.

  2. Erstellen Sie einen Selektor mit dem Namen „#navlinks.start“, und setzen Sie die Property „display“ auf den Wert none.

  3. Erstellen Sie einen Selektor mit dem Namen „#navlinks.collapsed“, und legen Sie folgende Properties fest:
top: –12em
opacity: 0

Der negative Wert für die Property „top“ führt dazu, dass der Anfang der ungeordneten Liste über den oberen Seitenrand hinaus aus dem Blickfeld verschoben wird. Durch die auf 0 gesetzte Property „opacity“ ist die Liste zudem unsichtbar.

  1. Um das Menü zu aktivieren, müssen Sie nun die JavaScript-Datei mit der Seite verknüpfen. Die Datei enthält eine Funktion, die nach benannten IDs sucht. Sie darf daher erst verknüpft werden, nachdem der komplette HTML-Code geladen wurde. Um das Skript an der richtigen Stelle einzufügen, wählen Sie in der Live-Ansicht den Footer aus, und wählen Sie dann Einfügen > HTML > Script.

  2. Das Skript muss nach dem Footer eingefügt werden, also wählen Sie im Dialogfeld für die Positionierungshilfe die Option Nach aus. Das Dialogfeld „Datei auswählen“ wird geöffnet. Navigieren Sie zum Ordner „js“ im Stammverzeichnis, und wählen Sie die Datei menu.js aus. Klicken Sie auf OK (Windows) bzw. auf Öffnen (macOS).

    Wenn alle Ihre CSS-Anweisungen und HTML-Komponenten korrekt sind, sollte das Navigationsmenü aus der Live-Ansicht verschwinden. Die Funktion in der JavaScript-Datei ändert nämlich die Klasse des Navigationsmenüs in „start“, wodurch die Property „display“ auf none gesetzt wird. Nur den Bruchteil einer Sekunde später wird die Klasse in „collapsed“ geändert, wodurch das Menü mit einem Klick auf den Trigger-Link eingeblendet werden kann.

  3. Klicken Sie auf das Wort „MENU“ über dem Bild mit der Golden Gate Bridge – das Navigationsmenü wird eingeblendet. Klicken Sie erneut darauf, und das Menü verschwindet wieder. Gestalten Sie den Übergang nun noch sanfter.

  4. Machen Sie im Bereich „Selektoren“ von CSS Designer einen Rechtsklick bzw. Ctrl-Klick auf den „#navlinks“-Selektor, und wählen Sie im Kontextmenü Gehe zu Code.

  5. Fügen Sie die folgenden zwei Code-Zeilen direkt vor der schließenden geschweiften Klammer der CSS-Anweisung #navlinks ein (Codehints helfen Ihnen dabei):
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;

Sie weisen den Browser an, mithilfe der Property „-webkit-transition“ die Übergänge aller Properties für das Element und seine Nachfahren über eine halbe Sekunde zu strecken. Die Property „ease-out“ verlangsamt den Übergang zum Ende hin.

Die geänderte CSS-Anweisung sollte nun wie in Abbildung 15 aussehen.

fig15
Abbildung 15: Die Property „transition“ gestaltet die visuellen Änderungen des Navigationsmenüs sanfter.
  1. Testen Sie das Navigationsmenü erneut. Dieses Mal sollte es sanft ein- und ausgeblendet werden.

  2. Wenn das Navigationsmenü angezeigt wird, klicken Sie auf den Link „Home“ in der Live-Ansicht. Klicken Sie in der Elementanzeige auf das Pluszeichen, und geben Sie im editierbaren Feld „.thispage“ ein, um dem Link diese Klasse zuzuweisen.

    Drücken Sie die Tabulatortaste oder die Eingabetaste, um die Änderung zu bestätigen. Falls das Popup-Bedienfeld erscheint, in dem Sie eine Quelle auswählen sollen, drücken Sie die Esc-Taste. Sie möchten keinen Selektor erstellen, denn diese CSS-Anweisung wird Teil eines viel komplexeren Selektors sein.

  3. Wählen Sie im Bereich „Selektoren“ von CSS Designer den „#navlinks a“-Selektor aus, und klicken Sie auf das Pluszeichen, um einen neuen Selektor anzulegen. Geben Sie die folgende Gruppe von Selektoren im editierbaren Feld ein:

    #navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage

    Damit werden die Navigations-Links mit den Pseudoklassen „:hover“, „:active“ und „:focus“ sowie der Navigationslink mit der Klasse „.thispage“ formatiert.

  4. Geben Sie im Abschnitt „Text“ des Bereichs „Eigenschaften“ für die Property „color“ den Wert #F68979 ein. Der Link „Home“ wird, wie die anderen Navigations-Links auch, beim Mouseover rosa.

  5. Speichern Sie Ihre Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Mögliche Probleme

Auch wenn bis hierhin alles gut gelaufen ist, könnte das Menü nicht wie vorgesehen funktionieren. Und das bedeutet leider, dass Sie irgendwo einen Fehler gemacht haben. Browser (und auch in gewissem Maße die Live-Ansicht von Dreamweaver) behandeln Fehler im HTML-Code mit Nachsicht. Sie können auch gut mit gelegentlichen Fehlern im CSS-Code umgehen. Bei JavaScript aber sind sie gnadenlos. Ein einziger Fehler und nichts funktioniert.

Das Skript in der Datei „menu.js“ verwendet eine sogenannte IIFE („iffy“ gesprochen). IIFEs sind „immediately invoked function expressions“, d. h. sofort ausgeführte Funktionsausdrücke. Sie benötigen drei Argumente: die ID des Trigger-Links, die ID der ungeordneten Liste und eine Zahl für den Breakpoint, ab dem das Menü ausgeblendet werden soll. Wenn Sie allen diesen Elementen unterschiedliche IDs zugewiesen oder sie unterschiedlich geschrieben haben, funktioniert die IIFE nicht. Sie wird auch nicht funktionieren, wenn Sie die Namen der Klassen „start“, „collapsed“ und „displayed“ falsch geschrieben haben. JavaScript achtet auf Groß- und Kleinschreibung, sodass es „menulink“ und „menuLink“ als völlig unterschiedliche Werte interpretiert.

Es können auch Fehler im CSS-Code passieren. Beispielsweise dürfen keine Leerzeichen in den letzten drei von Ihnen erstellten Selektoren vorkommen: „#navlink.displayed“, „#navlink.start“ und „#navlink.collapsed“. Überprüfen Sie auch, ob Sie am Ende jeder manuell eingegebenen CSS-Anweisung ein Semikolon (;) gesetzt haben.

Falls das Menü dann immer noch nicht funktioniert, vergleichen Sie Ihre eigenen Dateien mit den Beispieldateien im Ordner „part6“. Es spielt keine Rolle, falls die Zeilennummern abweichen. Achten Sie auf Unterschiede im Code. Dreamweaver lässt sich mit einem Drittanbieterprogramm für den Vergleich von Dateiinhalten integrieren, mit dem Sie Unterschiede leicht erkennen können. In der Dreamweaver-Hilfe erfahren Sie mehr darüber, wie Sie Dateien auf Unterschiede vergleichen.

Lassen Sie sich von Fehlern nicht entmutigen – sie sind ein wichtiger Teil des Lernprozesses. Auch Profis machen Fehler. Und sie wissen aus Erfahrung, wo sie nach ihnen suchen müssen und wie sie sie schneller korrigieren können.

Nächste Schritte

Das einspaltige Design für die Bayside Beat-Website ist nun fertig. In Teil 7 – Layout für Tablet und Desktop per Media Queries steuern werden Sie das Design in zwei Spalten anordnen und das Navigationsmenü anders formatieren.

04/13/2018

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?