tutorial meniuri in html

7/22/2019 Tutorial Meniuri in HTML

1/10

Tot ce am gasit pe net desptre crearea meniurilor in html

Studiaza cat poti! Iti trimit link-ul de la videoclip precum si arhiva cu fis,precum si alte exemple atentie fis css se scrie in notepad si se salveaza cuextensia css

Vezi mai jos

n aceast lecie video vei nva cum s facei unmeniu drop-drown(dinamic) n HTML iCSS. Fiecare site are nevoie de un mod denavigare pentru vizitatorii si. Acest mod de navigare n cadrul unui site serealizeaz cu ajutorulmeniur i lor. Se pot crea meniuri cu JavaScript,Flash,Ajax ,JQuery, HTML, CSS etc. Urmrii lecia video de mai jos, undeavei explicaiile necesare pentru crearea unui meniu drop-drownutiliznd HTML iCSS.

Mai jos, putei s descrcai acest exemplu demeniu drop-drown(dinamic)n HTML iCSS. El cuprinde dou fiiere, meniu.html i style.css. Meniu.html estefiierul principal html care va creiona meniul site-ului i pagina web. Style.css estefiierul css (Cascading Style Sheets) care va crea stilul, adic culorile, poziionareaelementelor, forma etc. Referitor la fiierul style.css, observai c acesta este inclus nfiierul html cu ajutorul elementului , aa cum apare mai jos:

Acest lucru nseamn c noi utilizm un fiier css extern, style.css, pe care l inserm n

pagina html cu ajutorul elementului , aa cum apare mai sus. Acest exemplu de meniu drop-drown(dinamic), realizat n HTML i CSS, estefoarte util pentru cei care se afl la nceputde drum n crearea i dezvoltarea paginilorweb, pentru cei care doresc s nvee tehnologiile web de creare a paginilor web, cumar fi HTML i CSS. De asemenea, este foarte util pentru elevii de liceu sau pentruoricine care dorete s nvee HTML i CSS.

Adresa videoclipului : videoclip meniuhttps://www.youtube.com/watch?v=Y2OJAoq7Vxg

Vezi ca iti atasez si fisierele (o arhiva cu fis html si fis css) dar ar fi buine sa urmarestifilmul

Alt exMie nu mi-a iesit adica nu transforma meniul din vertical in orizontal si nu elimina bulinutele de la listaOk revin cu inca un mic tutorial, imi imaginez ca exista destule pe net dar fac si eu unul cat se poate de simplu. Inacest tutorial vom crea un meniu de link-uri ( simplu zis un meniu ), orizontal, folosind HTML si CSS. Pentru inceputcreeam un UL ( Unordered List ) adica o lista neordonata, in care elementele listei sunt.link-urile noastre.

HOMEPRODUSE
http://www.lectiideinformatica.net/tutoriale-cursuri-lectii-video-web/tutoriale-video-cursuri-lectii-html-xhtml/aplicatii/24-cum-realizam-un-meniu-drop-down-dinamic-utilizand-html-si-css-video.htmlhttp://www.lectiideinformatica.net/tutoriale-cursuri-lectii-video-web/tutoriale-video-cursuri-lectii-html-xhtml/aplicatii/24-cum-realizam-un-meniu-drop-down-dinamic-utilizand-html-si-css-video.htmlhttp://www.lectiideinformatica.net/tutoriale-cursuri-lectii-video-web/tutoriale-video-cursuri-lectii-html-xhtml/aplicatii/24-cum-realizam-un-meniu-drop-down-dinamic-utilizand-html-si-css-video.htmlhttps://www.youtube.com/watch?v=Y2OJAoq7Vxghttps://www.youtube.com/watch?v=Y2OJAoq7Vxghttp://www.lectiideinformatica.net/tutoriale-cursuri-lectii-video-web/tutoriale-video-cursuri-lectii-html-xhtml/aplicatii/24-cum-realizam-un-meniu-drop-down-dinamic-utilizand-html-si-css-video.htmlhttps://www.youtube.com/watch?v=Y2OJAoq7Vxghttp://www.lectiideinformatica.net/tutoriale-cursuri-lectii-video-web/tutoriale-video-cursuri-lectii-html-xhtml/aplicatii/24-cum-realizam-un-meniu-drop-down-dinamic-utilizand-html-si-css-video.html


2/10

DESPRE NOICONTACT

Bun, ceea ce va rezulta codul de mai sus e o lista verticala cu link-urile resprective, si cu niste bulinute in fata.Bunpana aici.Acum va trebui sa integram aceasta lista intr-un DIV, pe care o sa il numim simplu meniu.

HOMEPRODUSEDESPRE NOICONTACTAcum vom aplica partea de CSS, pentru inceput sa scapam de bulinute asa ca vom adauga in partea de CSS a paginiinoastre web urmatoarele:#meniu ul {

margin: 0;padding: 0;list-style-type: none;list-style-image: none;}Codul de mai sus elimina bulinutele, si spatiul\marginea.Acum mai adaugam o linie de CSS care va transforma lista noastra din verticala in orizontala.#meniu ul {

margin: 0;padding: 0;list-style-type: none;list-style-image: none;}#meniu li {display: inline;}Acum, link-urile din meniu fiindlink-uri ele au by default acea culoare specifica lor, adica acel albastru si sublinite,

vom adauga inca o linie CSS ca sa eliminam acea subliniere si de ce nu sa le dam o alta culoare.#meniu ul {margin: 0;padding: 0;list-style-type: none;list-style-image: none;}#meniu li {display: inline;}#meniu a {text-decoration:none;color: red;}

De sa nu adaugam si un efect, acela de a-si schimba culoarea cand trecem cu mouse-ul peste link-urile din meniu, asaca mai adaugam o line CSS.#meniu ul {

margin: 0;padding: 0;list-style-type: none;list-style-image: none;}#meniu li {display: inline;


3/10

}#meniu a {text-decoration:none;color: red;}#meniu a:hover {color: yellow;

}Si meniul nostru e gata de a fi folosit si bineinteles customizat in ce feluri vreti.

Articol original:Cum creeam un meniu orizontal de link-uri in HTML folosind CSS ?

Alt exemplu

Primul exemplu:

Prima data vom face o coloana, apoi modificam un pic html-ul, si apoi aplicam stilul css. Mai intai, trebuie sa punemlinkurile (meniul) intr-o lista si intr-un div. Acum, meniul nostru arata asa:

Link 1

Link 2

Link 3

Link 4

Link 5

Link 6

Aplicand schimbarile despre care spuneam (listele si div-ul), va arata asa:

Link 1

Link 2

Link 3

Link 4

Link 5

Link 6

Urmeaza sa introducem cateva linii si in fisierul css:

.menu {

padding: 0px;
http://digitalarena.ro/web-si-webdesign/cum-creeam-un-meniu-orizontal-de-link-uri-in-html-folosind-css/#ixzz2zXkicRfnhttp://digitalarena.ro/web-si-webdesign/cum-creeam-un-meniu-orizontal-de-link-uri-in-html-folosind-css/#ixzz2zXkicRfnhttp://digitalarena.ro/web-si-webdesign/cum-creeam-un-meniu-orizontal-de-link-uri-in-html-folosind-css/#ixzz2zXkicRfnhttp://digitalarena.ro/web-si-webdesign/cum-creeam-un-meniu-orizontal-de-link-uri-in-html-folosind-css/#ixzz2zXkicRfn


4/10

margin: 0px;

}

Asta nu face altceva decat sa ne asigure ca nu se aplica padding sau margine la meniul din div. Daca div-ul nu va fiintrodus intr-un alt div sau celula de tabel, poate ar fi bine sa ii specificati si inaltimea si latimea. Sa continuam...

.menu ul {

list-style: none;

padding: 0px;

margin: 0px;

text-align: left;

}

Am obtinut astfel, o distorsionare a modului in care se afiseaza in mod normal listele neordonate (). Cu ajutorul lui"list-style: none;" scoatem bullet-ul afisat implicit in fata listelor, si apoi scoatem orice padding sau margine aplicate in modnatural de tag-ul

.menu li {

border-top: 5px solid #E9EFE5;

}

Chiar daca proprietatea folosita aici este in mod natural o bordura, in cazul de fata ne va asigura un spatiu intre douaelemente ale meniului.

.menu a {

display: block;

background-color: #A8BE96;

color: #000;

text-decoration: none;

width: 100%;

border-left: 15px solid #4F633F;

padding-left: 2px;

}

Linia "display: block;" este o functie a css-ului care ne ajuta sa extindem spatiul ocupat de text, pe orizontala ininteriorul div-ului, pe toata latimea acestuia.

Iata o ilustratie, pentru a intelege mai bine: In afara de asta, am stabilit siculoarea linkurilor ca fiind nergu (color: #000;), am dezactivat sublinierea automata alinkurilor (text-decoration: none;) si am inlaturat si un posibil bug. Fara "width: 100%;"de multe ori nu se afiseaza corect.

De asemenea, mai folosim un truc, si anume marginea din partea stanga.Obtinem astfel, un fel de bullet stilizat. Padding-ul este adaugat pentru evitareasuprapunerii textului pe bullet-ul creat astfel.

.menu a:hover {

text-decoration: none;

color: #fff;

background-color: #000;


5/10

border-left: 15px solid #EFB52B;

}

Meniul nu ar avea nici un farmec fara un efect de mouse-over. Asadar obtinem cu aceasta declaratie urmatoarele:textul isi schimba culoarea in alb, fundalul devine negru, iar bullet-ul devine orange.

Alt exemplu

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 obara de navigarefie ea orizontala sau un meniu vertical sunt folosite listele HTML care ulterior sunt

personalizate folosind CSS. Linkuri normale in interiorul tagului care va fi incapsulat in tagul

Am atasat mai jos codul html necesar:

Acasa

Articole

RSS feed

Contact

Vom folosi acum CSSpentru 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 CSSde mai sus poate fi folosit atat pentrumeniuri verticalecat si pentru bara orizontala.

CSS - Bara verticala de meniu

Pentru a un meniu verticalde linkuri nu trebuie decat sa reprezentam linkurile ca un block si sa stabilim latimea blocului. Sa

trecem la treaba.a {display:block;width:100px;}


6/10

***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;}

AcasaArticoleRSS FeedtContact

Am pusaicisi 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 orizontalecu 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.
http://tutorialehtml.com/tutoriale-css/ex/meniu-vertical.htmlhttp://tutorialehtml.com/tutoriale-css/ex/meniu-vertical.htmlhttp://tutorialehtml.com/tutoriale-css/ex/meniu-vertical.htmlhttp://tutorialehtml.com/tutoriale-css/ex/meniu-vertical.html


7/10

Iata csi codul CSSaferent.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 orizontalafolosind 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 atasataicidoua modele de meniu orizontal, unul folosind inlinesi altul folosind float. Succes!!!

In continuare va voi arata cum se creaza o bara de meniu orizontala, ale carei elemente sa-si

schimbe culoarea cand trecem cu mouse-ul peste ele. Pentru aceasta nu voi folosi javascript,

considerand ca este mai la indemana si mai elegant sa facem acest lucru doar cu html si css.

(javascript poate mari timpul in care se deschide pagina iar noi nu dorim acest lucru).

Voi folosi div-uri (nu tabele) iar butoanele nu vor fi doar niste imagini, vor avea si text, asta pentru a

putea fi citite de robotii motoarelor de cautare, cu atat mai mult cu cat de cele mai multe ori numele

elementelor din meniu caracterizeaza continutul unei pagini.

Pentru asta avem nevoie de doua fisiere pe care le voi denumi index.htmlsi stil.csssi rezultatul final

ar trebui sa fie o bara de meniu ca cea din imaginea de mai jos..

Codul din index.html:

titlu site
http://www.tutorialehtml.com/tutoriale-css/ex/meniu-orizontal.htmlhttp://www.tutorialehtml.com/tutoriale-css/ex/meniu-orizontal.htmlhttp://www.tutorialehtml.com/tutoriale-css/ex/meniu-orizontal.htmlhttp://www.tutorialehtml.com/tutoriale-css/ex/meniu-orizontal.html


8/10

Home

Pagina 1

Pagina 2

Pagina 3

Pagina 4

Pagina 5

Pagina 6

Destul de simpu pana acum. Mai ramane sa scriem codul dinstil.css, fisier la care facem referire

zona a fisierului html:

#barameniu {

margin: 0 auto;

padding: 0;

position: relative;

width: 750px;

height: 28px;

background: #f00;

font: bold 12px tahoma, Arial, Helvetica, sans-serif;

}

#barameniu ul {

margin: 0;

padding: 0;

float: none;

}

#barameniu li {

padding: 0 2px 0 0;

margin: 0;

float: left;

background: url(images/separator.png) 100% 0 no-repeat; /*

elementele

meniului sunt separate de o imagine (width=2, height=inaltimea

pe care o doriti pt bara de meniu */

}

#barameniu ul li a:link, #barameniu ul li a:active, #barameniu ul

li a:visited {


9/10

display: block;

float: left;

padding: 0 20px;

height: 28px;

line-height: 28px;

color: #fff;

text-decoration: none; /*link-urile nu sunt subliniate */

}

#barameniu ul li a:hover {

background: #cf0; /*schimba culoarea backgroundului

elementelor listei

cand trecem cu mouse-ul peste ele (cand sunt

active)

}

Efectul dorit l-am obtinut dar nu este foarte spectaculor din punct de vedere esteti. Se poate folosi ca

background pentru bara de meniu o imagine. Sa facem o proba. Am folosit o imagine cu

dimensiunile : h=28px si w=2.

Iata ce am obtinut:

Modificarile le facem doar in fisierul CSS:

#barameniu {

margin: 0 auto;

padding: 0;

position: relative;

width: 750px;

height: 28px;background: #fff url(images/fundal.png) 0 0 repeat-x;

font: bold 12px tahoma, Arial, Helvetica, sans-serif;

}

.

.

.

.

#navbar ul li a:hover {

background: url(images/fundal.png) 0 100% repeat-x; /*pentru mouse-over

am folosit aceeasi imagine dar aceasta isi modifica nuanta atunci cand link-

ul este activ */


10/10

}

SURSA:ETUTORIALE.RO

Pt meniu dublu vezi :

http://www.marplo.net/curs_css/orizontal-vertical-dublu-menu-css.html
http://etutoriale.ro/articles/1742/1/Elemente-de-pagina-%28partea-1%29/http://etutoriale.ro/articles/1742/1/Elemente-de-pagina-%28partea-1%29/http://etutoriale.ro/articles/1742/1/Elemente-de-pagina-%28partea-1%29/http://etutoriale.ro/articles/1742/1/Elemente-de-pagina-%28partea-1%29/

tutorial meniuri in html

Documents