In stap foar step-guide
Of jo navigaasjemenu is in horizontale rige oer de top of in fertikale rige nei de side, is it noch altyd in list. By it ûntwikkeljen fan webnavigaasje is it faak maklik te ferjitten dat in navigaasjemenu in geweldige groep fan links is. Mar as jo jo navigaasje programmearje mei XHTML + CSS, kinne jo in menu meitsje dy't lyts is om te laden (de XHTML) en maklik te oanpassen (de CSS).
Begjinne
Om in ûntwerp fan in list foar navigaasjes te starten, moatte jo in list brûke.
It kin in standert unorderde list wêze dy't as de navigaasje identifisearre is:
As jo besjen oan 'e HTML sjogge, sille jo sjogge dat de "Thús" link ek in ID fan jo hawwe. Dit sil jo in menu meitsje dy't de aktuele lokaasje foar jo lêzers identifisearret. Sels as jo net plan hawwe dat dizze soarte fan fisuele kaaien op jo side krekt no kinne jo dizze ynformaasje opnimme. As jo besykje it opnij letter te foarkommen, sille jo minder kodearje om jo side te meitsjen.
Sûnder ien CSS styling sjogge dit XHTML-menu as in standert unorderde list. Der binne kûlen en de listpunten binne wat yndoneare. Om't ik brûkers fan keppelings brûke , sille de measte browsers gjin keppelings sjen litte as klikber (ûnderline en blau). As jo yn 'e boppesteande HTML yn in webside pleatst, sille jo navigaasje so sjen:
- Thús
- Products
- Tsjinsten
- Kontakt mei ús opnimme
Dit is moai langst en sjocht net folle as in menu. Mar mei krekt in pear CSS-stilen oan 'e list tafoege, kinne jo in menu meitsje dy't jo grutsk meitsje.
Vertical Navigation Menu
In vertike navigaasjemuorre is maklik te skriuwen omdat it op deselde wize as in normale list werjûn: op en del.
De list items sjogge vertikale op 'e side.
As ik stylende menüs bin, ik wol graach oan 'e bûtenkant begjinne en wurkje yn. Dit betsjut ik dat ik earste styl de ul # navigaasje en gean nei de li-eleminten en dan de keppelings, ensfh. Sa foar dit menu, earst definiearje jo de breedte fan it menu. Dit soarget derfoar dat sels de menuopsjes lang binne, sil se de rêst fan 'e layout net draaie of horizontaal skermjen bewurkmasterje.
ul #navigaasje {breed: 12em; }
Ienris haw ik de breed ynsteld, ik kin spielje mei de list items. Dit lit my de dingen lykas (om de kûlen te heljen), eftergrûnkleuren, grinzen, tekenrjochting en rânen.
ul #navigaasje li {
liststyl: gjin;
background-color: # 039;
border-top: solid 1px # 039;
tekst-align: left;
marzje: 0;
}
Skean as jo de basis foar de lis items sette, kinne jo begjinne mei te spyljen mei hoe't it menu yn 'e linksgebieten sjocht. Earste styl de UL # navigaasje LI A en dan de A: link, A: besocht, A: hover, en A: aktyf (as jo se wolle). Foar de keppelings leegje ik de linken in blokjeelje (yn stee fan de standert yn-line). Dit soarget har om de folsleine romte fan 'e LI te nimmen en se hannelje mear as in paragraaf, wêrtroch't se makliker meitsje as menu-knoppen. De oare ding dy't ik altyd docht, is de ûnderline fuortsmite (tekst-dekoraasje: none;), sa makket de knoppen mear as knoppen nei my.
Mar fansels kin jo ûntwerp oars wêze.
ul #navigaasje li a {
display: block;
tekst-dekoraasje: gjin;
padding: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}
Notysje dat mei de werjefte: blok; Yn 'e links setten it folsleine fak fan it menu item klikber, net allinich de brieven. Dit is ek goed foar brûkberens. Soargje derfoar dat jo de keppelkleuren sette (link, besocht, hoverje en aktyf) as jo wolle dat se ferskille fan de standert blau, read en purple.
a: link, a: besocht {kleur: #fff; }
a: hover, a: aktyf {kleur: # 000; }
Ik wol graach ek de hoverstatus in pear mear omtinken jaan troch de eftergrûnkleur te feroarjen.
a: hover {background-color: #fff; }
As jo mear foarbylden fan fertikale menüs hawwe, kinne jo de list hjirûnder besykje.
- In Styled Vertical Menu
- In Basic Vertical Menu Template
- In Styled Vertical Menu mei Jo binne hjir
- In Basic Vertical Menu Template mei Jo binne hjir
Horizontaal navigaasjemenu
It meitsjen fan horizontale navigaasje-menüs binne wat lytser as fertikale navigearjen, om't jo it feit dat it HTML-foarkar foarkomt foarearst vertikal te sjen. Lykas by it horizontaal menu, meitsje earst de list fan navigaasjesmenu :
Om in horizontaal menu te meitsjen, wurkje itselde as jo hawwe mei it vertike menu. Begjin mei de bûten en wurkje yn. Omdat ik myn navigaasje begjinne mei te begjinnen yn 'e lofter hoeke, set ik it mei 0 mar links en padding, en ik flitsje it nei links. Jo moatte ek yn 'e gewoante krije om de breed te setten sadat jo menu mear of minder romte nimt as jo wolle. Foar horizontale menus is dit meastal de folsleine breedte fan it ûntwerp. Ik haw ek in efterkleur oan 'e folsleine list tafoege om it makliker te lêzen te meitsjen.
ul # navigaasje {
float: lofts;
marzje: 0;
padding: 0;
breed: 100%;
background-color: # 039;
}
Mar it geheim foar it horizontale navigaasjemenu is yn 'e list items. List items sille gewoanlik elemint blokkearje, dat betsjut dat se in nijline hawwe foardat en nei elk ien plak hawwe. Troch it bewurkjen fan it werjaan fan blok nei ynline, kieze jo de listeleminten om njonken oare horizontaal te lizzen.
ul #navigaasje li {display: inline; }
Ik behannele de links krekt lykas ik har behannele yn it vertikale navigaasjemenu, mei deselde kleuren en tekstdekoraasje. Ik tafoege in toprâne om de knoppen te begjinnen, as se oerbliuwt. It iennige ding dat ik fuorthelle wie it byld: blok; lykas dat de nije linen wer werom sette en it horizontale menu ferdriuwe.
ul #navigaasje li a {
tekst-dekoraasje: gjin;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
border-right: solid 1px # 39f;
}
a: link, a: besocht {kleur: #fff; }
Gean nei: navigaasje, sykje {
background-color: #fff;
kleur: # 000;
}
Jo binne lokaasje ynformaasje
In oare aspekt fan HTML is it joarearekenner. As jo jo menu wizigje om de hjoeddeistige lokaasje fan jo brûkers te oanjaan, brûk jo dizze identiteit om in oare eftergrûnkleur of oare styl te definiearjen. Ferwiderje dy ID-attribút nei it goeie menu item op oare siden sadat de hjoeddeiske side altyd markearre wurdt.
ul #navigaasje li # youarehere in {background-color: # 09f; }
As jo dizze stilen tagelyk op jo side sette, kinne jo in horizontale of vertike menubalke meitsje dy't wurket mei jo side, mar is flugger downloaden en hiel maklik te aktualisearje yn 'e takomst. It brûken fan XHTML + CSS draacht jo ljochten yn in tige machtich ark foar ûntwerp.
As jo mear foarbylden hawwe fan horizontale menu's, kontrolearje jo de folgjende.
- In stylearre horizontaal menu
- In Basic horizontale menuwerjefte
- In Styled horizontaal menu mei jo binne hjir
- In Basic Horizontale Menuplanner mei Jo binne hjir