Just a simple menu • Un meniu simplu

Gata cu vorbăria, să trecem la treabă!
Voi începe prin a crea un meniu simplu, ca să fie aşa, ca un punct de plecare.

Înainte de toate, îmi place să creez un folder nou, pe care să îl folosesc ca spaţiu de lucru. În al doilea rând, deschid editorul de text, Brackets în cazul meu, îmi creez cele două fişiere cu care voi lucra, index.html, respectiv style.css şi, desigur, “aştern” cele necesare:

1

Odată ce am parcurs aceşti paşi, nu îmi rămâne decât să încep să creez meniul dorit. Dar, mai exact, ce-i un meniu?

Meniul e doar o listă normală, nimic special şi nimic complicat, e o listă care conţine un anumit număr de elemente (items), în funcţie de câte butoane vrem sau avem nevoie să apară pe pagină, ca de exemplu: Acasă, Despre, Portofoliu, Contact – care ar fi cele mai comune. În cazul de faţă, voi începe să fac o listă neordonată şi să adaug cele patru elemente enumerate mai sus.

2

Nu-mi rămâne decât să adaug textul care doresc să apară pe fiecare buton în parte însă, înainte de a face asta, trebuie să creăm legăturile (links) către paginile respective.

3

Aleg să scriu # în locul adresei propriu-zise (href=”#”) deoarece nu am create paginile cu care să fac legatura.

Rezultatul pe care browser-ul îl va afişa, va arăta în felul următor:

4

Atât. Avem acum un meniu simplu, un meniu funcţional.

Avem un meniu simplu dar foarte urât din punct de vedere estetic. Aici intervine partea de CSS, moment în care vom începe să eliminăm ceea ce nu dorim să apară, cum ar fi acele buline din faţa fiecărui cuvânt şi să le facem să nu mai apară subliniate; vom începe să adăugăm un chenar, o culoare şi ce ne mai născoceşte imaginaţia. Dar asta în postările urmatoare! Şi, mai mult de atât, promit că lucrurile vor deveni mai interesante!

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