CSS - horizontalni izbornik za početne web dizajnere
HTML i CSS su web programski jezici potrebni za izgled web-mjesta. Početni koder koji odluči ovladati osnovama ove profesije trebao bi početi s njihovim proučavanjem, jer je na njima moguće stvoriti jednostavnu web stranicu. 
Na HTML-u i CSS-u, horizontalni izbornik za web-lokaciju je jednostavan za izgradnju, počnite pisanjem okvira.
Izgradnja okvira
Prvo morate napraviti HTML oznaku. Izbornik je najlakše napraviti oznaku s oznakom
- , Oznaka je uparena tako da zahtijeva zatvaranje na kraju popisa.
primjer:
To je osnova koja se zatim formira u CSS-u u horizontalnom izborniku, fiksnom ili padajućem izborniku.
Vodoravni izbornik
Nakon što je kôd označen, vrijeme je da počnete raditi sa stilom. Treba napomenuti da su uparene oznake koje se koriste za zadani okvir blokirane, što znači da u CSS-u morate stvoriti i običan i padajući horizontalni izbornik, pa morate promijeniti vrstu elementa u mala slova. To se može učiniti pomoću svojstva prikaza. Dodaje se elementu:
.menu li {
prikaz: inline;
}
Tako se pretvara u horizontalnu. Ako postoji mnogo pod-stavki, one se mogu premjestiti na novi redak bez dodatnih specificiranih svojstava. U tom slučaju koristite svojstvo za prikaz prostora i prijenos teksta. Nowrap sprema tekst u cijelosti, bez crtanja riječi, a pre-wrap sprema razmake iz HTML-a i dodaje automatske.
.menu li {
prikaz: inline;
bijeli prostor: nowrap;
}
Kako ne biste postigli redak u čvrstom tekstu, možete rasporediti informacije u grupe i stvoriti dodatni podizbornik koji će točno prikazati sve što vam je potrebno. Podizbornici mogu biti padajući ili otvoreni.
Padajući izbornik
Nakon savladavanja osnova izgradnje horizontalnog izbornika na CSS-u, pod-izbornik koji ispada iz njega može se rasporediti u vertikalnom popisu. Popis u označivanju mora biti na više razina, dodavati dodatne oznake za popise s oznakama unutar željene stavke. Oznaka mora sadržavati sljedeće stavke popisa:
U css. Izborniku, li se zamjenjuje s ".menu> li", tako da unutarnji elementi postaju vertikalni. Relativno pozicioniranje dodaje se roditeljskom selektoru, u kojem je element pomaknut s granica roditeljskog bloka, a na dijete - apsolutnim (potpuno uklonjen iz toka i koordiniran od najbližeg elementa, a ako ne i od granica preglednika). Elementi s relativnim pozicioniranjem mogu sadržavati unutar sebe dijelove elemenata s apsolutnim pozicioniranjem. To znači da kada se blok pomakne s položajem: relativnim, fiksni dijelovi ostaju na mjestu unutar njega.
Standardno, padajući dio uvijek ostaje otvoren, osim ako elementu ne dodate samo element kada prelazite pokazivačem. Da biste to učinili, dodatni je popis prema zadanim postavkama skriven:
.menu> li {
prikaz: inline;
pozicija: relativna;
}
.menu .second {
položaj: apsolutni; (podizbornik se obvezuje na roditeljsku jedinicu)
prikaz: nema; (sakrij prikaz)
}
.menu> li: hover .second {(pseudo-klasa hover se koristi za pojavljivanje popisa za navijanje)
prikaz: blok;
}
Rezultat će biti mali, uredan izbornik.
Fiksni izbornik
Da bi se snimilo kreirano u otvorenom obliku, svojstvo prikaza s vrijednosnim blokom koristi se analogijom s padajućim izbornikom, ali bez skrivanja prikaza. Ako želite, možete pomicati ne samo otvoreni popis, nego i traku izbornika prilikom pomicanja po stranici. Kada korisnik pomiče tekst prema dolje, izbornik uvijek može ostati na vrhu, što olakšava navigaciju web-lokacijom. Ovaj element ima nekoliko značajki. Vrlo je sličan apsolutnom, ali se veže samo za preglednik, ispada iz potoka. Pogodno je koordinirati takav element koristeći uobičajena svojstva vrh / dno, lijevo / desno. Primjer horizontalnog izbornika s padajućim elementima fiksnim u pregledniku:
.menu> li {
prikaz: inline;
položaj: fiksno;
}
.menu .second {
položaj: apsolutni;
prikaz: nema;
}
.menu> li: hover .second {
prikaz: blok;
}
Svojstvo položaja dodaje se s fiksnom vrijednošću, nakon čega izbornik ostaje na mjestu prilikom pomicanja. Čak i početnik može podnijeti ovaj izbornik. HTML markup lista - jednostavna i praktična. Da bi ispravno prikazali CSS stilove u pregledniku, preporuča se zapamtiti o styling točkama u prikazu bloka, dodavanju obruba i koordinacijskih elemenata, unutarnjih i vanjskih alineja, tako da opisane točke nisu jedna na drugu. Često zaboravite dodati širinu i visinu elementa. Za prikaz željenog elementa izvan vidljivog dijela za naknadni dizajn, možete koristiti svojstvo float, da ga "zakucavate" na desnu ili lijevu stranu (float: right;).