Die 'Dashboard'-Funktion auf einem Mac sieht gut aus, und das Menü, in dem Sie Widgets hinzufügen oder entfernen können, ist eine gut konzipierte Funktion. Ein ähnlicher Effekt kann einer Website eine völlig neue Funktionalität verleihen, indem sie oben auf einer Seite ein einfaches Slide-Down-Menü bietet. Dieses Tutorial führt Sie durch den Prozess vom Anfang bis zum Ende.
Bevor Sie beginnen, können Sie die Demo ausprobieren oder den vollständigen Quellcode hier herunterladen.
Ab Photoshop starten
1) Erstellen Sie einen Gitterwiederholungshintergrund.
Beginnen Sie mit der Erstellung eines 56 (B) x 64 (H) px-Bildes in Photoshop. Machen Sie dann einen 3-farbigen Farbverlauf von # 111111 zu # 313131 und schließlich zurück zu # 111111. Es sollte so aussehen.
Nun ist es Zeit, die Grübchen hinzuzufügen.
Wählen Sie das Pinselwerkzeug aus und wählen Sie einen quadratischen Pinsel mit der Größe 2px und # 000000 aus. Erstellen Sie eine neue Ebene und stellen Sie sicher, dass sie ausgewählt ist. Beginnen Sie, indem Sie einen Punkt irgendwo auf dieser neuen Ebene erstellen. Bewegen Sie diesen Punkt nun 3px vom oberen Rand des Bildes und 1px von der linken Seite. Sie können diese Ebene dann 11-mal duplizieren (Sie haben also insgesamt 12 Punkte) und jedes Mal den Punkt um 5 Pixel nach unten verschieben.
Sie können jetzt alle diese Ebenen zusammenführen (mit Ausnahme des Hintergrunds). Duplizieren Sie diese neue Punktreihe sechsmal und verschieben Sie sie jedes Mal um 8px nach rechts.
Duplizieren Sie die erste erstellte Zeile noch einmal und verschieben Sie sie 4px nach rechts und 2px nach unten. Diese neue Zeile kann auch 6 Mal dupliziert und jeweils um 8 Pixel nach rechts verschoben werden. Sie sollten jetzt den Hintergrund des Dashboards haben.
2) Suchen Sie nach einem Symbol-Pack, wie es in diesem Lernprogramm verwendet wird. Meine wurde gefunden unter: http://www.smashingmagazine.com/2008/10/01/dellipack-2-a-free-icon-set/
3) Erstellen Sie einen Textbereich für die Symboltipps.
Erstellen Sie ein neues Bild 292px (B) x 34px (H) und erstellen Sie eine neue Ebene. Löschen Sie die Hintergrundebene. Zeichnen Sie jetzt wieder einen abgerundeten Rechteckpfad, genau wie wir es für das Symbol getan haben. Dieses Mal soll es 290px (B) x 32px (H) sein, und eine Auswahl wird erneut mit einem weißen Element gefüllt. Setzen Sie die Füllung auf dieser Ebene auf 10%. Jetzt müssen Sie nur noch einen weißen Strich um das Bild herum hinzufügen, so dass Sie sich hier befinden. (Ich habe dem Beispiel einen schwarzen Hintergrund hinzugefügt, den Sie nicht haben werden, nur damit Sie sehen können, wie es aussehen sollte.)
Jetzt sind wir bereit, etwas HTML und CSS hinzuzufügen und es zu machen!
HTML und CSS
Um dieses Beispiel erstellen zu können, benötigen Sie die neueste J-Query-Version.
Zuerst müssen Sie den HTML-Code vorbereiten. Wir werden DIV-Tags benötigen, eines als Gesamtcontainer für alles, was sicherstellt, dass das Dashboard die Breite des Browserfensters umfasst. Der andere dient als Container für die Icons und hält sie innerhalb einer Breite von 945px. Dadurch wird sichergestellt, dass sie bei den meisten Bildschirmauflösungen sichtbar sind.
Wie Sie hieraus sehen können, habe ich ein Stylesheet mit dem Namen index.css angehängt. Ich habe diesem Stylesheet ein paar Styles hinzugefügt, um sicherzustellen, dass diese DIV so aussehen und funktionieren, wie ich es mir wünsche.
Das Hintergrundbild hat ein wiederholtes x, damit das Bild die Breite des Browserfensters überbrücken kann. Die Höhe sollte dieselbe Höhe haben wie die zuvor erstellte Datei 'gratingRepeat.png'.
Der Vorschubcontainer hat eine Breite von 945 Pixel, damit selbst kleinste Bildschirmauflösungen das Dashboard vollständig anzeigen können. Ich gestalte meine Websites immer mit einem Minimum von 1024 x 768, da dies zum Zeitpunkt des Schreibens die häufigste Bildschirmauflösung ist. Durch die Einstellung von margin: automatisch für den Container zentriert der Browser die Symbole, unabhängig davon, wie breit der Browser eingestellt ist. Damit dies funktioniert, muss das Element eine Breite haben.
Das nächste, was wir hinzufügen müssen, ist der UL, der alle unsere Icons enthält.
Wie Sie sehen, ist jedem LI eine andere Klasse zugeordnet. Auf diese Weise können wir jedem Symbol unterschiedliche Attribute zuweisen. Benennen Sie Ihre Klassen so, dass sie dem Symbol entsprechen, damit Sie wissen, wo Sie alles ablegen sollen.
Zuerst werden wir die wichtigsten Bereiche des Stylings auf UL und LI durchgehen.
Erstens, der UL-Listenstil: Keiner entfernt unerwünschte Aufzählungspunkte. Ich habe auch eine Auffüllung: 0 und Marge: 0 hinzugefügt. Hier sollten alle Browser-Kompatibilitätsprobleme gestoppt werden, um Dinge in unerwarteten Bereichen zu platzieren. Ich habe diese Attribute auf der gesamten Site auf UL gesetzt, da wir später einen anderen UL verwenden werden und diese Einstellungen ebenfalls gelten werden.
In der advanceList habe ich mich entschieden, die Icons mit der Float-Methode zu positionieren. (Ich finde, dies gibt mir die größte Kontrolle über die Positionierung.) Die Breite ist beim Schweben wichtig, um eine genaue Positionierung zu gewährleisten. Ich habe 645px gewählt, weil wir Platz für den Spitzenbereich lassen müssen, der später hinzugefügt wird.
Die LI in diesem UL wurden dann mit einer Höhe und Breite (der gleichen Höhe und Breite wie die Symbole) versehen und dann nach links verschoben. Dadurch wird der LI in einer horizontalen Linie platziert, wodurch die standardmäßige vertikale Ausrichtung von UL überschrieben wird. Der linke Rand wird hier auf jeden einzelnen LI gesetzt, was bedeutet, dass zwischen jedem Symbol eine Lücke von 15 Pixeln besteht.
Der nächste Abschnitt von CSS muss für jede Symbolklasse wiederholt und geringfügig geändert werden. Ich werde ein Beispiel zur Orientierung hinzufügen. Es ist sehr einfach, den Hintergrund auf icon.png einzustellen und dann den Hintergrund für den Schwebeflugstatus des Symbols festzulegen. Das heißt, wenn das Symbol über (in allen Browsern außer IE6) angezeigt wird, ändert sich die Farbe des Symbols.
Stellen Sie sicher, dass Sie diese Änderung für jedes Symbol, das Sie verwenden möchten, ändern. Stellen Sie sicher, dass Sie auch das Bild ändern, das sie als Hintergrund verwenden.
Zum Schluss fügen wir den Tip-Bereich hinzu und stylen ihn. Das HTML ist dem des Icon-Sets sehr ähnlich. Verwendung von UL und LI. Wir verwenden jedoch nur ein LI mit einer Reihe verschiedener DIV-KLASSEN.
Obwohl dies wie ein entmutigendes Stück Code aussehen kann, ist es in der Tat sehr einfach. Jedes DIV bezieht sich auf ein Symbol, und bei Verwendung von CSS ist jeweils nur ein oder kein DIV sichtbar. Geben Sie jedem DIV eine eigene Klasse in Bezug auf das hervorgehobene Symbol. Dies wird im nächsten Schritt benötigt.
Zu Beginn habe ich den UL nach rechts geschoben und ihm eine Breite gegeben. Dadurch wird der Spitzenbereich rechts von den Symbolen positioniert, da die Breite des Symbols UL es zulässt, dass sich beide Elemente auf derselben Linie befinden.
Ich habe der Klasse dann einen Hintergrund gegeben, der in die zuvor erstellte textArea.png geladen wurde. Dies wurde mit einer Höhe versehen, um sichtbar zu sein.
Ich muss jede DIV-Klasse anzeigen: Keine bedeutet, dass jede DIV innerhalb der LI zunächst ausgeblendet wird. Wir werden Javascript verwenden, um sie später zu aktivieren.
Jedes DIV ist auf dieselbe Höhe und Breite wie textArea.png eingestellt. Dies bedeutet, dass wir den Text genau darin positionieren können. Text ausrichten: zentriert verschiebt den gesamten Text in die Mitte des DIV und damit in den Textbereich. Schließlich die Zeilenhöhe: 35px; stellt sicher, dass der Text vertikal zentriert ist. Dieser Wert hängt von der Schriftgröße und der Schriftfamilienauswahl ab. Hier ist möglicherweise ein Versuch und ein Fehler erforderlich.
Zum Schluss benötigen wir eine Schaltfläche, um das Dashboard sichtbar zu machen. Außerhalb der beiden DIV haben wir einen Link eingefügt und ihm eine Klasse von advanceMenuBtn gegeben. Dies wird benötigt, wenn Sie es später im Javascript aufrufen.
Wenn Sie dies in einen Browser laden, können Sie das Dashboard oben sehen und die Symbole ändern ihre Farbe, wenn Sie den Mover darüber platzieren. Sehr aufregend!
Nun ist es Zeit, die Javascript-Funktionalität hinzuzufügen. Stellen Sie sicher, dass Sie das nachfolgende Javascript innerhalb der HEAD-Tags oben auf Ihrer Seite platzieren.
Dieser erste Codeabschnitt ändert die Sichtbarkeit des Dashboards, wenn Sie auf die Schaltfläche advanceMenuBtn klicken. Um sicherzustellen, dass das Dashboard unsichtbar wird, sollten Sie jetzt eine Anzeige platzieren: none im advanceMenu DIV im CSS.
In der zweiten Zeile dieses Blocks wird die Funktion so eingerichtet, dass sie ausgeführt werden kann, wenn die Seite bereit und geladen ist. Dies bedeutet, dass sie immer funktioniert, wenn die Seite sichtbar ist. Die nächste Zeile konzentriert sich auf den advanceMenuBtn und richtet eine weitere Funktion ein, die ausgeführt wird, wenn diese Schaltfläche angeklickt wird. Bei der Verwendung von JQuery zum Fokussieren auf Elemente ist die verwendete Syntax der von CSS sehr ähnlich. Zuerst deklarieren Sie den Elementtyp mit 'a' und dann die Klasse mit '.advanceMenuBtn.'
Die nächste Zeile ruft dann das Dashboard auf und gibt an, welche Funktion ausgeführt werden soll, und gibt eine Variable an, in der angegeben wird, wie sie ausgeführt wird. slideToggle ist eine JQuery-Funktion, die in das Framework integriert ist und an die verschiedene Geschwindigkeitsvariablen angehängt sind. Sie können zwischen langsam, normal oder schnell wählen. Das Dashboard wird jetzt beim Anzeigen der Seite ausgeblendet. Wenn Sie auf den Link klicken, wird das Dashboard angezeigt.
Das letzte Stück von javscript bewirkt, dass im Textbereich der Hinweis angezeigt wird, wenn sich der Benutzer über einem Symbol befindet. Dieses Skript ist sehr wiederholend, daher zeige ich Ihnen ein Beispiel, das für die anderen Symbole leicht angepasst werden muss.
Dieses Skript ist wiederum sehr einfach und sehr effektiv. Wie bereits in der dritten Zeile angegeben, kann die Funktion nach dem Laden der Seite wieder verwendet werden. Die nächste Zeile ruft dann das Symbol mit einer Infoklasse auf und legt fest, dass eine Funktion ausgeführt wird, wenn der Benutzer die Maus darüber legt.
Als Nächstes wird die Klasse, in der der mit dem Symbol verknüpfte Text angezeigt wird, fokussiert und zu ".show" aufgefordert, wenn dies geschieht. Diese Funktion muss dann umgedreht werden, damit andere Textausschnitte angezeigt werden, wenn andere Symbole darüber angezeigt werden.
Die letzten Zeilen führen genau die Umkehrung der ersten Funktion durch, wobei "mouseover" in "mouseout" und ".show" in ".hide" geändert wird.
Diese beiden Funktionen müssen dann für jedes Symbol wiederholt werden, wobei die Klassen geändert werden, die zur Koordinierung mit dem betreffenden Symbol aufgerufen werden.
Jetzt sollten wir bereit sein, es in seiner Gesamtheit zu sehen!
Schauen Sie sich die Demo an und laden Sie den vollständigen Quellcode hier herunter
Gut gemacht und ich hoffe, Sie können dies gut nutzen.
Bitte beachten Sie, dass dieses Beispiel in IE6 nur in begrenztem Umfang von diesem Browser verwendet werden kann, da IE6 die Hover-Funktion nicht versteht. Es gibt jedoch Korrekturen dafür, die mit weiterem Javascript gefunden werden können.
Prosems - Ecommerce-Webdesign- und Entwicklungslösungen