A simple menu • Meniu simplu + CSS3 (3)

Pornind de la meniul pe care l-am creat în Meniu: simplu + CSS3 (partea 2), vom face unul vertical. Acest lucru este foarte simplu de realizat, deoarece i-am dat deja formă, am atribuit culoare, atât fundalului butoanelor cât şi textului de pe acestea, şi am setat efectul de hover dorit.

Pentru a-l face să arate exact ca în imaginea de mai jos, nu trebuie decât să înlăturăm proprietatea float din declaraţia float: left; atribuită elementelor listei neordonate:

3.png

Ce este frumos la acel efect pe care l-am setat la hover este faptul că face butonul să pară că se “ridică” din meniu, că se separă de restul butoanelor şi că îşi măreşte puţin dimensiunile.

Din acest punct, nu ne rămâne decât să îl modificăm, din punct de vedere vizual, aşa cum dorim şi, ca să dau câteva exemple:

• putem adăuga o bordură (border) în partea de jos a butoanelor, astfel încât să pară că sunt delimitate; deoarece nu dorim ca şi ultimul buton să aibă o bordură în partea de jos, vom recurge la selectorul pseudo-class – :last-child.

5.png4.png

• putem seta ca fiecare buton să gliseze spre dreapta în momentul în care cursor-ul mouse-ului se află deasupra; am scos umbra pentru a se vedea clar rezultatul.

67

Şi, de aici înainte, suntem limitaţi doar de imaginaţie.

În lecţia viitoare intenţionez să modific acelaşi meniu, dar în ideea de a îl face puţin mai interesant şi mai frumos. Pe curând!

Advertisements

Published by

Laurenţiu Bălănescu

Front-end web designer - HTML&CSS

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