CSS - horizontalni meni za začetne spletne oblikovalce
HTML in CSS sta spletna programska jezika, potrebna za postavitev spletne strani. Začetni koder, ki se odloči obvladati osnove tega poklica, bi moral začeti s preučevanjem, saj je na njih mogoče ustvariti preprosto spletno stran. 
Na HTML in CSS je vodoravni meni za spletno stran enostaven za izgradnjo, začeti morate s pisanjem okvira.
Gradimo okvir
Najprej morate ustvariti oznako html. Meni je najpreprostejši za označevanje z oznako
- . Oznaka je seznanjena, zato jo je treba zapreti na koncu seznama.
Primer:
To je osnova, ki se nato oblikuje v CSS v horizontalnem meniju, fiksnem ali spustnem.
Horizontalni meni
Ko je koda označena, je čas, da se lotimo dela s stilom. Opozoriti je treba, da so seznanjene oznake, ki se uporabljajo za privzeti okvir, blokirane, kar pomeni, da morate za izdelavo navadnega in spustnega horizontalnega menija v CSS-ju spremeniti vrsto elementa v male črke. To lahko storite s pomočjo lastnosti zaslona. Doda se elementu:
.menu li {
prikaz: inline;
}
Tako se spremeni v vodoravno. Če obstaja veliko podpostavk, se lahko premaknejo v novo vrstico brez dodatnih določenih lastnosti. V tem primeru uporabite lastnost za prikaz prostorov in prenosa besedila. Nowrap shrani besedilo v celoti, brez deljenja besed, pred-zavijanje pa shrani presledke iz HTML-ja in doda samodejne.
.menu li {
prikaz: inline;
beli prostor: nowrap;
}
Da ne bi dosegli vrstice v trdnem besedilu, lahko razvrstite informacije v skupine in ustvarite dodatni podmeni, ki bo natančno prikazal vse, kar potrebujete. Podmeniji so lahko spustni ali odprti.
Spustni meni
Po obvladovanju osnov gradnje horizontalnega menija na CSS-ju lahko podmeni, ki pade iz njega, razporedite v navpični seznam. Seznam v označevalnem seznamu mora biti na več ravneh, dodajte dodatne oznake za označene sezname znotraj želenega elementa. Oznaka mora vsebovati naslednje elemente seznama:
V css .menu, li se nadomesti z ".menu> li", tako da notranji elementi postanejo navpični. Relativno pozicioniranje se doda nadrejenemu selektorju, v katerem se element premakne z meja starševskega bloka, in na otroka - absolutno (popolnoma odstranimo iz toka in koordiniramo iz najbližjega elementa in če ne, iz meja brskalnika). Elementi z relativnim pozicioniranjem lahko vsebujejo v sebi podrejene elemente z absolutnim pozicioniranjem. To pomeni, da ko se blok premika s položajem: relativni, bodo fiksni deli ostali na svojih mestih v njem.
Standardno, spustni del vedno ostane odprt, razen če elementu elementu dodate le takrat, ko premaknete kazalec. Dodatni seznam je privzeto skrit:
.menu> li {
prikaz: inline;
položaj: relativna;
}
.menu .second {
položaj: absolutno; (podmeni se veže na starševsko enoto)
prikaz: nič; (skrij prikaz)
}
.menu> li: hover .second {(psevdo-razred hover se uporablja za prikaz pojavljanja hover seznamov)
prikaz: blok;
}
Rezultat bo majhen, urejen meni.
Fiksni meni
Za zajemanje ustvarjenih v odprti obliki se lastnost prikaza z vrednostnim blokom uporablja po analogiji s spustnim menijem, vendar brez prikrivanja zaslona. Če želite, lahko s pomikanjem po strani popravite ne samo odprti seznam, ampak tudi menijsko vrstico. Ko uporabnik pomakne besedilo navzdol, lahko meni vedno ostane na vrhu, kar olajša navigacijo po mestu. Ta element ima več funkcij. Je zelo podoben absolutnemu, vendar se veže le na brskalnik, ki izstopa iz toka. Primerno je, da takšen element uskladite z običajnimi lastnostmi vrh / dno, levo / desno. Primer vodoravnega menija s spustnimi elementi, določenimi v brskalniku:
.menu> li {
prikaz: inline;
položaj: fiksno;
}
.menu .second {
položaj: absolutno;
prikaz: nič;
}
.menu> li: hover .second {
prikaz: blok;
}
Lastnost položaja se doda s fiksno vrednostjo, po kateri meni ostane pri premikanju. Tudi začetnik lahko upravlja ta meni. Seznam oznak HTML - preprost in priročen. Za pravilno prikazovanje stilov CSS v brskalniku je priporočljivo, da si zapomnite o styling točkah v pogledu bloka, dodajte meje in usklajevalne elemente, notranje in zunanje zamaknjenosti, tako da opisane točke niso postavljene druga na drugo. Pogosto pozabite na dodajanje širine in višine elementa. Za prikaz želenega elementa izven vidnega dela za poznejšo zasnovo lahko uporabite lastnost float, ki jo “zaklenemo” na desno ali levo stran (float: desno;).