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 cu extensia css Vezi mai jos

n aceast lecie video vei nva cum s facei un meniu dropdrown (dinamic) n HTML iCSS. Fiecare site are nevoie de un mod de navigare pentru vizitatorii si. Acest mod de navigare n cadrul unui site se realizeaz cu ajutorul meniurilor. Se pot crea meniuri cu JavaScript, Flash,Ajax , JQuery, HTML, CSS etc. Urmrii lecia video de mai jos, unde avei explicaiile necesare pentru crearea unui meniu drop-drown utiliznd HTML i CSS.
Mai jos, putei s descrcai acest exemplu de meniu drop-drown (dinamic) n HTML i CSS . El cuprinde dou fiiere, meniu.html i style.css. Meniu.html este fiierul principal html care va creiona meniul site-ului i pagina web. Style.css este fiierul css (Cascading Style Sheets) care va crea stilul, adic culorile, poziionarea elementelor, forma etc. Referitor la fiierul style.css, observai c acesta este inclus n fiierul html cu ajutorul elementului <link>, aa cum apare mai jos: <link href="/style.css" type="text/css" rel="stylesheet" /> Acest lucru nseamn c noi utilizm un fiier css extern, style.css, pe care l inserm n pagina html cu ajutorul elementului <link>, aa cum apare mai sus. Acest exemplu de meniu drop-drown (dinamic) , realizat n HTML i CSS, este foarte util pentru cei care se afl la nceput de drum n crearea i dezvoltarea paginilor web, pentru cei care doresc s nvee tehnologiile web de creare a paginilor web, cum ar fi HTML i CSS. De asemenea, este foarte util pentru elevii de liceu sau pentru oricine care dorete s nvee HTML i CSS. Adresa videoclipului : videoclip meniu https://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 urmaresti filmul
Alt ex Mie nu mi-a iesit adica nu transforma meniul din vertical in orizontal si nu elimina bulinutele de la lista Ok revin cu inca un mic tutorial, imi imaginez ca exista destule pe net dar fac si eu unul cat se poate de simplu. In acest tutorial vom crea un meniu de link-uri ( simplu zis un meniu ), orizontal, folosind HTML si CSS. Pentru inceput creeam un UL ( Unordered List ) adica o lista neordonata, in care elementele listei sunt.link-urile noastre.

<ul> <li><a href="index.html">HOME</a></li> <li><a href="produse.html">PRODUSE</a></li>

<li><a href="despre-firma.html">DESPRE NOI</a></li> <li><a href="contact.html">CONTACT</a></li> </ul>

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

<div id="meniu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="produse.html">PRODUSE</a></li> <li><a href="despre-firma.html">DESPRE NOI</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div>
Acum vom aplica partea de CSS, pentru inceput sa scapam de bulinute asa ca vom adauga in partea de CSS a paginii noastre web urmatoarele:

#meniu ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; }

Codul de mai sus elimina bulinutele, si Acum mai adaugam o linie de CSS care va transforma lista noastra din verticala in orizontala. spatiul\marginea.

#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, asa ca mai adaugam o line CSS.

#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; } #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 punem linkurile (meniul) intr-o lista si intr-un div. Acum, meniul nostru arata asa:

<a href="#">Link 1</a> <br> <a href="#">Link 2</a> <br> <a href="#">Link 3</a> <br> <a href="#">Link 4</a> <br> <a href="#">Link 5</a> <br> <a href="#">Link 6</a> <br>
Aplicand schimbarile despre care spuneam (listele si div-ul), va arata asa:

<div class="menu"> <ul> <li><a href="#">Link 1</a> </li> <li><a href="#">Link 2</a> </li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </div>
Urmeaza sa introducem cateva linii si in fisierul css:

.menu { padding: 0px;

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 fi introdus 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 (<ul>). Cu ajutorul lui "list-style: none;" scoatem bullet-ul afisat implicit in fata listelor, si apoi scoatem orice padding sau margine aplicate in mod natural de tag-ul <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 doua elemente 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 in interiorul div-ului, pe toata latimea acestuia. Iata o ilustratie, pentru a intelege mai bine: In afara de asta, am stabilit si culoarea linkurilor ca fiind nergu (color: #000;), am dezactivat sublinierea automata a linkurilor (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 evitarea suprapunerii textului pe bullet-ul creat astfel.

.menu a:hover { text-decoration: none; color: #fff; background-color: #000;

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 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> <li><a href="#">Articole</a></li> <li><a href="#">RSS feed</a></li> <li><a href="#">Contact</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.
ul{ 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 <li><a <li><a <li><a </ul> href="#">Acasa</a></li> href="#">Articole</a></li> href="#">RSS Feedt</a></li> href="#">Contact</a></li>

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!!!

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 denumiindex.html si stil.css si rezultatul final ar trebui sa fie o bara de meniu ca cea din imaginea de mai jos..

Codul din index.html: <html> <head> <meta http-equiv=content-type content=text/html; charset=iso-8859-1 /> <title>titlu site</title> <link href=stil.css rel=stylesheet media=all type=text/css /> </head> <body>

<div id=barameniu> <ul> <li><a href=index.html>Home</a></li> <li><a href=about.html>Pagina 1</a></li> <li><a href=#>Pagina 2</a></li> <li><a href=#>Pagina 3</a></li> <li><a href=#>Pagina 4</a></li> <li><a href=#>Pagina 5</a></li> <li><a href=#>Pagina 6</a></li> </ul> </div> </body> </html> Destul de simpu pana acum. Mai ramane sa scriem codul dinstil.css, fisier la care facem referire zona <head> 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 {

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 linkul este activ */

} SURSA: ETUTORIALE.RO

Pt meniu dublu vezi : http://www.marplo.net/curs_css/orizontal-vertical-dublu-menu-css.html