01 of 06
Hoe meitsje ljepblêden oanmeitsje mei CSS en gjin ôfbyldings
Navigaasje op websiden is in foarm fan in list, en ljepblêd navigaasje is as in horizontale list. It is gewoan ienfâldich om horizontale tabelbedriuw mei CSS te meitsjen, mar CSS 3 jout ús in pear mear ark om se noch better te sjen.
Dit tutorial sil jo troch de HTML en CSS nedich meitsje om in CSS tabblêdmenu te meitsjen. Klik op dizze link om te sjen hoe't it sjoch.
Dit ljepblêd menu brûkt gjin ôfbyldings , allinich HTML en CSS 2 en CSS 3. It kin maklik bewurke wurde om mear ljeppers te foegjen of de tekst yn te feroarjen.
Browser Support
Dit ljepblêd wurket yn alle grutte browsers . Internet Explorer sil de rûnte hoeken net sjen, mar oars sil it ljeppers lykas Firefox, Safari, Opera en Chrome sjen litte.
02 of 06
Skriuw jo Menulist
Alle navigaasjesmenu en ljepblêden binne gewoan in unlisted list. Sa it earste ding dat jo wolle, skriuw in unlisted list fan keppelings wêr't jo jo ljepblêdnavigaasje wolle wolle.
Dit tutorial betsjuttet dat jo jo HTML skriuwe yn in text editor en dat jo witte wêr't jo it HTML foar jo menu op jo webstee pleatse.
Skriuw jo unordered list sa:
- class = "tablist">
- CSS 3
- id = "current"> ljepblêden
- Foar
- Menus
Jo sille besjen dat de koade twa dingen ropt: class = "tablist" en id = "current". De earste is ferplicht . As jo de tablistsklasse net yn jo unorderde list sette, sil de ljeppers net wurkje. De twadde is opsjoneel. Set de id = "aktyf" op hokker ljepper jo jo graach markearje wolle op dizze side. Ik brûke meastentiids dit om de side te markearjen wêr't ik bin, mar jo kinne it brûke om de meast wichtige ljepper te markearjen. Of jo kinne it folslein fuortsmite.
03 of 06
Begjin fan jo stylblêd
Jo kinne ek in eksterne stylblêd brûke of in ynterne stylblêd . De sample-menu side brûkt in ynterne stylblêd yn 'e
fan it dokumint.Earst sette wy de UL sels
Dit is wêr't wy de tabellist fan 'e klasse brûke. Yn it HTML. As jo de UL-tag stylje, dy't alle unlistedlisten op jo side styl stylje, moatte jo allinich de UL-klasse ynstelle. tablist De earste ynfoe yn jo CSS moat dan wêze:
.tablist {}Ik wol graach yn 'e ein fan' e ein fan 'e heulendoarp sette (}) foarôfgeande tiid, dus ik ferjit it letter net.
Wyls wy in unlisted list tag brûke foar de ljepblêd menu, mar wy wolle net dat der gjin kûlen of getallen yntekenje. Dus de earste styl dy jo taheakje wolle is. liststyl: gjin; Dit ferklearret de browser dat al in list is, is in list mei gjin foardielde stilen (lykas kûlen of getallen).
Dan kinne jo de hichte fan jo list sette om de romte te passen dy't jo wolle dat it fol is. Ik kieze 2em foar myn hichte, as dat dûbel is de standert lettertypegrutte, en jout ûngefear heal in em boppe en ûnder de tekst fan 'e ljepper. hichte: 2em; Mar jo kinne jo breedte ynstelle op hokker grutte jo wolle. UL-tags sille automatysk 100% fan 'e breed opnimme, dus as jo wolle dat it lytser is as de hjoeddeiske kontener, kinne jo de breedte ferlitte.
As lêste, as jo masterstylblêd gjin presets foar UL- en OL-tags hat, sille jo se ynstelje wolle. Dit betsjut dat jo de grinzen, marginen en padding fan jo UL ôfslute moatte. padding: 0; marzje: 0; grins: gjin; As jo de UL-alaien werombelle hawwe, kinne jo de rânen, padding, of grins feroarje om wat te passen mei jo ûntwerp.
Jo finalte .tablist-klasse moat sa sjen:
.tablist {list style: none; hichte: 2em; padding: 0; marzje: 0; grins: gjin; }04 of 06
Bewurkje de listlisten fan LI
As jo de unlisted list stylisearje, moatte jo de LI-tags ynneare. Oars wurde se akkoart as standert list en elke beweging nei de folgjende line sûnder jo ljepblêden korrekt te pleatsen.
Earst sette jo styl eigendom:
.tablist li {}Dan wolle jo ljepblêden soargje dat se op it horizontale fleantúch lizze. float: lofts;
En ferjit net om in lytse marzje te meitsjen tusken de ljepblêden, sadat se net gearwurkje. margin-right: 0.13em;
Jo li-stylen moatte sa folgje:
.tablist li {float: left; margin-right: 0.13em; }05 of 06
It ljepblêden meitsje fan likense ljeppers mei CSS 3
Om de measten fan 'e swiere oplieding yn dizze stylblêd te dwaan, meitsje ik de linkingen yn' e unlistige list te behearen. Browsers sjogge dat links mear op in webside dwaan as oare tags, dus is it makliker om âldere browsers te krijen om dingen te hâlden lykas hoverstatus as jo se oan it anker tag (keppelings) befetsje. Soart earst dyn styl-eigenskippen:
.tablist li a {} .tablist li a: hover {}Om't dizze ljepblêden soargje moatte as ljeppers yn in applikaasje, wolle jo it hiele gebiet fan 'e ljepper klikke, net allinich de keppele tekst. Om dit te dwaan, moatte jo in A-tag konvertearje fan 'e normale " ynline " -tat yn in blokje-elemint . display: block; (As jo belangstelling foar mear witte oer it ferskil, lês Block-Level vs. Inline Elements .)
Dan is in maklike manier om jo ljepblêden te symmetrisearjen mei elkoar, mar dochs fleksibel om de breedte fan 'e tekst te passen is it rjochts- en loftspulding deselde te meitsjen. Ik brûkte it skôgjen fan skôgjen-eigendom om de boppe- en ûnderkant te setten nei 0 en de rjochter en lofts nei 1em. padding: 0 1em;
Ik haw ek keazen om de link te ferwiderjen, sadat de ljeppers minder as keppels sjogge. Mar as jo publyk mei dat miskien miskien wurde kin, ferlitte dizze line. link-dekoraasje: gjin;
Troch in dünner grins om de ljeppers te meitsjen, makket it se as ljeppers. Ik brûkte de grinsstien fan 'e grins om de grins om alle fjouwer siden rânen te lizzen: 0.06em sterke # 000; En brûkte dan de rânebegrutte eigendom om it fan 'e boaiem te ferwiderjen. border-bottom: 0;
Doe makke ik guon oanpassingen foar de lettertype, kleur, en eftergrûnkleur fan 'e ljeppers. Set dizze op de stilen dy't jo side oanpasse. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kleur: # 000; background-color: #ccc;
Alle boppeste stilen moatte yn 'e selektor gean .tablist li a, de regel sadat se de ankers tags yn' e algemiene ynfloed hawwe. Dan om de ljeppers ferskille te klikber te meitsjen, moatte jo in pear steat regel taheakje .tablist li a: hover.
Ik winskje de kleur fan 'e tekst en eftergrûn te feroarjen om de ljepper pop te meitsjen as jo mûs oer dy hawwe. eftergrûn: # 3cf; color: #fff;
En ik tafoege in oare herinnering oan de browsers dat ik wol dat de link net bliuwt. tekst-dekoraasje: gjin; In oare mienskiplike metoade is om de ûnderline werom te kearen as jo mûs oer de ljepper. As jo dat dwaan wolle, feroarje it oan tekstdekoraasje: ûnderline;
Mar wêr is CSS 3?
As jo oandacht hawwe, hawwe jo wierskynlik besjoen dat der gjin CSS 3 stilen brûkt binne yn it stylblêd. Dit hat it foardiel fan wurkjen yn elke moderne browser, wêrûnder Internet Explorer. Mar it makket de ljeppers net sa mear as fjouwerkante kaarten. Mei it tafoegjen fan in CSS-3-styl-oanrjocht-rânemar-radius (en it is ferbûn mei browser-spesifike opsjes) kinne jo de rânen rûne meitsje, om mear as ljeppers op in manila-map te sykjen.
De stilen dy't jo taheakje wolle oan de .tablist li in regel binne: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Dit binne de lêste stylregels dy't ik skreau:
.tablist li a {display: block; padding: 0 1em; tekst-dekoraasje: gjin; border: 0.06em solid # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; kleur: # 000; background-color: #ccc; / * CSS 3 eleminten * / webkit-grinzen-top-rjochtsradius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {eftergrûn: # 3cf; color: #fff; tekst-dekoraasje: gjin; }Mei dizze stilen hawwe jo in ljepblêdmenu dat yn alle grutte browsers wurket en liket krekt opnij ljepblêden yn CSS 3 konforme browsers. De folgjende side jout jo in oare opsje dy't jo brûke kinne om jo sels noch mear te meitsjen.
06 van 06
Markearje de aktive ljepper
Yn 'e HTML dy't ik makke, hat de UL ien list elemint mei in ID. Hjirmei kinne jo ien LI in oare styl jaan fan 'e rest. De meast foarkommende situaasje is om de aktuele tab te meitsjen op ien inkelde wize. In oare manier om dit te tinken is dat jo graach graach de ljeppers wolle dy't net wenje. Jo feroaring wêr't de id is op 'e ferskillende siden.
Ik styl as de #rûte A tag, lykas de #rûte A: hover sta, sadat beide wat wat oars binne. Jo kinne de kleur, eftergrûnkleur feroarje, sels de hichte, breedte en padding fan dit elemint. Meitsje alle wizigingen sin yn jo ûntwerp.
.tablist li # aktueel in {background-color: # 777; color: #fff; } .tablist li # current a: hover {background: # 39C; }En jo binne dien! Jo hawwe krekt in ljepblêdmenu foar jo webside makke.