Meniul
AcasăRețea socială

Meniu adaptiv folosind CSS. Meniu adaptabil pentru pagina de destinație

Nu toate proiectele necesită efecte inutile, care pot încărca semnificativ paginile, mai ales când vine vorba de layout adaptiv, unde utilizatorul poate vizualiza site-ul pe smartphone-uri sau tablete. Majoritatea acestor efecte sunt create folosind JavaScript, așa că, ca exemplu, am decis să arăt cum se poate realiza unul dintre cele mai importante elemente ale site-ului și anume meniul de navigare, practic fără a apela la JS, dar mai ales doar folosind CSS. Este absolut imposibil să refuzi să folosești JS din motivul că pe dispozitivele mobile și pe computere sau laptopuri obișnuite, multe evenimente sunt diferite și, dacă pe un computer în CSS putem folosi proprietatea în siguranță. :planare, atunci nu va funcționa pe o tabletă așa cum ne-am dori. Cel mai nerăbdător poate imediat ( în exemplu, modificați lățimea ferestrei browserului).

Deci, am stabilit următoarea sarcină: să creăm un meniu flexibil în lățime, cu trecerea la versiunea sa mobilă, în care meniul va fi un meniu derulant atunci când treceți cu mouse-ul sau apăsați un buton. Structura HTML este tipică pentru astfel de elemente, cu excepția faptului că mai adăugăm un element - un buton pentru a extinde/ascunde meniul în versiunea mobilă:

≡

CSS nu este în întregime standard. Ne vom face meniul să se comporte ca și cum am folosi o masă. Aș dori să subliniez imediat că nu toate browserele acceptă proprietățile pe care le vom folosi. Pot apărea probleme cu versiunile de IE mai mici decât versiunea 8 ( deși este timpul să nu te mai concentrezi asupra lor) și există câteva mici dificultăți cu IE8, dar voi scrie mai jos cum să le rezolv.

* ( margine: 0; umplutură: 0; ) antet (culoare de fundal: #C0C0C0; ) #meniu ( afișare: tabel; /* descriere de mai jos */ lățime: 100%; chenar-restrângere: restrângere; -webkit-box- sizing: border-box; table-row; /* descriere de mai jos */ background-color: #FFFFFF list-style: none ) #menu ul li ( display: table-cell; /* descriere de mai jos */ border: 1px solid #999999; ) meniu ul li a ( afișare: bloc inline; lățime: 100%; înălțime: 50 px; înălțime linie: 50 px; dimensiune font: 1,2 em; text-align: centru; ) #menu ul li a:hover ( fundal- culoare: #990000; culoare: #FFFFFF; ) #nav_button (afișare: niciunul; lățime: 50px; dimensiunea fontului: 2.5em; text-align: center; culoarea fundalului: #FFFFFF; chenar: 1px #949494; cursor: pointer; ) ecran @media și (lățime maximă: 600px) ( /* descriere de mai jos */ #menu ( afișare: bloc în linie; poziție: relativă; lățime: auto; ) #menu ul ( afișare: nici unul; poziție: absolută; sus: 0; latime: 100%; indicele z: 20; ) #menu ul li ( display: list-item; border-top: none; ) #nav_button ( display: inline-block; ) #menu:hover, #menu.open_nav ( lățime: 100%; -webkit-user-select : none; /* descriere de mai jos */ -moz-user-select: none /* descriere de mai jos */ -webkit-touch-callout: none /* descriere de mai jos */ ) #menu:hover ul, #menu.open_nav; ul (display: block; margin-top: 50px; ) )

Unor stiluri nu trebuie să li se acorde atenție; culoarea de fundal, dimensiunea fontului etc. - aceasta este doar în scop demonstrativ. Și ar trebui să ne intereseze următoarele proprietăți cu valorile lor:

Display: masa; Indică faptul că elementul se va comporta similar cu elementul

afișare: masă-rând; Elementul se va comporta ca afisare: tabel-celula; Elementul se va comporta ca
sau box-sizing: chenar-box; (și cu prefixe de furnizor) Când se calculează lățimea și înălțimea unui element, proprietățile lățimii și înălțimii vor include valorile marjelor ( căptușeală) și limite ( frontieră). Este necesar pentru a evita apariția defilării orizontale, deoarece fără această proprietate, cu lățimea meniului de 100%, se va adăuga și grosimea chenarului, iar dacă există, se va adăuga și umplutură. -webkit-user-select: niciunul; și -moz-user-select: niciunul; Împiedică selectarea unui element sau text. Este necesar pentru versiunea mobilă pentru a evita inconsecvențele atunci când utilizatorul trece prin elementele de meniu în loc să facă clic pe el. -webkit-touch-callout: niciunul; Dezactivează afișarea balonului explicativ atunci când atingeți lung un element. Funcționează numai în Chrome și Safari. La fel ca în proprietatea anterioară, este folosit pentru a anula acțiunile nedorite atunci când lucrați cu un element. @media (interogare media) Subiectul este destul de larg, dar pe scurt, îi spune browserului ce proprietăți să folosească pentru anumite tipuri de media sau specificații ale dispozitivului. În cazul nostru, folosiți-l pentru ecran (monitor) și lățime maximă: 600px (dacă lățimea ferestrei browserului este mai mică de 600px).

Cel mai interesant este că am putea pune capăt acestui lucru dacă nu ținem cont de smartphone-uri, tablete și spunem cu încredere că meniul este realizat integral în HTML și CSS. Dar va trebui să apelezi la ajutorul JS/jQuery, iar în acest caz, din moment ce s-a decis să o faci cu cea mai mică încărcare, JavaScript pur.

Var d = document, navBut = d.getElementById("nav_button"), // buton pentru a activa meniul navMenu = d.getElementById("meniu"); // meniu derulant // funcție pentru determinarea prezenței unui element părinte prin ID funcția hasParent(el, sId)( while(el) ( if (el.id == sId) return true; el = el.parentNode; ) returnează false ) // atingând butonul, adăugați o clasă de meniu, // care corespunde proprietății în css „#menu:hover” // și extindeți meniul navBut.addEventListener("touchstart", function(e) ( e.preventDefault(); navMenu.classList .add("open_nav"), false); // la atingere în document, // dacă evenimentul nu a fost în niciun element de meniu (determinat folosind funcția „hasParent”), // eliminați clasa „open_nav” din meniu, ceea ce duce la închiderea sa d.addEventListener( "touchstart", function(e) ( if(!hasParent(e.target, "meniu")) navMenu.classList.remove("open_nav"); ), false);

Scriem acest cod într-un fișier js separat și îl includem în partea de jos a paginii, înainte de eticheta de închidere. Acum câteva cuvinte despre compatibilitatea între browsere... Dacă contați pe Internet Explorer sub versiunea nouă, atunci pentru ca acesta să funcționeze corect, trebuie să conectați două scripturi de remediere în interiorul etichetei:

Primul permite browserelor mai vechi să perceapă în mod adecvat etichetele HTML5, iar al doilea permite „interogări media”, cu care, de asemenea, nu sunt prietenoși. Deși, pe de altă parte, astfel de browsere nu sunt folosite pe dispozitivele mobile, iar aceeași etichetă poate fi înlocuită cu . Prin urmare, dacă folosiți sau nu aceste scripturi este, desigur, decizia dvs. personală, dar le consider redundante. Acum meniul este gata de utilizare pe orice dispozitiv.

De foarte multe ori, mai ales începătorii, în căutarea frumuseții imaginare a site-ului, îl umple peste măsură cu grafică inutilă, scripturi care, deși efectuează o mică acțiune, cântăresc uneori mai mult decât întreaga pagină. Nu mergeți la extreme și gândiți-vă la acei utilizatori care vă pot accesa nu numai de pe diferite dispozitive, ci și printr-o conexiune la internet de viteză redusă. Noroc! ;)

Salutare prieteni, colegi! Ce mai faci? Sper că toată lumea se descurcă grozav :) Astăzi vom face un meniu adaptiv simplu pentru pagina noastră de destinație. Oamenii întreabă din ce în ce mai des despre asta, iar eu notez astfel de întrebări și încerc să scriu articole pe aceste subiecte în timpul meu liber.

Vă mulțumesc că mi-ați oferit idei noi în acest fel și că m-ați ajutat la dezvoltarea blogului. Apropo, despre ce subiect ai vrea să citești următorul articol? Vă rog să scrieți în comentarii, acest lucru este foarte important pentru mine. Acum, să începem...

Cum să faci un meniu responsive pentru un site web

Google a confirmat că, începând de la jumătatea lunii aprilie, receptivitatea site-ului pentru dispozitivele mobile va deveni unul dintre factorii de clasare. În acest sens, toate materialele despre cum să vă adaptați pagina de destinație sunt mai relevante ca niciodată. Astăzi nu voi explica nimic complicat, ci, dimpotrivă, vă voi spune cum să faceți un meniu adaptabil foarte simplu, cu un timp minim.

Practic va fi html + css, dar veți avea nevoie de un script foarte mic pentru a procesa clicul. Asa de…

Meniu orizontal receptiv

Să începem cu html. În primul rând, să includem biblioteca jquery. Probabil că îl utilizați de mult timp, așa că asigurați-vă că nu îl conectați a doua oară:

Acum marcajele. O listă neordonată obișnuită și un mic div care conține o pictogramă de meniu. Va fi vizibil doar la rezoluții scăzute.

  • Preț de descărcare
  • Contacte
  • Recenzii

    • După cum puteți vedea, nu este complicat, cred că îl puteți îmbunătăți singur după cum este necesar.
    Acum să adăugăm stiluri:

    #meniu ( fundal: #2ba9c0; lățime: 100%; umplutură: 10px 0; text-align: center; ) #meniu a ( culoare: #fff; text-decor: niciunul; umplutură: 12px 12px; ) #meniu a: hover (border-bottom: 4px solid #fff; background: #078ecb; ) .itemsMenu li (afișare:inline; padding-right: 35px; width:100%; margin: 0 auto; ) .itemsMenu li img( vertical-align : mijloc; margine-dreapta: 10px; .iconMenu (culoare: #fff; cursor: cursor; afișare: niciunul; ) .showitems (afișare:bloc !important; ) Ecran @media și (max-width: 600px) ( # meniu a( padding-bottom: 13px; ) #menu a:hover (border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0 ;))

    Acum, când reduceți fereastra browserului, veți vedea următoarea imagine:

    Chiar nu mi-ar plăcea să descriu fiecare rând, pentru că blogul nu este despre aspectul ca atare. Lasă-mă să încerc să explic.

    Mai întâi, setăm proprietatea display:inline la elementele li pentru a le face să apară orizontal unul lângă celălalt. Aș fi putut folosi float:left, dar am decis să o fac așa. Și ascundeți pictograma meniului cu proprietatea display:none. Când rezoluția ecranului este mai mică de 600 de pixeli, eliminați linia din elementele li, ascundeți-le și afișați pictograma. Pe scurt - da.

    Acum avem nevoie de un script simplu care să proceseze un clic pe pictograma meniului și să arate elementele acestuia:

    $(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

    Ca aceasta. L-am pus într-un fișier separat și l-am inclus înainte de eticheta de închidere a corpului.

    Asta e tot. În acest fel, puteți crea rapid un meniu adaptiv simplu pentru pagina dvs. de destinație.

    Desigur, există dezavantaje. Indentările sunt specificate în pixeli, dar puteți seta și toate distanțele ca procent. Pur și simplu nu era nevoie de el. Dacă acesta ar fi un site cu drepturi depline, atunci aș folosi pictograme svg sau font, nu png și aș recalcula indentările ca procent. Și așa, a fost puțin improvizat :) Sper că totul este clar? Pa.

    Bună, dragi prieteni. Astăzi vă voi spune cum să creați un meniu responsive pentru un site web. Vom crea un meniu orizontal care se va adapta la ecranele dispozitivelor mobile. Iar versatilitatea sa constă în faptul că, indiferent de tehnologia de creare a site-ului tău, acest meniu va funcționa pe orice site. Adică, este suficient să corectezi legăturile, numele elementelor de meniu și să ajustezi stilurile pentru a se potrivi cu designul tău.

    Anterior, am publicat deja un articol în care am distribuit. Și astăzi vom privi în alt mod.

    Vizualizarea obișnuită a meniului pentru monitoarele computerului și ecranele mari va arăta astfel:

    Pe dispozitivele mobile, meniul extins va apărea astfel:

    Principiul construirii unui meniu universal adaptabil.

    Deci, pentru a crea un astfel de meniu, veți avea nevoie de:

  • Creați un cadru html.
  • Aplicați stiluri CSS.
  • Conectați handlerul de script.

    • Desigur, aveți un meniu pe site-ul dvs. și doriți să îl faceți adaptabil. Aveți două moduri, prima este să adaptați meniul existent și al doilea este să faceți un nou meniu adaptiv.

    Pe majoritatea site-urilor care sunt realizate pe un CMS, este mai ușor să creezi un nou meniu decât să îl refaci pe cel vechi. Deoarece construcția meniului în sine este implementată prin interogări PHP și baze de date, iar stilurile CSS sunt împrăștiate printre multe alte stiluri. În general, întreg acest proces de reproiectare a meniului este o sarcină destul de laborioasă și minuțioasă.

    Pe site-urile auto-scrise va fi mai puțină muncă cu modificări, dar tot trebuie să mânuiești.

    În orice caz, puteți folosi stilurile și scriptul din acest articol și vă puteți adapta meniul.

    Și pentru a crea un nou meniu adaptiv veți avea nevoie de foarte puțin timp. Inițial, un meniu este creat pe baza etichetelor ul și li, apoi sunt adăugate stiluri CSS și scriptul este conectat. Acest meniu se încarcă și răspunde mai rapid, deoarece funcționează fără interogări la baza de date.

    Stilurile CSS, pentru comoditate, sunt incluse în fișiere separate. Deși pot fi incluse în stilurile principale ale site-ului. Voi arăta un exemplu de conectare a stilurilor prin fișiere separate.

    Procesul de creare a unui meniu adaptiv Pasul 1. Crearea unei structuri de meniu html.

    Primul pas este să decideți unde va fi afișat meniul. Pentru a face acest lucru, trebuie să analizați fișierele șablon. De regulă, meniul este afișat în antet sau în bara de site. Fișierele header.php și sidebar.php sunt responsabile pentru aceste blocuri principale ale șablonului. În ele trebuie să căutați un loc pentru a introduce un meniu sau pentru a înlocui unul vechi. Pentru fiecare șablon, acesta este un proces individual.

    După ce te-ai hotărât cu privire la locul de inserare a noului meniu, trebuie să plasezi acest cadru html în acest loc și să schimbi elementele de meniu și linkurile în propriile tale.

    Afaceri pe Internet

    Notă: am folosit portocaliu pentru a indica elementele pe care le editați pentru site-ul dvs. Elementele din meniu pot fi adăugate și eliminate. Vă arăt cum să faceți acest lucru într-un tutorial video. Acest cod este responsabil pentru săgeata meniului derulant: . Dacă aveți mai multe elemente din meniul derulant, utilizați acest cod.

    Pasul 2. Conectarea stilurilor CSS.

    Pentru a simplifica procesul și a nu ne confunda cu , vom include stiluri sub formă de fișiere separate. Fișierele de stil sunt incluse în fișierul header.php între etichetele.... Cel puțin acesta este cazul în majoritatea șabloanelor moderne.

    Sarcina dvs. este să găsiți unde este conectat fișierul de stil principal style.css și dedesubt să conectați stilurile de meniu adaptive.

    Dar mai întâi, trebuie să descărcați fișierele cu stiluri și script. După aceea, copiați fișierele bootstrap.css și menu.css în folderul cu tema. Și apoi în fișierul header.php, între etichetele HED, adăugați aceste linii de conexiune:

    Pasul 3. Conectarea bibliotecii jQuery și a scriptului de gestionare.

    Și pentru a finaliza adaptarea meniului, trebuie să adăugați conexiunea bibliotecii jQuery și un script care va deschide meniul atunci când faceți clic.

    Și, deși cel mai probabil aveți deja conectată biblioteca jQuery, o veți vedea între etichetele HED din fișierul header.php, pentru orice eventualitate, vă voi arăta cum să o conectați. Și, în același timp, vom conecta scriptul de gestionare pe care l-ați descărcat în arhivă.

    În același fișier header.php, înainte de a închide eticheta, introduceți aceste linii de cod:

    Notă: fișierul bootstrap.min.js, împreună cu stilurile, trebuie de asemenea copiate în folderul cu teme al site-ului dvs. Poate că tema dvs. are un folder JS, apoi copiați acest fișier acolo și includeți-l în calea fișierului.

    Deci, totul este gata, puteți verifica rezultatul. Interogările media sunt construite la punctul de 768 px, de îndată ce ecranul browserului devine mai mic decât această valoare, meniul se adaptează. Puteți modifica punctul de interogare media în fișierele de stil.

    Și acum, ca exemplu clar al modului în care funcționează un meniu responsive și cum să-l instalezi pe un site web, vă sugerez să vizionați un tutorial video.

    Asta e tot pentru mine astăzi, vă doresc succes și ne vedem în articole noi și tutoriale video!

    Portal cu meniuri complicate. Am decis să scriem scripturi numai dacă nu găsim online ceea ce ne trebuie. Au fost concepute mai multe navigații diferite cu caracteristici diferite. Spre norocul nostru, aproape totul a fost găsit, mai puțin unul. Cu toate acestea, chiar înainte de a începe lucrul la scrierea acestui meniu, am reușit totuși să găsim ceea ce ne trebuia.
    Am încercat destul de multe meniuri adaptive. În acest subiect, am decis să fac o selecție dintre cele mai valoroase și interesante pe care a trebuit să le încercăm. Toate meniurile adaptive nu sunt la fel și sunt concepute exclusiv pentru sarcini specifice.
    Asa de. Iată 5 meniuri adaptabile pentru toate ocaziile.

    flexMenu Acesta este exact meniul care a fost atât de greu de găsit și a cărui funcționalitate eram pe cale să începem să scriem.
    flexMenu - un meniu care este potrivit pentru site-uri cu lățimea care se schimbă dinamic. Caracteristica sa principală și unică este adăugarea elementului „Mai multe” și transferul în lista derulantă a articolelor care nu se încadrează în lățimea întregii navigații. Adică, dacă ne uităm la monitoare mari, vom vedea toate punctele. De îndată ce începem să micșorăm fereastra browserului, elementul „Mai multe” va apărea la sfârșitul meniului și elementele care nu se potrivesc pe măsură ce fereastra se micșorează vor fi mutate dinamic în lista sa verticală. Astfel, vom avea un meniu cu o înălțime fixă ​​și o lățime „de joc”.
    În timp ce lucram cu flexMenu, am întâlnit o problemă. În cazul nostru, în dreapta era un logo cu float: stânga;, în dreapta era acest meniu, tot cu float: stânga; iar în dreapta cu float: dreapta; mai era un bloc. La redimensionarea ferestrei browserului, s-a dovedit că blocul din dreapta a sărit sub meniu, apoi toate acestea au sărit sub logo și apoi a fost activată funcționalitatea de compresie a meniului. Cum să tratați această caracteristică de aspect va fi discutat în subiectele ulterioare. Rămâi la curent. Codează un meniu de navigare receptiv Un exemplu excelent de meniu de navigare. Când redimensionăm fereastra browserului, vom vedea că elementele se suprapun și sunt aliniate în lățime. Arată foarte îngrijit. Cel mai important, acest meniu adaptiv va arăta grozav pe dispozitivele mobile și, mai important, este ușor de utilizat pe dispozitivele cu afișaj tactil.

    Meniul plat pe mai multe niveluri - navigare adaptivă Meniul plat pe mai multe niveluri este un meniu adaptiv, cu mai multe niveluri, care funcționează folosind bibliotecile Jquery. Pe monitoarele desktop vedem meniul orizontal obișnuit, familiar. Pe dispozitivele mobile, navigarea orizontală se transformă într-o listă derulantă.
    Meniul plat cu mai multe niveluri este o alegere excelentă dacă trebuie să economisiți spațiu pe pagină.