A simple menu • Meniu simplu + CSS3 (2)

Gata. Avem structura facută, am eliminat tot ce nu doream să apară, iar acum hai să ne apucăm de treabă!

Aşa cum am specificat în încheiere, în Meniu: simplu + CSS3 (partea 1), vom începe prin a da formă şi culoare meniului; până la finalul acestei lecţii, meniul nostru va arăta exact ca cel din imaginea din partea dreaptă.

3


Ca prim pas, hai să punem toate link-urile pe aceeaşi linie orizontală. Pentru a realiza asta, trebuie să atribuim float elementelor din interiorul listei neordonate.

4

După cum putem vedea, link-urile sunt îngrămădite şi arată neestetic; nu vrem asta. Propun să le delimităm sau, mai bine zis, să le individualizăm, aşa că le vom seta o lăţime (width) şi o înălţime (height). Apoi, din moment ce numărul de caractere diferă de la cuvânt la cuvânt şi, deoarece ele sunt, by default, aliniate la stânga, le vom poziţiona pe centru.

Ca să le putem evidenţia şi mai bine, vom adăuga şi o culoare de fundal, dar vom schimba şi culoarea scrisului pentru a fi în contrast cu fundalul. Mai mult de atât, vom adăuga şi un spaţiu în interior (padding), ca să fie clar că avem de a face cu nişte butoane.

6

Acum, da, mai arată şi el a meniu. Dar încă nu am terminat. Trebuie să realizăm efectul de hover, schimbarea care va avea loc în momentul în care vom plasa cursor-ul mouse-ului deasupra unuia dintre butoane. Ca acest efect să poată să fie vizibil în întregime, hai să adăugăm listei neordonate o margine (margin) de 20 de pixeli, pentru a o îndepărta de marginile ferestrei browser-ului.

8.png

Ca efectul de hover să poată să fie vizibil trebuie ca, în momentul în care cursor-ul mouse-ului va trece pe deasupra unuia dintre butoane, fundalul şi culoarea textului să se modifice. În plus, pentru ca tranziţia de la o culoare la alta să nu aibă loc instant, animaţia să pară “ca din topor” – cum e expresia, vom adăuga o întârziere de 0.3 secunde. Pentru ca lucrurile să fie şi mai interesante, vom adăuga şi o mică umbră la acest efect de hover.

9


De aici, modul în care putem să facem acest meniu să arate nu e restrâns decât de imaginaţia noastră. Spre exemplu:

• putem distanţa butoanele;

10

• putem rotunji capetele meniului;

11

… şi putem face multe altele.

În partea următoare vom realiza, pornind tot de la acest meniu, unul vertical, ca să vedem puţin diferenţele.

Advertisements

Published by

Laurenţiu Bălănescu

Front-end web designer - HTML&CSS

One thought on “A simple menu • Meniu simplu + CSS3 (2)”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s