mit einer ID von "Fade", die unsere schwarze Abdeckung sein wird, die den Inhalt verdunkelt, wenn das Menüsymbol angeklickt wird.
Schließlich rufen wir jQuery von Google und unsere eigene Skriptdatei, wo wir in ein bisschen arbeiten werden. Aber zuerst gehen wir durch die Stile.
Styling mit CSS
Wir werden also nicht alle CSS-Stile durchgehen (wenn Sie möchten, dass Sie in der Demo "inspizieren" können), da sie größtenteils für das allgemeine Aussehen der Seite verwendet werden, was nicht das Ziel ist dieses Artikels. Wir werden es aufteilen und ein paar Code-Abschnitte betrachten, die für den Effekt wichtig sind. Also, zuerst einmal:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Wir kicken die Dinge, indem wir sicherstellen, dass, wenn der Browser des Benutzers kein JavaScript zur Verfügung hat (das ist der Klassenname auf dem HTML-Element, das wir zuvor mit Modernizr gesehen haben), dann zeigen wir das # Fallback-Nav in der Kopfzeile und wir werden das #fade DIV sowie das Navigationssymbol ausblenden. Dies ist unsere Fallback-Lösung, so dass das Fallback-Menü auf eine traditionellere Art und Weise gestaltet werden muss. Wir verstecken diese Lösung auch, wenn JavaScript verfügbar ist, wie Sie in der letzten Zeile sehen können.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Also in diesem Abschnitt stylen wir unser Menüsymbol in der Kopfzeile, es ist ziemlich einfach, es gibt ihm nur eine relative Position und einen hohen Z-Index (was später nützlich ist, wenn der Rest des Inhalts ausgeblendet wird, bleibt er eingeschaltet) oben). Wir ändern auch die Farbe in Weiß, wenn es eine Klasse von "Öffnen" gibt, die wir mit jQuery hinzufügen und entfernen. Wir können auch sehen, dass das einzelne div mit einer ID von "fade" sich ausdehnt, um den gesamten Bildschirm zu füllen und mit einem soliden Schwarz mit einer 50% Transparenz gefüllt wird. Wenn der Benutzer kein JavaScript hat, wird dieser schwarze Filter ausgeblendet, andernfalls werden wir ihn mit jQuery ausblenden. Nun schauen wir uns das Menü selbst an:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Also last but not least das Hauptmenü. Ich muss zuerst hinzufügen, dass dies der vereinfachte Code ist, der ziemlich viele Anbieterpräfixe benötigt, bevor er browserübergreifend kompatibel ist. Um dies zu erreichen, empfehle ich ein tolles Tool wie Autoprefixer um alle korrekten Präfixe für Sie hinzuzufügen.
Lassen Sie uns einen Blick darauf werfen, was damit verbunden ist: Zuerst hat es eine feste Positionierung oben auf der Seite und negative 250px auf der rechten Seite. Dies bedeutet, dass es dort ist, aber nur "außerhalb des Bildschirms" (wie es eine maximale Breite von 250px hat). Die Höhe ist ebenfalls 100%, so dass es das gesamte Fenster von oben nach unten ausfüllt. Das Menü benötigt außerdem einen Z-Index zwischen 0 und 9 (über dem Schwarzfilter). Dann, wenn die Magie passiert, hat sie eine Anzeige: flex; Eigenschaft, sowie eine andere verknüpfte Eigenschaft von 'flex-direction' (die wir hier auf "column" eingestellt haben, statt ihrer Standard "row", was bedeutet, dass die flex item children - die Links im Menü - die gesamte Höhe von sein Elternteil in gleichen Teilen).
Das ist also alles auf den Menühalter # main-nav ausgerichtet, und als nächstes geben wir ihnen beim Stylen der Links einen Flex-Wert von 1. Das ist es, was bewirkt, dass die Links die gesamte Höhe gleichmäßig ausfüllen. Dann erhalten diese Links auch einen Anzeigewert von "flex", was bedeutet, dass alle Elemente innerhalb der Links davon betroffen sind. Wir stellen sicher, dass die Flex-Richtung immer noch "Spalte" ist und fügen dann eine Eigenschaft von "justify-content: center;" hinzu. Dies macht den Text selbst innerhalb der Links auch vertikal zentriert (deshalb gibt es divs innerhalb der ![]()
Tags der # main-nav, die nicht genau semantisch ist, aber eine sehr schnelle und einfache Möglichkeit ist, Objekte vertikal zu zentrieren.)
Jetzt können wir nichts mehr sehen, was wir gerade getan haben. Jetzt müssen wir unsere Funktionalität mit unserer eigenen scripts.js-Datei ergänzen, die wir zuvor aufgerufen haben.
Hinzufügen der Funktionalität mit jQuery
Das Skript für diesen Effekt ist sehr klein und einfach, aber ich werde es zuerst hier erklären und dann erklären, was passiert:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"Überlauf": "Versteckt"}); $ ('# main-nav'). Animate ({right: "0"}, 400); $ (this) .removeClass ('closed' ) .addClass ('open') .html ('x'); $ ('# verblassen'). fadeIn (); } sonst if ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"Überlauf": "scroll"}); $ ('# main-nav'). Animate ({right: "-250px"}, 400); $ (diese) .removeClass ('open ') .addClass (' geschlossen ') .html (' ☰ '); $ (' # verblassen '). fadeOut (); }});});
Also verstecken wir zuerst den schwarzen Filter. Dann werden alle, die wir tun, in einer Funktion enthalten sein, die an ein Klick-Ereignis angehängt ist, das an den Menü-Icon-Link gebunden ist. Wenn das angeklickt wird, haben wir zwei verschiedene Fälle oder Situationen; Einer ist, wenn das Menü bereits ausgeblendet ist (wie der Standardzustand) oder einer, wenn das Menü angezeigt wird. So hat der Menüikonenlink einen Klassennamen von geschlossen, den wir hinzugefügt haben, und wir haben ihn auch für open formatiert. Unsere erste "Wenn" -Anweisung ist, dass wenn der Link geschlossen ist (daher Standard). Wenn das der Fall ist, dann das Ganze
Element wird 250px nach links animiert und stoppt das Scrollen der Seite. Das # main-nav-div wird ebenfalls an Ort und Stelle animiert, wir ändern den richtigen Wert von -250px auf 0. Dann entfernen wir die Klasse von 'closed' aus dem Link und fügen eine von 'open' hinzu Ändern Sie den HTML-Code aus dem Sonderzeichen von drei Zeilen in ein "x". Schließlich verblassen wir unseren schwarzen Filter, um den Rest des Inhalts dunkel zu machen. Und das ist es! Das gibt uns den offenen Zustand des Menüs.
Jetzt zielt die "else if" -Anweisung auf die offene Klasse in der Menüverknüpfung. Wenn das der Fall ist, machen wir das Gegenteil von dem, was wir vorher gemacht haben, indem wir den Körper wieder in Position bringen und das Menü wieder aus dem Bildschirm bewegen. Entfernen Sie die Klasse von "Öffnen" aus dem Menüsymbol, fügen Sie "geschlossen" hinzu und ändern Sie den Inhalt zurück zum Symbol sowie das Ausblenden unseres #fade div. Wenn alles nach Plan läuft, sollte die Funktionalität so aussehen:
Fazit
So, da haben wir es! Das ist eine Möglichkeit, diesen coolen Effekt zu machen, den wir immer mehr mit dem Stil des modernen Webdesigns sehen, besonders bei mobilen Designs. Dieser Effekt ist eine nette und einfache Lösung, die keine Plugins benötigt und vollständig an die Bedürfnisse jedes Projekts angepasst werden kann. Es war auch eine Chance, flexbox sowie einige andere nützliche Werkzeuge zu verwenden. Lass mich in den Kommentaren wissen, ob du irgendetwas anders gemacht hast oder nur, was du gedacht hast!
Ausgewähltes Bild / Vorschaubild, Schiebetür Bild über Shutterstock.
