Submeniu orizontal html. Meniu orizontal simplu încrucișat

Este rar să vezi meniuri orizontale pe un site web care se derulează atunci când treci cu mouse-ul, dar sunt foarte frumoase și funcționale. Sau cum se spune - utilizabil. Astăzi vom crea un meniu derulant orizontal utilizabil folosind cod CSS pur. Am observat adesea că oamenii folosesc javascript pentru a obține acest efect. De fapt, totul se poate face doar cu CSS. Să ne uităm la două opțiuni pentru meniurile derulante orizontale folosind CSS. E bine să ai de ales, cred că ești de acord.

Dacă aveți nevoie de un meniu orizontal simplu. Citind articolul despre creație. După ce ați stăpânit elementele de bază, începeți să creați un meniu derulant.

Pentru claritate, consultați captura de ecran de mai jos. Probabil că sunteți familiarizat cu această structură orizontală a meniului.

Pentru o claritate și mai mare, să ne uităm la structura HTML a meniului. Să ne asigurăm ce anume a atins poziția orizontală a meniului și valabilitatea acestuia. Structura meniului css:

Afișarea și ascunderea copiilor meniului se face folosind CSS: ul > li:hover ul. Este destul de simplu. Acest comutator vă permite să definiți comportamentul tuturor meniurilor copil. La crearea unui meniu orizontal obișnuit, pe lângă display:block adăugăm și alte stiluri, cum ar fi culoarea de fundal etc. Singura diferență dintre un meniu obișnuit și un meniu derulant este că nu stilăm UL-urile imbricate. Trebuie să-l plasați pe elementul LI dependent, care este hoverat (UL > LI: hover).

Să ne uităm la codul CSS:

#header (înălțime:120px; poziție:relativ; fundal: url transparent(header_bkg.png) repetare-x derulare sus în centru;) #nav ( margine:0px; padding:0px; poziție:absolut; sus: 70px; afișare:bloc ;) #nav > li ( list-style-type:none; float:left; display:block; margin:0px 10px; position:relative; padding:10px; width:100px;) #nav > li:hover ul ( display :block; ) #nav > li:hover ( background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; ) #nav li ul ( margin:0px; padding:0px; display:none;) #nav li ul li (list-style-type:none; margin:10px 0 0 0;) #nav li ul li a ( display:block; padding:5px 10px; culoare:#A2E200; text- decoration:none;) #nav li ul li:hover a ( background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;) #nav li span ( cursor:pointer; margin :0px 10px; font-weight:bold; )

Iată cum să o faci folosind cod CSS pur. Încă nu îmi pot da seama de ce ar trebui să folosesc JavaScript, cu excepția poate pentru .

Vă rugăm să rețineți că opțiunea 1 nu va funcționa în IE6. Soluția pentru compatibilitatea meniului cu IE6 va fi o bucată de cod js. Mai exact, haideți să creăm un meniu. Mai jos este o captură de ecran a meniului viitor:

Designul meniului este similar cu prima versiune, așa că să trecem la codul în sine.

• Punctul nr. 1
• Punctul nr. 2
  • Subpunctul nr. 1
  • Subpunctul nr. 2
  • Subpunctul nr. 3
• Punctul nr. 3
  • Subpunctul nr. 1
  • Subpunctul nr. 2
  • Subpunctul nr. 3
  • Subpunctul nr. 4
  • Subpunctul nr. 5
• Punctul nr. 4
  • Subpunctul nr. 1
• Punctul nr. 5
  • Subpunctul nr. 1
  • Subpunctul nr. 2
  • Subpunctul nr. 3
  • Subpunctul nr. 4
  • Subpunctul nr. 5

#meniu ( padding: 0; margin: 0; font-size: 100%; font-family: Georgia; ) #menu li ( list-style: none; float: left; inaltime: 33px; padding: 0; margin: 0 ; lățime: 150px; text-align: center; fundal: #171717; poziție: relativ; padding-top: 12px; ) #menu li ul ( list-style: none; padding: 0; margin: 0; width: 150px; afișare: niciunul; poziție: absolut; stânga: 0; sus: 45px; ) #menu li ul li ( float: niciunul; înălțime: 33px; margine: 0; lățime: 150px; text-align: center; fundal: #7F7F7F; ) #menu li a ( afișare: bloc; lățime: 150 px; înălțime: 33 px; culoare: #fff; text-decoration: none; ) #menu li:hover ul, #menu li.jshover ul ( afișare: bloc; ) # meniu li:hover, #menu li.jshover ( fundal: #424242; )

JS - soluție pentru IE6

jsHover = function() ( var hEls = document.getElementById("meniu").getElementsByTagName("li"); pentru (var i=0, len=hEls.length; i

Toate etichetele de după aceasta (și alte etichete legate de HTML5) vor fi percepute în mod normal de browserele mai vechi.

Să revenim direct la marcajul nostru. Apoi, trebuie să inserăm o listă cu marcatori în eticheta noastră, pentru mine arată astfel:

• Acasă
• Despre noi
• Portofoliu
• Blog
• Contacte

Așadar, se pare că am terminat cu marcajul, este timpul să începem să scriem stiluri, deoarece acum meniul nostru nu arată foarte bine, ca să spunem ușor:

Și astfel, primul lucru pe care trebuie să-l facem atunci când amenajăm meniul este să eliminam marcatorii de listă, evident că nu avem nevoie de ei, o facem astfel:

Ul( stil-listă:niciuna; )

După aceasta, meniul nostru va arăta astfel:

Nu prea îmi place cum meniul nostru este lipit de marginile browserului, să reparăm asta:

Cu acest cod, am stabilit lățimea meniului, i-am dat margini de sus și de jos de 50 px și l-am poziționat în centru. Cine știe, dacă un element bloc are o lățime, atunci pentru a poziționa acest element strict în centru trebuie doar să-i dăm o marjă externă (marjă) la dreapta și la stânga cu valoarea auto.

Următorul pas este să facem în sfârșit meniul nostru orizontal; acest lucru se face prin setarea elementelor