Welcome to Drop-down nav bar!

Aaaaand, I’m back! In today’s lesson we’ll be making a simple drop-down navigation bar.

To start with, a drop-down menu is just a normal menu, an unordered list with its list items, which contains another (one or more) unordered list within one of its list items, visible only on mouse-over.

We’ll begin by creating an ordinary unordered list inside a <nav> tag.

1

Inside the Portfolio list item we’ll insert another unordered list which will contain our drop-down menu.

2

I’ll give the main unordered list an id="main-ul" and to the second one, an id="second-ul" so that we can easily identify them. The buttons from the main navigation will get a class="main-button", and the ones from the drop-down list will get a class="dp-button". As usual, we’ll remove the bullets from the lists, the text-decoration from the links and so on; you know the drill.

3.png

Let’s leave the HTML part for now and go to our CSS file to edit what we have made so far. Let’s style the navigation bar, the unordered list and the buttons.

Next, we’ll give position: relative; to the two lists, while the <nav> element receives position: absolute; so we can place it wherever we want or need. The buttons, mainly the list items, will be 110px wide and have a height of 30px. We’ll give them some color too, so we can see them. More so, we’ll center the text, both vertically and horizontally. In order to obtain a horizontal nav bar, the buttons from the main list will receive float: left;. We also have to make the link cover the entire button, not just the text, so we’ll make the <a> element to be as wide as the button  and we’ll give it the same height.

5

While we’re still here, let’s set a simple hover effect for the buttons and after that, we’ll take a look to see how our navigation bar is so far.

6.png

7.png

meniu16.gif

Now that everything is set, we need to hide the second menu and to make it appear only when the cursor is over the Portfolio button. To do so, the second unordered list needs to be given a height equal to zero and, for it to disappear, the overflow: hidden; declaration must be stated.

8.png

meniu17.gif

The last step is simple. On mouse-over, when the cursor will hover the Portfolio button, the second unordered list will increase its height to 120px, in order to show its four elements (30px * 4 = 120px).

9.png

meniu18.gif

Advertisements

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.