Vertikal CSS-Menü: et mécht Dir selwer

Verschidden Webmasteren wëllen net Zäit ze verwierklechen entwéckelen aus einfachen Elementer déi schonn existéieren. Si gleewen, datt et keen Sënn fir Är Zäit ze verschwenden ass wat laang schonn do war. Tatsächlech sinn déi Leit, déi just HTML an CSS léieren, ganz wichteg ze maachen fir hir Aarbecht ze verstoen. Dëst gëllt fir de Menü. Erstelle e vertikale CSS-Menü. Et wäert nëmmen op HTML an CSS baséiert, ouni Javascript a JQuery benotzen. All Menü ass eng Lëscht vu Links déi zu de Säiten vun der Säit féieren.

Grondstuf

Zu engem einfachen schafen vertikalen Menü CSS, braucht Dir folgend Schrëtt:

1. Fuerder d'Bestëmmung vu Linken (mat HTML-Code) aus der aus deem d'Menü besteet. Nëmme si Nimm, zum Beispill, sou:

1. Home.
2. Eis Geschicht.
3. Leadership.
4. Servicer.
5. Kontakter.

2. Dann wäerte mir d'Linken op Wëllen mat CSS stiliséieren.

Mir schreiwen der HTML Code, halen an my_Vmenu.html Fichier a gesinn, wéi et an der Browser Wanterschlof wäerten:

Dëst ass d'Basis (Skelett) vun eisem Menü. # 1, # 2 asw. Misst duerch Linken ersat ginn. Kuckt Iech un wéi et an de Browser kuckt. Dir wëllt de Bild net. Elo musse mir d'Stiler vun den Elementer beschreiwen, fir e ganz vertikal CSS-Menü ze maachen.

Beschreiwung vu Stiler

Eroplueden e Fichier mam Numm my_Vmenu.css, an deem Dir feststellen kanns wéi Dir de Optriede vun esou engem e wichtegt Element vun der Säit verbessere wëllt. Hei ass de Code, d'Ëmsetzung vun deenen d'vertikal CSS-Menü erliewen. Schreift et an d'erstallt Datei, a gitt duerno eng méi no unzefänken op wat d'Haaptleit, déi hei hier opgezielt sinn, bedeit.

Detailbeschreiwung benotzt used styles

Kuckt haut detailléiert eise CSS-Vertriedermenü:

Lëscht-Stil-Typ erlaabt d'Lëscht markéierend z'änneren. Benotzt d'Benotzung "0" fir d'Margin an d'Fëllement ze reduzéieren, déi extra Indentatioun aus der Lëscht ze bidden. Wéi Dir vum HTML Code gesinn, ass eis Menü eng Lëscht, an CSS setzt d'Stiler.

Ul # my_Vmenu - de generellen Stil vun der ganzer Lëscht.

Ul # my_Vmenu li a - de Stil vun der Verbindung tëscht dem Li-Tags.

Ul # my_Vmenu li: hover ass eng Beschreiwung vun der Art vun Saachen aus dem Menü an enger Zäit wou een vun de Männer op de Mauszeechner weist.

Ul # my_Vmenu li eng Spannungsbeschreiwung vum Text (Menü Numm).

Denkt datt d'Dateien my_Vmenu.css an my_Vmenu.html an engem Verzeichnis gespeichert sinn. Si kënnen awer an verschidden Ordner geluede ginn, awer dann ass et wichteg datt de Wee op my_Vmenu.css an der Datei my_Vmenu.html ass. Maacht se virsiichteg, well Ufankswierker hu vill Problemer mat dësem.

De Stil sollt tëscht de Kappdeeg an der HTML-Datei verbonne sinn. Menu_1.png an menu_2.png sinn Biller fir de Menu Item am normale Zoustand z'erreechen an wann se iwwer de Mauszeer schwiewen.

Et ass besser, d'Biller an engem separen Ordner fir Zeechnungen ze retten, dat heescht my_images, awer de CSS Code ze korrigéieren. Schreibe wou dës Biller ugewise ginn, datt se an dësem Verzeichnis sinn: url (my_images / menu_1.png) an url (my_images / menu_2.png).

De Rescht vun den Eegeschaften, déi am CSS beschriwwe ginn, sinn einfach ze verstoen. Si setzen d'Erscheinung vun eisem Menü. Et ass einfach ze gesinn datt d'Breet an d'Héicht vun de Punkte op d'selwecht fir Punkten am normalen Zoustand gesat ginn an wann Dir d'Maus iwwert hinnen hënnert. Schrëftgréisst 18px, padding ginn déi Arécken aus verschiddene Säiten vun der Plaz Nimm. D 'Affichage vum Eegent kënnt Dir d'Display vu Blöken setzen fir Breet a Spigelen ze spezifikéieren.

Eise vertikalen Menü

Wéi Dir gesitt, ass de vertikale CSS-Menü einfach ze kreéieren. Op Basis vu Wëssen kënnt Dir et schéin an attraktiv maachen fir Besucher zu Ären Online Ressourcen! Benifinn Är Fantasie, a da schreiwt Iech e stilvollen Menu op Äre Site.