Urratsa-urratseko gida
Nabigazio-menua errenkada horizontal bat da goiko aldean edo errenkada bertikalaren alboan, zerrenda bat besterik ez da. Nabigazio weba diseinatzean, sarritan erraza da nabigazio menua esteken talde glorifikatua dela. Baina nabigazioa XHTML + CSS erabiliz programatzen baduzu, txikia deskargatzeko (XHTML) eta erraz pertsonalizatzeko (CSS) sor dezakezu.
Hasten
Nabigazioko zerrenda diseinatzen hasteko, zerrenda erabili behar duzu.
Nabigazio gisa identifikatu gabeko zerrenda estandar bat izan daiteke:
HTML estuki begiratuz gero, "Hasiera" estekak zurekin identifikatzen du. Honek zure irakurleentzako uneko kokapena identifikatzen duen menu bat sortuko du. Oraindik ez baduzu zure webguneko ikusmen-mota horren beharrik planifikatu beharrik, informazio hori sartu ahal izango duzu. Zigoa gehitzeko geroago erabakitzen baduzu, zure webgunea prestatzeko kodifikazio txikiagoa izango duzu.
CSS estilizatu gabe, XHTML menuak agindu gabeko zerrenda estandarraren itxura du. Balak daude eta zerrendako elementuak apur bat koska daude. Leku- markaren estekak erabiltzen ari naizenez, nabigatzaile gehienek ezingo dituzte estekak estekan klikatu (azpimarratuta eta urdinez). Goiko HTML batean itsatsi baduzu web orri batean, zure nabigazioa itxura hau izango da:
- Hasiera
- Produktuak
- Zerbitzuak
- Jarri gurekin harremanetan
Hau nahiko aspergarria da eta ez du menu bat bezalakoa. Zerrendan gehitutako CSS estilo gutxi batzuekin, harro egiten duzun menu bat sor dezakezu.
Nabigazio bertikalaren menua
Nabigazio-menu bertikala oso erraza da idazteko, zerrenda normalean modu berean bistaratzen baitu: gora eta behera.
Zerrenda-elementuek orrialde bertikalki erakusten dute.
Menuen estiloa naizenean, kanpotik hasi eta lanean hasi nahi dut. Hori dela eta, lehenik eta behin, ul # nabigazioa lehengo estiloa dela esan nahi dut eta ondorengo elementuei eta ondoren esteketara joateko. Beraz, menu honetan, lehenik menuaren zabalera zehazten duzu. Honek ziurtatzen du menu-elementuak luzeak badira ere, ez dute diseinuaren gainerako bultza egingo edo korritze horizontalak sortuko dituzte.
ul # navigation {zabalera: 12em; }
Behin zabalera ezarri dut, zerrendako elementuekin jolastu dezaket. Horrek aukera ematen dit gauzak (balak kentzeko), atzeko planoko koloreak, mugak, testu lerrokatzea eta marjinak.
ul # navigation li {
zerrenda-estiloa: none;
atzeko planoko kolorea: # 039;
border-top: solid 1px # 039;
text-align: left;
marjina: 0;
}
Zerrendako elementuen oinarriak konfiguratu ondoren, esteken inguruko menuak nola jokatzen hasi zaitezke. Lehenengo estiloa UL # nabigazioa A eta gero A: lotura, A: bisitatua, A: pasatzean, eta A: aktiboa (nahi badituzu). Loturak blokeko elementu bateko estekak (linean lehenetsitakoa baino) egin nahi ditut. Hau LI-aren espazio osoa hartzen dute, eta paragrafo bat bezala jarduten dute, eta errazagoa da menu-botoiak estiloa izatea. Gainerako gauza hori azpimarratu behar da (testu-dekorazioa: none;), Horrek botoiak botoiak bezalakoa dirudi.
Baina jakina, zure diseinua desberdina izan daiteke.
ul # navigation que a {
erakutsi: blokea;
testu-dekorazioa: none;
betegarria: .25em;
mugan behean: 1px solidoa # 39f;
border-right: 1px solidoa # 39f;
}
Kontuan izan pantailarekin: blokea; esteketan ezartzen da, menu-elementuaren koadro osoa klikagarria da, ez letrak bakarrik. Erabilgarritasuna ere ona da. Ziurtatu esteken koloreak ezartzeko (estekan, bisitatu, desplazatu eta aktibo) urdin, gorria eta morea lehenetsiak izan nahi ez badituzu.
a: esteka, a: bisitatu {color: #fff; }
a: pasatzean, a: aktiboa {color: # 000; }
Halaber, atzeko planoaren kolorea aldatu beharrean pixka bat gehiago erakustea nahi dut.
a: pasatzean {background-color: #fff; }
Menu bertikalen adibide gehiago nahi izanez gero, kontsultatu beheko zerrenda.
- Estilatutako bertikalaren menua
- Oinarrizko bertikala Menu Txantiloia
- Zu hemen zaude bertikal estiloko estiloa
- Hemen zaude Hemen Oinarrizko Oinarrizko Txantiloia
Nabigazio-menu horizontala
Nabigazio-menu horizontalak sortzea nabigazio bertikaleko menuak baino pixka bat zailagoak dira, HTML zerrendek bertikalean bistaratzeko nahiago izan dezaten. Menu horizontalarekin batera, lehenik nabigazio menuen zerrenda sortu :
Menu horizontal bat sortzeko, egin lan berdina menu bertikalean. Hasi kanpotik eta lan egin. Nire nabigazioa ezkerreko izkinan hasi nahi dut, ezkerreko eta ezkerreko marjina 0 ezarri dut eta ezkerrera flotatzen dut. Era berean, zabalera ezartzeko ohitura hartu beharko zenuke, zure menuak ez baitu nahi duzun tokirik hartzen. Menu horizontaletarako, diseinuaren zabalera osoa izan ohi da. Atzeko planoko kolore bat gehitu nuen zerrendara oso erraz irakurtzeko.
ul # nabigazioa {
flotatzen: utzi;
marjina: 0;
betegarria: 0;
zabalera:% 100;
atzeko planoko kolorea: # 039;
}
Baina nabigazio menu horizontalaren sekretua zerrendako elementuetan dago. Zerrenda elementuak blokeen elementuak dira normalean, hau da, bakoitzaren aurretik eta ondoren kokatutako lerro berria izango dute. Pantaila blokean lerrokatuta aldatzean, zerrendako elementuak lerrokatu behar dituzu horizontalean ondoan.
ul # navigation li {erakutsi: lerroan; }
Nabigazio-menu bertikalean tratatu nituen bezalako estekak tratatu ditut, kolore eta testuzko apaingarri berdinekin. Goiko ertza gehitu nuen botoiak bereizteko, mugitu ahala. I kendu nuen gauza bakarra bistaratzea zen: blokea; Horrela lerro berriak agertuko dira eta menu horizontalak suntsituko ditu.
ul # navigation que a {
testu-dekorazioa: none;
betegarria: .25em 1em;
mugan behean: 1px solidoa # 39f;
border-top: solid 1px # 39f;
border-right: 1px solidoa # 39f;
}
a: esteka, a: bisitatu {color: #fff; }
ul # navegación a: pasatzean {
atzeko planoaren kolorea: #fff;
kolorea: # 000;
}
Hemen zaude Kokapen informazioa
HTML beste alderdi bat da zure identifikatzailea. Zure menua aldatu nahi baduzu zure erabiltzaileen uneko kokapena adierazteko, erabili ID hau atzeko planoko kolore edo beste estilo bat definitzeko. Mugitu IDaren atributua beste orrialde batzuen menu-elementu egokiarekin, uneko orrialdea beti nabarmenduta dagoela.
ul # nabigazioa # webgunea hemen {background-color: # 09f; }
Estiloak zure orrian jartzen badituzu, zure webgunearekin lan egiten duen menu-barra horizontal edo bertikala sor dezakezu baina deskargatzeko azkar eta etorkizunean eguneratzea oso erraza da. XHTML + CSS erabiltzea zure zerrendak diseinuaren tresna indartsua bihurtzen du.
Menuak horizontala adibide gehiago nahi baduzu, kontsultatu ondokoa.
- A Styled Horizontal Menu
- Oinarrizko orrialde horizontaleko txantiloia
- Hemen zaude Honi etiketa estiloa
- Hemen zaude Hemen Oinarrizko Oinarrizko Txantiloia