Willkommen zurück zum Kurs von KnowledgeCity auf Cascading Style Sheets. Ich bin Cliff Brozo, ich bin dein Lehrer. Und heute hast du es erraten, Wir werden über Menüs sprechen. Wir werden uns einige Dropdown-Menüs ansehen. Wir werden die Animation in Form eines Kreises betrachten. Wir wischen über das Seitenleistenmenü. Wir werden untersuchen, was ein klebriges unteres Menü ist. und am Ende wird es einen Bonus geben. Bist du hungrig zu lernen? Ich bin, lass uns gehen. Wir beginnen mit einem einfachen Dropdown-Menü. Das Dropdown-Menü kann ebenso viele Dropdowns enthalten wie es Dir gefällt. In diesem Fall befindet sich dieser auf der rechten Seite des Bildschirms. Wir werden uns die Animation ansehen. Und wenn Sie auf ein Hamburgermenü klicken können, und plötzlich haben wir Untermenüs, die auftauchen. Und ich werde dich bitten, dich zu erinnern einige Ihrer Geometrie der 10. Klasse während wir die x-, y- und z-Ebenen im 3D-Raum diskutieren. Gleitende Navigationen kommen von der Seite heraus Wenn Sie auf ein geöffnetes Menü klicken, und Sie haben die Wahl zwischen Untermenüs, sobald diese geöffnet sind. Natürlich können Sie dann das Menü schließen. Sticky Bottom-Menüs sind Dinge, an die wir gewöhnt sind Wenn Sie jemals Ihr Telefon benutzt haben, Alle Navigationen unten. Und natürlich können wir das auch auf einer Webseite tun. Schließlich sprach ich ein wenig über einen Bonus, Wir werden uns ansehen, wie Sie Symbole als Teil Ihres Menüs einfügen. Werfen wir einen Blick darauf, wie all diese Dinge funktionieren. Wir beginnen mit einem Dropdown-Menü. Der Code dafür hat gerade HTML ungeordnete Liste, welches ein, zwei, drei Elemente kennzeichnet, und ein viertes Element, das das Dropdown-Menü ausführt. Ich habe eine Klasse namens Drop Button erstellt. Und das ist in CSS. Und das werde ich anrufen, Damit diese Dropdown-Funktion funktioniert. Werfen wir einen Blick darauf, wie es funktioniert. Nichts passiert, wenn ich über der Wissensstadt schwebe. Nichts passiert, wenn ich über Computerprogrammierung schwebe. Für die Symbolleiste passiert nichts. Aber wenn ich zu CSS komme, Das ist derjenige, der die Klassen-Drop-Schaltfläche hat. Was es mir erlaubt zu tun, Wählen Sie Untermenüs aus dieser Liste. Wenn ich über ihnen schwebe, ändern sich die Farben, und genau das wird in CSS gehandhabt. Hier ist der Code. Der Hauptteil dieses Codes befasst sich mit dem Dropdown-Inhalt. Der Rest ähnelt normalen Navigationsmenüs. Aber unser Dropdown-Inhalt erlaubt mir, über etwas zu schweben und ändern Sie die Farben aufgrund dieses Schwebebereichs. Während normalerweise meine Hintergrundfarbe ist Zitronen-Chiffon in der Dropdown-Liste. Wenn ich schwebe, habe ich die Hintergrundfarbe geändert zu Dodger blau. Das passiert in Zeile 56. Im CSS wird die Farbe Zitronenchiffon, und die Hintergrundfarbe ist Dodger blau. Als ich wegziehe, und ich schwebe nicht über diesen Gegenständen, dann ist die Hintergrundfarbe Zitronenchiffon, und die Textfarbe ist Dorger blau. Noch etwas zu diesem Dropdown-Listenfeld. Wir haben einige Hintergrundschattierungen. Und wie Sie sehen können, habe ich hier einen Kastenschatten in Zeile 41. Sie werden sich an Boxschatten aus einer früheren Lektion erinnern wo wir darüber gesprochen haben wie weit der Schatten nach rechts geht, wie weit unten, wie viel Streuung, und was die Farbe des Schattens tatsächlich ist. Auf diese Weise können wir ein Dropdown-Listenmenü erstellen. Als nächstes ist unser Kreismenü. Unser Kreismenü wird in einem Browser voller Größe angezeigt. In der Mitte habe ich einen Kreis mit drei Linien, und das sieht aus wie ein normales Hamburgermenü. Und ich habe in der x-, y- und z-Ebene hinzugefügt um zu zeigen, wie sich diese Linien tatsächlich bewegen werden. Wenn ich über das Menü schwebe, wird es größer. Wenn ich darauf klicke, werden die Untermenüs angezeigt. Wenn ich erneut klicke, um es zu schließen, Die Menüs verschwinden. Werfen wir einen Blick auf den dahinter stehenden HTML-Code. Der Code ist Standard. Ich beginne mit dem Bild, das mir meine kleine Grafik zeigt von x, y und z. Und dann benutze ich den Eingabetyp des Kontrollkästchens damit ich weiß, wann etwas angeklickt wurde und wenn sie auf das Menü Öffnen klicken, Ich weiß, dass ich diese Funktion aufrufen soll, wenn sie auf das X klicken, Ich weiß, dass ich das Menü schließen soll. Der Teil über die Geometrie der 10. Klasse kommt jetzt herein. Wir haben drei Zeilen, und diese drei Linien werden sich bewegen, Der mittlere wird verschwinden. Die anderen beiden werden sich auf und ab drehen. Und Sie müssen genau hinschauen, wie das passiert. Die Elemente, die herausspringen sind die Elemente in meinen Links zu anderen Seiten. Klicken wir mehrmals darauf, um zu sehen, ob es passiert. Jetzt musst du genau hinschauen, Was passieren wird, ist die obere rechte Ecke wird um 45 Grad fallen. Die untere rechte Ecke wird um 45 Grad steigen. und das wird den Buchstaben X bilden. Wie das passiert, Die mittlere Linie wird verschwinden. Lass uns ein paar Mal zuschauen. Schau genau hin, wenn ich ein paar Mal darauf klicke. (flotte Musik) Schauen wir uns den CSS-Code an. Wir beginnen mit unserem offenen Knopf. Die Schaltfläche Öffnen ist mit einem Randradius von 100% codiert. Und das gibt mir einen perfekten Kreis. Ich erstelle die Breite und Höhe dieses Kreises bei 80 Pixel und ich habe es in eine absolute Position gebracht. Ich verschiebe es 85 Pixel vom linken Rand, und als es sich öffnet, möchte ich den Übergang erleichtern. Jetzt werden Sie feststellen, dass dieser Code von Zeile 32 bis 37 scheint zweimal geschrieben zu sein. Und das liegt an verschiedenen Browsern müssen den Code auf verschiedene Arten sehen. Der Dash-WebKit-Abschnitt ist für Browser konzipiert, die es so sehen müssen, wie die anderen Browser kann nur mit einer geraden Transformation umgehen. Ich werde die Dinge in einen dreidimensionalen Raum übersetzen. Und ich habe einen x-Standort, einen Standort, und az Lage. Wenn Sie x als hin und her betrachten, ist y links und rechts, und z ist auf und ab, Sie bekommen eine Vorstellung davon, wie sich diese Dinge bewegen im dreidimensionalen Raum.
