Einige Webmaster möchten keine Zeit damit verschwendenEntwicklung von einfachen Elementen, die bereits existieren. Sie glauben, dass es keinen Sinn macht, ihre Zeit mit etwas zu verschwenden, das schon lange da ist. In der Tat ist es für diejenigen, die nur HTML und CSS lernen, wichtig, viele Dinge selbst zu tun, um ihre Arbeit gut zu verstehen. Dies gilt auch für das Menü. Lassen Sie uns ein vertikales CSS-Menü erstellen. Es wird nur auf HTML und CSS basieren, kein Javascript oder JQuery. Jedes Menü ist eine Liste von Links, die zu den Seiten der Site führen.
Hauptschritte
Um ein einfaches vertikales CSS-Menü zu erstellen, ist die folgende Abfolge von Schritten erforderlich:
1. Definieren Sie zunächst die Liste der Links (mithilfe von HTML-Code), aus denen das Menü besteht. Gib ihnen folgende Namen:
- Zuhause.
- Unsere Geschichte.
- Führung.
- Dienstleistungen.
- Kontakte.
2. Gestalten Sie als Nächstes die Links mithilfe von CSS wie gewünscht.
Schreiben wir den HTML-Code, speichern ihn in der Datei my_Vmenu.html und sehen, wie er im Browser aussieht:
Dies ist die Basis (Skelett) unserer Speisekarte. # 1, # 2 usw. muss durch Links ersetzt werden. Sehen Sie, wie alles in einem Browser aussieht. Das Bild wird dir nicht gefallen. Jetzt müssen wir die Stile der Elemente beschreiben, um ein vollwertiges vertikales CSS-Menü zu erstellen.
Beschreibung der Stile
Erstellen Sie eine Datei my_Vmenu.CSS, in dem Sie festlegen können, was Sie möchten, um das Erscheinungsbild eines so wichtigen Elements der Site zu verbessern. Unten finden Sie den Code, der das vertikale CSS-Menü einbettet. Schreiben Sie es in die erstellte Datei, und dann werden wir uns genauer ansehen, was die hier angegebenen Hauptzeilen bedeuten.
Detaillierte Beschreibung der verwendeten Stile
Schauen wir uns nun unser vertikales CSS-Menü genauer an:
ul # my_Vmenu ist der allgemeine Stil der gesamten Liste.
ul # my_Vmenu li a - Verknüpfungsstil zwischen li-Tags.
ul # my_Vmenu li a: hover ist eine Beschreibung der Art der Elemente im betreffenden Menü, wenn eine Person über einem von ihnen schwebt.
ul # my_Vmenu li a span - Textbeschreibung (Menünamen).
Denken Sie daran, dass die Dateien my_Vmenu.css und my_Vmenu.HTML muss in einem Verzeichnis gespeichert werden. Sie können sich jedoch in verschiedenen Ordnern befinden. Dann ist es wichtig, den Pfad zu my_Vmenu.css in der Datei my_Vmenu.html zu registrieren. Seien Sie vorsichtig, da Anfänger häufig Probleme damit haben.
Der Stil muss zwischen den Head-Tags in der HTML-Datei enthalten sein. menu_1.png und menu_2.png sind Bilder zum Anzeigen eines Menüelements im Normalzustand und beim Bewegen des Mauszeigers.
Speichern Sie die Bilder besser in einem separaten Ordner fürBilder, nennen Sie es my_images, aber korrigieren Sie dann den CSS-Code. Schreiben Sie, wo diese Bilder angezeigt werden, dass sie sich in diesem Verzeichnis befinden: URL (my_images / menu_1.png) und URL (my_images / menu_2.png).
In den übrigen im CSS-Code beschriebenen Eigenschafteneinfach zu verstehen. Sie definieren das Erscheinungsbild unserer Speisekarte. Es ist leicht zu erkennen, dass die Breite und Höhe der Punkte für die Punkte im Normalzustand und wenn Sie mit der Maus darüber fahren, gleich eingestellt sind. Die Schriftgröße beträgt 18 Pixel. Durch Auffüllen wird der Abstand auf verschiedenen Seiten der Elementtitel festgelegt. Mit der Anzeigeeigenschaft können Sie die Anzeige in Blöcken festlegen, um die Breite und den Abstand festzulegen.
Unser vertikales Menü
Wie Sie sehen können, sind vertikale CSS-Menüs einfach zu erstellen. Basierend auf der Wissensdatenbank können Sie sie für Besucher Ihrer Internetressource schön und attraktiv machen! Verwenden Sie Ihre Fantasie, und dann wird ein stilvolles Menü Ihre Website dekorieren.
