![Pun-Crumbs [Versiune Noua] Empty](https://2img.net/i/empty.gif)
Buna ziua sunt mr.franta si astazi va prezint un mic tutorial care este destul de reusit dar si foarte simplu de facut.Bun haideti sa incepem.
Avem aici o imagine de previzualizare a meniului.
![Pun-Crumbs [Versiune Noua] Crumbs10](https://i.servimg.com/u/f39/16/47/36/78/crumbs10.png)
Avem nevoie de 2 imagini pentru a realiza acest meniu.
Imagina nr.1
![Pun-Crumbs [Versiune Noua] Crumbs12](https://i.servimg.com/u/f39/14/12/03/12/crumbs12.png)
Imaginea nr.2
![Pun-Crumbs [Versiune Noua] Hover_10](https://i.servimg.com/u/f39/14/12/03/12/hover_10.png)
Ce facem cu aceste doua imagini? simplu: prima imagine o folosim ca fundal a meniului si ca fundal la link-urile active,iar cea de a doua imaginine o adauga la hover.
In codul css avem clasa pentru navigare
Pasul numarul 1:background meniu si personalizare
Adaugam in css acest cod
Pasul numarul 2: Personalizare link-uri din meniu.
Pasul numarul 3: Adaugare hover la meniu. ( cu cea de a doua imagine)
Acum haideti sa va explic ce am adaugat in css ca sa fie pe intelesul tuturor.
font-size - Dimensiunea font-ului
background -imaginea de fundal
padding- mareste spatiul intre text si marginini.
border-este acea linie care incojoara meniul sau un tabel etc
box-shadow: este o umbra.
border-radius: colturile rotunde.
Daca acest tutorial va fost de ajutor va rog sa raspundeti la acest mesaj,de asemenea astept daca aveti probleme cu acest meniu.
Avem aici o imagine de previzualizare a meniului.
Avem nevoie de 2 imagini pentru a realiza acest meniu.
Imagina nr.1
Cod:
http://i39.servimg.com/u/f39/14/12/03/12/crumbs12.pngImaginea nr.2
Cod:
http://i39.servimg.com/u/f39/14/12/03/12/hover_10.pngCe facem cu aceste doua imagini? simplu: prima imagine o folosim ca fundal a meniului si ca fundal la link-urile active,iar cea de a doua imaginine o adauga la hover.
In codul css avem clasa pentru navigare
Cod:
.pun-crumbs{
continut css aici}Pasul numarul 1:background meniu si personalizare
Adaugam in css acest cod
Cod:
.pun-crumbs{
font-size: 0px;
background: url(http://i39.servimg.com/u/f39/14/12/03/12/crumbs12.png);
padding: 8px;
border: 1px solid #bbb;
box-shadow: 0px 0px 1px white inset;
border-radius: 5px;}
Pasul numarul 2: Personalizare link-uri din meniu.
Cod:
.pun-crumbs a{
font-size: 12px!important;
padding: 7px;
padding-left: 10px;
padding-right: 10px;
margin-right: -1px;
border: 1px solid #bbb;
box-shadow: 0px 0px 1px white inset;
}Pasul numarul 3: Adaugare hover la meniu. ( cu cea de a doua imagine)
Cod:
.pun-crumbs a:hover{
font-size: 12px!important;
background-image: url(http://i39.servimg.com/u/f39/14/12/03/12/hover_10.png);
padding: 7px;
padding-left: 10px;
padding-right: 10px;
}Acum haideti sa va explic ce am adaugat in css ca sa fie pe intelesul tuturor.
font-size - Dimensiunea font-ului
background -imaginea de fundal
padding- mareste spatiul intre text si marginini.
border-este acea linie care incojoara meniul sau un tabel etc
box-shadow: este o umbra.
border-radius: colturile rotunde.
Daca acest tutorial va fost de ajutor va rog sa raspundeti la acest mesaj,de asemenea astept daca aveti probleme cu acest meniu.
ori cum poti sa schimbi cand vrei dimensiunea culorile BV tot asa 