E Schrëtt fir Schrëtt
Ob Ären Navigatiounsmenü eng horizontaler Zeil an der Spëtzt oder enger vertikaler Rieder an der Säit ass, ass nach ëmmer just eng Lëscht. Beim Entwerfen vun Websäiten ass et ganz einfach einfach ze vergiessen datt e Navigatiounsmenü just eng verherrlecht Grupp vu Links ass. Awer wann Dir Är Navigation mat XHTML + CSS programméiere wëllt, kënnt Dir e Menü hunn, deen kleng ass fir ze downloaden (de XHTML) an einfach ze personaliséieren (de CSS).
Ufänken
Fir eng Lëscht vun der Navigatioun unzefänken, braucht Dir eng Lëscht ze benotzen.
Et kann eng normale onerlaabte Lëscht sinn, déi als Navigatioun identifizéiert gouf:
Wann Dir genau am HTML kuckt, kritt Dir fest datt de Link "Home" och eng Identifikatioun vun der Hierstellung hutt. Dëst erlaabt Iech e Menu unzefroen deen den aktuelle Stand fir Är Lieser identifizéiert. Och wann Dir kee Plang virkënnt dee sougenannten Typ vu visuellen Ursaach op Ärem Site ze hunn, kënnt Dir dës Informatioun zesummestellen. Wann Dir decidéiert de spéit spéit weiderzemaachen, musst Dir manner Kodéiere fir Är Site ze preparéieren.
Ouni all CSS Styling gesäit dëst XHTML Menü wéi eng normaler net geuerdnete Lëscht. Et gi Bullen an d'Lëscht vun den Lëschte si liicht ausgeriicht. Well ech Plazhalterverbindunge sinn , hunn déi meescht Browser net d'Verännerungen als klickbar (ënnersträicht a bloe). Wann Dir an dësem HTML an eng Websäit fanne kënnt Är Browser esou ausgesäit:
- Home
- Produkter
- Servicer
- Kontaktéiert eis
Dëst ass relativ langweileg a gesäit net wéi e Menü. Awer nëmme mat e puer CSS Stiele, déi op d'Lëscht erofgespillt hunn, kënnt Dir e Menü hunn, deen Iech stolz gëtt.
Vertikal Navigatiounsmenü
Eng vertikale Navigatiounsmenü ass ganz einfach ze schreiwen, well se an der selwechter Manéier wéi eng normale Lëscht weist: up and down.
Déi Lëscht gëtt vertikal iwwer d'Säit gedréckt.
Wann ech Menuen maan, da giff ech gär op der Äusserung an ech schaffen an. Dëst bedeit ech, datt ech d'éischt d'Ul # Navigatioun an dann op d'li Elementer lenken an dann d'Links usw. Also fir dëst Menü, Dir definéiert d'Breet vum Menü. Dëst garantéiert datt och wann d'Menü Elementer laang sinn, ginn se de Rescht vum Layout net ofgeschalt oder d'horizontalen Scrollen verursaachen.
D'# Navigatioun {Breet: 12em; }}
Eemol hunn ech d'Breet gesetzt, ech kann mat den Lëscht Elementer spillen. Dëst erlaabt mech Saachen ze maachen wéi (de Kugel ze läschen), Backgroundfuere, Grenzen, Textualitéit a Margen.
ul # Navigatioun li {
Lëscht Lëscht: keng;
Background-Faarf: # 039;
Grenz: Top 1px # 039;
Text alignéiert: lénks;
Spillraum: 0;
}}
Sidd Dir d'Basics fir d'Lëscht vun de Lëschte gespaart, kanns du mat der Spillausbildung mat der Kaart kucken. Déi éischt UL # Navigatioun LI A an dann den A: Link, A: besicht, A: Schwämm an A: aktiv (wann Dir se wëllt). Fir de Linken, ech gär de Linken e Blockelement (anstatt den Default-In-Line) ze maachen. Dëst zwéngt hinnen, den ganzen Raum vum LI ze huelen - an si handelen méi wéi e Paragraphe, wat se erliichtert ze manipuléieren als Menu Buttons. Déi aner Saach, déi ech ëmmer maachen, ass d'Ënnerstëtzung (Textdekoratioun: none;), wéi et déi Knäppchen méi wéi Knäppchen fir mech kuckt.
Awer natierlech ass Äre Design ka verschidden sinn.
D'# Navigatioun liest een {
Ecran: block;
Text-Dekor: Keen;
Padding: .25em;
Grenzgrenz: solid 1px # 39f;
Gegrillte Recht: massiv 1px # 39f;
}}
Remark: datt mam Display: block; Linken op de Link, de ganze Kich vum Menü Element klickbar, net nëmmen d'Bréiwer. Dëst ass och gutt fir Usibilitéit. Vergewëssert Iech d'Linkerfären ze setzen (Link, besicht, hover a aktiv), wann Dir wëllt datt se ënnerschiddlech sinn vun der Default blo, roude a violette.
a: Link, a: besicht {color: #fff; }}
a: Schwämm, e: aktiv {color: # 000; }}
Ech wëll och de Schwieregkeetsstaat e bësse méi oppassen andeems d'Hannergrond ännert.
a: hover {background-color: #fff; }}
Wann Dir méi Beispiller vu vertikalen Menuen wëllt, kuckt d'Lëscht ënnen.
- E Styled Vertical Menu
- A Basis Verträglech Menüvirsch
- A Styled Vertical Menu mat Iech Hutt
- A Basis Verträglech Menüvirschreiwung mat Iech Hutt Dir
Horizontal Navigatiounsmenü
Hir horizontale Navigatiounsmenü ze kreéieren sinn liicht schwiereg wéi déi vertikale Navigatiounsmenü, well Dir de Fakt ass datt d'HTML-Listen liewe vertikal vertrieden. Wéi och am horizontalen Menu erstellen Äer éischt Navigatioun menu Lëscht :
Fir e horizontalen Menü ze schaffen, schaffen déi selwecht wéi Dir hutt mat dem vertikalen Menü. Fänkt mat der Äusserung un a schafft an. Da wëll ech meng Navigation um lénks an der lénkser Ecke beginn, setze ech se mat 0 ze verloossen an de Foussnout, an ech schwiewen et op der lénkser. Dir sollt och an der Gewunnecht d'Breet setzen fir datt Äre Menü net méi oder manner Plaatz brauch wéi Dir wëllt. Fir horizontal Menue gëtt et normalerweis déi ganz Breet vum Design. Ech hunn och eng Hintergrundfarb op déi ganz Lëscht opgedeelt fir et méi einfach ze liesen.
ul # Navigatioun {
fléien: lénks;
Spillraum: 0;
Ufëllen: 0;
Breet: 100%;
Background-Faarf: # 039;
}}
Awer de Geheimnis zum horizontalen Navigatiounsmenü läit an den Lëscht Elementer. Lëscht Elementer ginn normalerweis Elementer blockéieren, dat heescht, datt se eng Neilinn hunn a viru all eenzel. Duerch d'Schalter vum Display vu Blöck nei Inline schalten Dir d'Lëscht Elemente niddereg nidderlänneg op.
Ul # Navigatioun li {Display: Inline; }}
Ech hunn d'Links behandelt genau wéi ech se am vertikale Navigatiounsmenü behandelt hunn, mat de selwechte Faarwen an Textdekoratioun. Ech hunn eng Top Grenz ze addéieren fir d'Knäppchen ze beschränken wann se iwwer d'Luucht ginn. Déi eenzeg Saach déi ech erausgeholl huet war d'Affichage: block; wéi dat déi Neilinn nees zréck an d'Horizontalmenü zerstéieren.
D'# Navigatioun liest een {
Text-Dekor: Keen;
Padding: .25em 1em;
Grenzgrenz: solid 1px # 39f;
Grenz top: fest 1px # 39f;
Gegrillte Recht: massiv 1px # 39f;
}}
a: Link, a: besicht {color: #fff; }}
Ul # Navigatioun li e: hover {
Background-Faarf: #fff;
Faarf: # 000;
}}
Dir sidd Standort Informatiounen
En aneren Aspekt vum HTML ass de Youarehere Identifizéierer. Wann Dir Äert Menu ännere wëllt fir den aktuellen Stand vun Ärem Benotzer ze weisen, benotzen Dir einfach dës ID fir eng aner Hannergrondfär oder aner Form ze definéieren. Gidd dësen ID Attribut op de korrekt Menüpunkt op anere Säiten, fir datt déi aktuell Säit ëmmer markéiert ass.
D'# Navigatioun li # youarehere a {background-color: # 09f; }}
Wann Dir dës Stiler zesummen op der Säit setzen, kënnt Dir eng horizontal oder vertikal Menüskaart erstellen, déi mat Ärer Websäit funktionnéiert, awer séier ass erofgelooss ginn an ganz einfach an der Zukunft ze updaten. XHTML + CSS benotze Är Lëschte mat e ganz mächtege Tool fir Design.
Wann Dir méi Beispiller vu horizontalen Menuen wëllt, kuckt no folgend.
- E Styled Horizontal Menu
- A Basis Horizontal Menu Schabloun
- E Styléierten Horizontalen Menü mat Iech sinn hei
- A Basis Horizontalen Menüvirschreiwung mat Iech Hutt Dir