Meniu orizontal neobișnuit. Meniu CSS: meniu vertical orizontal în CSS
În acest tutorial vom crea un meniu orizontal folosind CSS. Desigur, puteți folosi soluții gata făcute, de exemplu, angajați programatori pentru CMS Made Simple. Cu toate acestea, nu căutați modalități ușoare, nu-i așa? :bătăuş:
Pasul 1 - marcaj HTMLÎn primul rând, trebuie să creăm elemente de listă cu o etichetă pentru fiecare articol din meniul nostru orizontal. Pentru a crea un submeniu trebuie să adăugați o altă listă de copii în interiorul celei părinte.
Inițial, meniul arată vertical, pentru a remedia acest lucru vom scrie câteva stiluri, vom edita indentările, marginile, culoarea de fundal și vom rotunji colțurile. Vom fixa lățimea și înălțimea. Vom alinia elementele de meniu la stânga folosind float: left (astfel încât navigarea să capete o structură orizontală).
Meniu, .menu ul, .menu li, .menu a ( marja: 0; umplutură: 0; chenar: niciunul; contur: niciunul; ) .meniu ( înălțime: 40px; lățime: 505px; fundal: #4c4e5a; fundal: - webkit-linear-gradient(sus, #5c5e6a 0%, #3c3d44 100%); fundal: -moz-linear-gradient(sus, #5c5e6a 0%, #3c3d44 100%); fundal: -o-linear-gradient( sus, #5c5e6a 0%,#3c3d44 100%); fundal: -ms-linear-gradient(sus, #5c5e6a 0%,#3c3d44 100%); fundal: linear-gradient (sus, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; ) .menu li (poziție: relativă; list-style: none; float: stânga; afișare: bloc ; înălțime: 40px; )
Să scriem următorul stil pentru un timp, ascunzând lista derulantă. Acest lucru va face editarea mai ușoară.
În continuare, vom scrie stiluri care adaugă câteva proprietăți CSS de bază, cum ar fi tipul fontului, culorile, umplutura etc. Apoi vom adăuga o umbră pentru text și tranzițiile de culoare pentru a crea un efect neted în care culoarea nu se schimbă instantaneu, ci la un anumit interval. Pentru a crea un separator de legături, să adăugăm un chenar la stânga și la dreapta, apoi eliminăm chenarul din stânga de la prima legătură și chenarul din dreapta de la ultima legătură. Când treceți cu mouse-ul peste meniu, doar culoarea se va schimba.
Meniu li a (afișare: bloc; umplutură: 0 14px; margine: 6px 0; înălțime linie: 28px; text-decor: niciunul; chenar-stânga: 1px solid #494942; chenar-dreapta: 1px solid #4f5058; font- familie: Helvetica, Arial, sans-serif; greutate font: bold; dimensiune font: 13px; culoare: #f4f4f4; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : culoare .3s ease-in-out; -moz-transition: culoare .3s ease-in-out; -o-transition: culoare .3s ease-in-out; -ms-transition: culoare .3s ease-in- ieșire; tranziție: culoare .3s ease-in-out; ) .meniu li:primul copil a (chenar-stânga: niciunul; ) .meniu li:last-child a( chenar-dreapta: niciunul; ) .meniu li: plasați cursorul > a (culoare: #9fde63; )
Pasul 4 - Meniu derulantÎn primul rând, să eliminăm această linie de cod pe care am adăugat-o în pasul al doilea.
Meniu ul (afișare: niciunul; )
Acum vom edita stilul pentru submeniu. Să adăugăm o poziționare a submeniului de 40px în partea de sus și 0px în stânga elementului de meniu și să adăugăm colțuri rotunjite în partea de jos. Să setăm opacitatea la zero și să o schimbăm la 1 la trecerea cursorului pentru a crea un efect de fade in/out. Pentru efectul de diapozitiv sus/jos, trebuie să setăm înălțimea listei la 0px când meniul derulant este ascuns și la 36px când trecem cu mouse-ul peste meniul derulant.
Meniu ul ( poziție: absolut; sus: 40px; stânga: 0; opacitate: 0; fundal: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- rază: 0 0 4px 4px; -webkit-transition: opacitate .3s ease .1s; -moz-transition: opacitate .3s ease .1s; -o-tranziție: opacitate .3s ease .1s; -ms-transition: opacitate .1s. 3s ease .1s; tranziție: opacitate .3s ease .1s; ) .menu li:hover > ul ( opacitate: 1; ) .menu ul li ( înălțime: 0; overflow: ascuns; padding: 0; -webkit-transition: înălțime .3s ease .1s; -moz-transition: înălțime .3s ease .1s; -o-transition: înălțime .3s ease .1s; -ms-transition: înălțime .3s ease .1s; tranziție: înălțime .3s ușurință . 1s; ) .menu li:hover > ul li ( înălțime: 36px; overflow: vizibil; umplutură: 0; )
Setați lățimea meniului derulant pe care se poate face clic la 100 px. După fiecare link am adăugat un chenar pentru a le separa. Vom elimina chenarul din ultimul link.
Meniu ul li a ( lățime: 100 px; umplutură: 4 px 0 4 px 40 px; margine: 0; chenar: niciunul; chenar- jos: 1 px solid #464649; ) .menu ul li:last-child a ( chenar: niciunul; )
Pentru a completa un meniu CSS orizontal, trebuie să adăugați o pictogramă pentru fiecare submeniu derulant. Pentru a face acest lucru, vom crea o clasă personalizată pentru fiecare dintre submeniuri și vom adăuga o imagine de fundal.
Meniu a.d ( fundal: url(docs.png) fără repetare 6px centru; ) .menu a.m ( fundal: url(bubble.png) fără repetare 6px centru; ) .menu a.s ( fundal: url(arrow.png) nu -repetă 6px centru; )
Am creat cu succes un meniu vertical orizontal folosind stiluri CSS3 și fără a-l folosi, deși a fost și posibil. Dacă aveți întrebări, spuneți-mi în comentarii.
(descărcări: 398)
De la autor: Vă urez bun venit pe blogul nostru despre construirea site-ului web. Aceasta este o serie de articole dedicate noii specificații și astăzi aș dori să vă spun cum să creați un meniu în HTML5 și cum diferă acest proces de același din versiunile anterioare ale limbajului.
Care sunt diferențeleÎn primul rând, aș dori să spun că specificația nu este atât de nouă - și-a început dezvoltarea în 2009. De fapt, de atunci a existat o dezvoltare constantă - noi funcții apar în html5, browserele moderne acceptă din ce în ce mai mult aceleași caracteristici, astfel încât în curând va fi posibil să vorbim despre suport complet pentru această tehnologie, deși nu este un singur întreg, este mai degrabă un set de noi posibilități, fiecare dintre acestea fiind independentă.
Ei bine, bine, dar ce este diferit la crearea navigației principale (meniu), deoarece citiți un articol pe acest subiect, atunci ar trebui să existe cu siguranță unele diferențe. Ei bine, cum a fost creat meniul înainte? De obicei, a fost folosită o listă cu marcatori, care a fost plasată într-un container suplimentar pentru toată navigația - un div obișnuit.
Deci, odată cu apariția noilor etichete, acum puteți face ceva mai corect - în loc de o etichetă div, înfășurați meniul în nav - un nou element semantic care a fost creat special pentru a colecta cele mai importante link-uri din el și pentru a le grupa împreună.
Puteți pune fie o listă, fie doar un set de link-uri în nav. Mi se pare că aceasta este o soluție și mai simplă și mai corectă, deși în multe șabloane puteți vedea în continuare implementarea meniului folosind etichetele ul, li, a.
Interesant este că containerul de navigare a fost creat special pentru link-urile prioritare din pagină. De fapt, pe o pagină poate exista mai mult de un astfel de container, dar ar trebui să plasați în ele doar acele link-uri care formează de fapt navigația principală (de exemplu, meniul principal de sus și duplicatul acestuia în subsolul paginii).
Cum să faci un meniu orizontal folosind html5Acasă Servicii Contacte Recenzii
Nici măcar nu aveți nevoie de nicio încadrare în listă; totul va fi afișat inițial pe o singură linie, deoarece linkurile sunt elemente inline.
Un alt lucru este că sunt foarte limitate în design datorită proprietăților lor inline. Veți putea opera numai cu proprietăți precum: culoare, dimensiunea fontului, marginile. Dacă doriți să setați o anumită culoare de fundal, să faceți separatoare și să adăugați umplutură (sau să determinați dimensiunea fiecărui element de meniu), atunci nu veți putea face acest lucru cu o linie.
Aici va trebui să ne transformăm articolele în elemente bloc. Pentru a face acest lucru, trebuie să scrie proprietatea:
afisare: bloc; |
Acum merg de sus în jos, adică navigarea noastră a devenit verticală. Pentru a-l transforma înapoi în orizontală, trebuie să adăugați anumite proprietăți. De exemplu, în loc de un tip de bloc, definiți un tip de linie de bloc pentru ele sau dați-le (float: stânga). Citiți mai multe despre aceste metode.
Navigare pe verticalăDe obicei, pentru a face un meniu vertical în html5, ei folosesc o listă, dar markup-ul pe care ți l-am dat mai sus este potrivit și pentru noi. După cum ați văzut, dacă convertiți link-uri în link-uri bloc, acestea se vor alinia automat unul după altul de sus în jos, deoarece două blocuri nu pot fi pe aceeași linie.
Acum le puteți aplica regulile de proiectare necesare. Blocurile au mult mai multe proprietăți decât un element inline, așa că aveți mult mai multe opțiuni. De exemplu, am adăugat acestea:
a( text-decor: niciunul; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afișare: bloc; fundal: liniar-gradient(la dreapta, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100%); lățime: 200 px; text-align: center )
text - decor : nici unul ; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afisare: bloc; fundal: liniar - gradient (la dreapta, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%); lățime: 200px; text - aliniere : centru |
Dacă site-ul dvs. este mai mult decât o singură pagină web, atunci ar trebui să luați în considerare adăugarea unei bare de navigare (meniu). Meniul este o secțiune a unui site web concepută pentru a ajuta vizitatorii să navigheze pe site. Orice meniu este o listă de link-uri care duc la paginile interne ale site-ului. Cel mai simplu mod de a adăuga o bară de navigare pe site-ul dvs. este să creați un meniu folosind CSS și HTML.
Meniu verticalPrimul pas în crearea unui meniu vertical este crearea unei liste cu marcatori. De asemenea, va trebui să putem identifica lista, așa că îi vom adăuga un atribut id cu identificatorul „navbar”. Fiecare element
Următoarea noastră sarcină este să resetam stilurile implicite ale listei. Trebuie să eliminăm căptușeala exterioară și interioară din listă în sine și marcatoarele din articolele din listă. Apoi setați lățimea dorită:
#navbar (marja: 0; padding: 0; list-style-type: niciunul; lățime: 100px; )
Acum este timpul să stilați link-urile în sine. Le vom adăuga o culoare de fundal, vom modifica parametrii textului: culoare, dimensiunea și greutatea fontului, vom elimina sublinierea, vom adăuga mici indentații și vom redefini afișajul element de la inline la bloc. În plus, cadrele din stânga și de jos au fost adăugate elementelor din listă.
Cea mai importantă parte a modificărilor noastre este redefinirea elementelor inline pentru a bloca elemente. Acum linkurile noastre ocupă tot spațiul disponibil al articolelor din listă, adică pentru a urmări linkul nu mai trebuie să plasăm cursorul exact peste text.
#navbar a ( culoare de fundal: #949494; culoare: #fff; umplutură: 5px; text-decor: niciunul; greutate font: bold; chenar-stânga: 5px solid #33ADFF; display: block; ) #navbar li ( chenar-stânga: 10px solid #666; chenar-jos: 1px solid #666; )
Am combinat tot codul descris mai sus într-un singur exemplu, acum făcând clic pe butonul de încercare, puteți accesa pagina de exemplu și vedeți rezultatul:
Titlul documentului #navbar ( marja: 0; umplutură: 0; list-style-type: niciunul; lățime: 100px; ) #navbar li ( chenar-stânga: 10px solid #666; chenar-jos: 1px solid #666; ) # bara de navigare a (culoare de fundal: #949494; culoare: #fff; umplutură: 5px; decor text: niciuna; greutate font: bold; chenar-stânga: 5px solid #33ADFF; afișare: bloc; )
Încerca "Când treceți mouse-ul peste un element de meniu, aspectul acestuia se poate schimba, atrăgând atenția utilizatorului. Puteți crea un astfel de efect folosind pseudo-class:hover.
Să revenim la exemplul de meniu vertical discutat mai devreme și să adăugăm următoarea regulă la foaia de stil:
#navbar a:hover (culoare de fundal: #666; chenar-stânga: 5px solid #3333FF; ) Încercați »
Meniu orizontalÎn exemplul anterior, ne-am uitat la bara de navigare verticală, care se găsește cel mai adesea pe site-urile web din stânga sau dreapta zonei principale de conținut. Cu toate acestea, meniurile cu link-uri de navigare sunt adesea situate orizontal în partea de sus a paginii web.
Un meniu orizontal poate fi creat prin stilarea unei liste obișnuite. Afișează proprietatea elementelor
Pentru a plasa elementele de meniu pe orizontală, creați mai întâi o listă cu marcatori cu linkuri:
Să scriem câteva reguli pentru lista noastră care resetează stilul implicit folosit pentru liste și să redefinim elementele din listă de la bloc la inline:
#navbar (marja: 0; padding: 0; list-style-type: niciunul; ) #navbar li ( display: inline; ) Încercați »
Acum tot ce trebuie să facem este să definim stilul pentru meniul nostru orizontal:
#navbar (marja: 0; umplutură: 0; list-style-type: niciunul; chenar: 2px solid #0066FF; chenar-radius: 20px 5px; lățime: 550px; text-align: center; culoare de fundal: #33ADFF; ) #navbar a ( culoare: #fff; umplutură: 5px 10px; text-decor: niciunul; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( chenar-raza: 20px 5px ; culoare de fundal: #0066FF; ) Încercați »
Meniu derulantMeniul pe care îl vom crea va avea legături principale de navigare situate în bara de navigare orizontală și sub-articole care vor apărea numai atunci când cursorul mouse-ului trece peste elementul de meniu la care se referă aceste sub-articole.
Mai întâi trebuie să creăm structura HTML a meniului nostru. Vom plasa principalele legături de navigare într-o listă cu marcatori:
Vom plasa sub-articolele într-o listă separată, cuibându-l în element
Încerca "
Acum să începem să scriem codul CSS. În primul rând, trebuie să ascundeți lista cu sub-articole folosind afișarea: none; declaration, astfel încât acestea să nu fie afișate pe pagina web tot timpul. Pentru a afișa sub-articole, avem nevoie de asta atunci când trecem cu mouse-ul peste un element
#navbar ul ( afișare: niciunul; ) #navbar li:hover ul ( afișare: blocare; )
Îndepărtăm indentările și marcajele implicite din ambele liste. Facem elemente de listă cu link-uri de navigare plutitoare, formând un meniu orizontal, dar pentru elementele de listă care conțin sub-articole setăm float: none; astfel încât să apară unul sub celălalt.
#navbar, #navbar ul ( margine: 0; padding: 0; list-style-type: none; ) #navbar li ( float: stânga; ) #navbar ul li ( float: none; )
Apoi, trebuie să ne asigurăm că submeniul nostru drop-down nu împinge în jos conținutul de sub bara de navigare. Pentru a face acest lucru, vom seta poziţia elementelor din listă: relativă; , și o listă care conține sub-articole poziție: absolut; și adăugați o proprietate de top cu o valoare de 100%, astfel încât submeniul poziționat absolut să apară exact sub link.
#navbar ul ( afișare: niciunul; poziție: absolut; sus: 100%; ) #navbar li ( float: stânga; poziție: relativ; ) #navbar ( înălțime: 30px; ) Încercați »
Înălțimea listei părinte a fost adăugată intenționat, deoarece browserele nu consideră conținutul plutitor ca conținut element, fără a adăuga înălțime lista noastră va fi ignorată de browser, iar conținutul care urmează listei se va încheia în meniul nostru.
Acum trebuie doar să stilăm ambele liste și meniul drop-down va fi gata:
#navbar ul ( afișare: niciuna; culoare de fundal: #f90; poziție: absolut; sus: 100%; ) #navbar li:hover ul ( afișare: bloc; ) #navbar, #navbar ul (marja: 0; umplutură: 0; list-style-type: none; ) #navbar (înălțime: 30px; fundal-culoare: #666; padding-left: 25px; min-width: 470px; ) #navbar li ( float: stânga; poziție: relativă; înălțime: 100%; ) #navbar li a ( afișaj: bloc; padding: 6px; lățime: 100px; culoare: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover (culoare de fundal: #f90; ) #navbar ul li:hover (culoare de fundal: #666; )
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.
Opțiunea 1 - Meniu derulant orizontalPentru 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 .
Opțiunea 2 - meniu orizontal + soluție pentru IE6Vă 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.
#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
Acum să creăm separat un fișier de stil numit main.css. Lista sa este prezentată în întregime mai jos.
Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*aliniază lista la stânga*/ width:auto;/*setează lățimea auto pe baza tipul și conținutul listei */ background-image: url(bg.gif); /*set the background image*/ background-repeat:repeat-x; /*repetă imaginea noastră pe orizontală*/ list-style:none; /*elimină marcatorii listei*/ background-color:#4778c3; /*setează culoarea de fundal pentru imagine*/ font-size:13px; /*set the font size*/ font-family:Arial, Helvetica, sans-serif ; /*setează fontul*/ ) ul li ( float:left; /*aliniază elementele listei la stânga*/ ) ul a ( display:block; /*reprezentă linkurile meniului ca elemente de bloc*/ width:100px; /* setați dimensiunea blocului*/ înălțimea: 30px; /* și înălțimea blocului*/ text-align:center; /*inscripția centrată*/ line-height: 2.1em; /*line spacing*/ text-decoration:none; /* eliminați sublinierea din link-uri*/ color:#fff; /*link text color - white*/ border-right:#fff solid 1px; /*border pe partea dreaptă a blocului (linia albă 1px)*/ ) ul a: hover (culoare:#ccc; /*link-ul își schimbă culoarea când trece cu mouse-ul peste*/ )
Cred că nu ar trebui să existe întrebări cu privire la conținutul fișierului main.css; am scris sfaturile în comentarii suficient de detaliat și clar, așa că nu mă voi repeta. Nu uitați să-l conectați la pagina noastră menu.html folosind
Rezuma. Drept urmare, am obținut un meniu orizontal complet între browsere, care arată la fel nu numai în toate browserele moderne, ci și în rarități precum IE 5.5 și IE 6.0. Toate elementele de meniu sunt prezentate ca elemente de bloc și au aceleași dimensiuni de 100 px lățime și 30 px înălțime. Ca separator pentru elementele de meniu, un design de element bloc este utilizat folosind un chenar alb din dreapta de 1px grosime. Acesta este practic cel mai simplu mod de a implementa un meniu orizontal. Desigur, dacă doriți, îl puteți modifica, îl puteți face mai frumos și mai funcțional folosind imaginație, proprietăți CSS și elemente grafice suplimentare. Ei bine, meniul nostru orizontal arată cam așa:
Avantajele acestei soluții:
Usor de facut
Cod simplu
Fără tabele sau javascript
Compatibilitate între browsere: meniul arată la fel în toate browserele
Se folosește un singur desen
Cod minim pe pagina menu.html
Cod minim pentru implementarea stilurilor în main.css
Fișierele folosite în acest exemplu pot fi descărcate în arhivă
