Tutorial CSS - Bara de navigare
Bara de navigare in CSS
De cate ori ai intrat pe un site si ai te-ai gandit: "Cum a facut bara de navigare?".
Iata si raspunsul: Pornind de la cod HTML simoplu si stilizandule cu ajutorul CSS.
In general pentru a crea o bara de navigare fie ea orizontala sau un meniu vertical sunt folosite listele HTML care ulterior sunt personalizate folosind CSS. Linkuri normale in interiorul tagului <li> care va fi incapsulat in tagul <ul>
Am atasat mai jos codul html necesar:
|
<ul> <li><a href="#">Acasa</a></li> </ul> |
Vom folosi acum CSS pentru a da forma listei de mai sus, si anume list-style-type:none - pentru a inlatura "bulinele" specifice listei. Deasemenea vom inlatura marginea si pading-ul pe care browser-ul il atribuie ca valoare standard.
| u l { list-style-type:none; margin:0; padding:0; } |
Codul CSS de mai sus poate fi folosit atat pentru meniuri verticale cat si pentru bara orizontala.
CSS - Bara verticala de meniu
Pentru a un meniu vertical de linkuri nu trebuie decat sa reprezentam linkurile ca un block si sa stabilim latimea blocului. Sa trecem la treaba.
| a { display:block; width:100px; } |
***Nota
Desi nu este absolut obligatoriu sa stabilim latimea blocului de elemente, va recomand insa, sa nu omiteti acest detaliu. In browsere mai vechi bara de linkuri poate fi distorsionata.
In principiu codul de mai sus este de ajuns pentru a crea un meniu vertical. In continuare aveti insa un meniu terminat si finisat decent zic eu. In privinta culorilor si a contarstelor nu trebuie decat sa va folositi imaginatia.
| ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; font-size:20px; color:#fff; background-color:#d2691e; width:200px; padding:8px; text-decoration:none; } a:hover,a:active { background-color:#daa520; } <ul> <li><a href="#">Acasa</a></li> <li><a href="#">Articole</a></li> <li><a href="#">RSS Feedt</a></li> <li><a href="#">Contact</a></li> </ul> |
Am pus aici si rezultatul.
CSS - Bara verticala de meniu
Pentru a crea o bara de meniu orizontala in css putem folosi, ori atributul inline, pentru a forta elementele listei sa fie insirate pe aceasi line, ori atributul floating pentru aforta elementele listei sa fie afisate unul langa celalalt.
Folosind inline
Pentru a crea o bara de meniuri orizontale cu atributul inline nu trebuie decat sa adaugam urmatoarea linie de cod CSS.
| l i { display:inline; } |
Ca si afisare standard elementele unei liste sunt afisate in bloc. Linia de cod CSS de mai sus nu face decat sa elimine enter-urile inainte si dupa acestea afisand link-urile pe aceasi linie.
Folosind float
Vm folosi atributul float pentru a afisa elementele listei unul langa celalalt. Vom folosi deasemenea atributul display:block; pentru a afisa linkul ca si un buton si vom stabili latimea acestuia.
Iata csi codul CSS aferent.
| li { float:left; } a { display:block; width:60px; } |
Odata ce am reprezentat elementul in bloc este obligatoriu sa stabilim latimea acestuia. In caz contrar acesta va ocupa toata latimea disponibila.
Codurile afisate anterior sunt suficiente pentru a crea o bara de meniuri orizontala folosind CSS In continuare aveti insa un meniu terminat si finisat. In privinta culorilor si a contarstelor nu trebuie decat sa va folositi imaginatia si sa va jucati putin.
Am atasat aici doua modele de meniu orizontal, unul folosind inline si altul folosind float. Succes!!!
Comentarii
Asa exemple mai mare dragul sa te apuci sa faci bari de meniuri cu css
caut de 3 zile un script css pentru submeniuri verticale care apartin uunui meniu orizontal.Sa arate in genul asta:http://shoemall.ro/view-all-products-in-shop.html
Poti sa postezi te rog pe site un exemplu?!
@Ioana
Este ceva mai complicat de facut acel tip de meniu nu am acum timp sa ma uit la el dar cred ca foloseste si ceva javascript pentru efecte. Imi pare rau sa te refuz, cel putin de moment.
Voi publica un tutorial despre bari de meniuri cu efecte dropdown dar acum nu am timp.
Poate totusi gasesti un raspuns printre cititori.
Succes
multumesc pentru raspuns.
wow mai posteaza te rog:D cat mai mult sant un devorator de informatii lmao =)). o treaba extraordinara pe departe cel mai bun tutorial css in romana care l-am intalnit,doar o mica pata nu prea ai dat exemple de valori sau pur si simplu ai pus proprietatea si valoarea cum ar fi "a:link,a:visited
{" pe care nu le-am mai intalnit dar totusi le-am copiat in scriptul meu:D mi-am notat toate proprietatile si valorile pe o foaie sa le invat. oricum nota 10. please continua redactarea cand ai timp sant foarte interesante exact ce vream eu.
tot ce ai pe siteul asta e foarte interesant generatoarele sau cele de genul tips totul e super.am mai gasit pe net dar majoritatea incomplete doar ceva de id si class si cam atat fasss :)). bafta
Salutare!am si eu o mare rugaminte la tine si daca mi-ai oferi o mana de ajutor ti-as fi recunoscatoare.
Am o lista de linkuri in dreapta paginii si vreau ca la fiecare click pe unul dintre linkuri sa se afiseze in stanga aceleasi pagini ceva corespunzator linkului respectiv.daca nu m -am facut inteleasa o sa va indrum catre urmatorul site:http://www.concurs.biz/ care ilustreaza ce vreau sa spun mai bine
Adica atunci cand dau click pe unul din linkurile din random posts in stanga imi afiseaza ceva ,daca dau click pe al doilea link dispare ce aveam initial si imi afiseaza o alta descriere.ce parere ai?Ai idee cum se procedeaza
Multumesc anticipat
Sal am si eu o problema.
Can u help please:D. Cand pun cursoru mouseului pe linkurile din sidebar nu le recunoaste pe toate ca linkuri pentru ca i-am dat float left sa alinieze bara cu textu.
Daca las bara de navigare la pozitia ei default, deasupra textului va functiona normal.
Trimite un comentariu!
