Das vertikale Dropdown-Menü ist sehr praktisch - es spart Platz auf der Webseite und hilft gleichzeitig bei der einfachen Navigation auf der Website. Versuchen Sie, ein Dropdown-Menü basierend auf CSS - Cascading Style Sheets zu erstellen. Wenn Sie noch kein Experte in der Erstellung von CSS-Code sind, nutzen Sie den Service purecssmenu.com. Sie müssen einen Menütyp auswählen, sein Aussehen anpassen und dann an Ihre eigene Site anpassen. Der Dienst selbst generiert den erforderlichen Code, den Sie dann in die Dateien Ihrer Site einfügen.
Anleitung
Schritt 1
Registrieren Sie sich auf der Website purecssmenu.com, sonst können Sie das erstellte Menü nicht herunterladen. Klicken Sie links auf der Seite auf die Schaltfläche Vorlagen. Unten sehen Sie mehrere kleine Fenster mit Dropdown-Menüvorlagen, deren Anklicken eine Vorschau rechts im Vorschaufenster lädt. Wählen Sie eine Vorlage, die zu Ihrer Website passt
Schritt 2
Passen Sie Schriftart und Farbe des Menüs an: Verwenden Sie die Registerkarte Parameter. Wählen Sie im Feld Schriftart eine Schriftart, ggf. Schriftgröße, unterstrichen und fett aus. Legen Sie im Feld Farben den Menühintergrund, die Schriftfarbe sowie die Hover- und Hintergrund-Hover-Farben für die Schriftart fest
Schritt 3
Öffnen Sie die Registerkarte Elemente, um Menüelemente zu verwalten. Wenn Sie auf die Schaltfläche Papierkorb leeren klicken, werden die Beispielelemente gelöscht und Sie können Ihre eigenen erstellen. Drücken Sie dazu auf die Schaltfläche Artikel hinzufügen plus – der Artikel wird am Ende des Menüs hinzugefügt. Die Schaltfläche Nächstes Element hinzufügen wird verwendet, um ein Element nach der aktuell ausgewählten Zeit hinzuzufügen. Die Schaltfläche Unterpunkt hinzufügen erstellt einen Untermenüpunkt für die Auswahl. Um ein Element zu entfernen, verwenden Sie dementsprechend die Schaltfläche Element entfernen
Schritt 4
Achten Sie auf das Feld Artikelparameter unten auf der Site. Geben Sie in der Zeile Text den Namen des Menüelements an, in der Zeile Link die URL der Seite, zu der dieses Element führt. In der Tipp-Zeile können Sie eine Beschreibung des Artikels hinterlassen, die angezeigt wird, wenn Sie mit der Maus über den Link fahren. Die Zielzeile wird verwendet, um den Weg zum Öffnen der Seite zu bestimmen, zu der der Link führt. Der Parameter _self in dieser Zeile öffnet die Seite im selben Browserfenster wie das aktuelle
Schritt 5
Nachdem Sie das Menü eingerichtet haben, laden Sie es herunter - klicken Sie unten rechts auf der Seite auf die Schaltfläche Download (diese Funktion ist nach der Registrierung auf der Website verfügbar). Wählen Sie einen Ordner auf Ihrer Festplatte aus, in dem die Archivdatei gespeichert wird. Packen Sie es aus. Sie müssen den erforderlichen Code aus der Datei purecssmenu.html in die CSS-Vorlagendatei Ihrer Site kopieren. Öffnen Sie die Datei purecssmenu.html mit einem Texteditor und kopieren Sie den Code zwischen den und -Tags in die CSS-Vorlage Ihrer Site (diese Datei hat die Erweiterung.css und sieht in etwa so aus wie file.css). Fügen Sie nun den Code in Ihre Site-Vorlagendatei (Themen) ein - den Code von purecssmenu.html zwischen den Kommentaren und anstelle des regulären Menücodes. Dazu müssen Sie zumindest ein wenig mit der Programmierung vertraut sein. Stellen Sie sicher, dass Sie den Code in die richtige Datei einfügen und speichern.
