Share
Am publicat recent un mare tutorial care a construit meniul vertical de navigare al lui Orman Clark într-un acordeon flexibil, cu jQuery. Este de fapt posibil să folosiți întregul lucru fără a vă sprijini deloc pe jQuery și este șansa perfectă de a juca cu selectorul țintă CSS.
Vom uita jQuery și vom folosi CSS :ţintă pseudo selector pentru a ne mări și a contracta meniul nostru de acordeon.
Ca un memento aici e demo-ul original jQuery, apoi iată abordarea pur CSS.
Accentsconagua
:ţintă Pseudo SelectorVeți cunoaște fără îndoială adresele URL care arată astfel: http://www.w3.org/TR/selectors/#target-pseudo. Se termină cu un semn # și un element id, care este folosit pentru a lua browser-ul direct la acel element. Această adresă specială este exemplul perfect - vă duce la rubrica cu un ID de # Pseudo-țintă (nu ezitați să mergeți și să citiți).
Când este cusută pe capătul unui url, acest id este cunoscut ca un identificator de fragment. Nu este folosit doar pentru a prelua browserul într-o locație din pagină, ci poate fi folosită și prin CSS pentru a identifica elementul în cauză.
Pe scurt; folosim :ţintă pentru a selecta și manipula elementul din identificatorul de fragmente.
Să începem prin descărcarea fișierelor sursă originale din primul tutorial. Styling-ul este deja făcut pentru noi, deci nu este prea important să reinventăm roata.
Începeți prin deschiderea index.html, pe linia 10 veți vedea că jQuery este referită. Nu vom avea nevoie de asta, așa că scăpați de ea.
Meniul de navigare vertical: CSS3 codificat
Apoi, la poalele documentului veți găsi funcția care va face să funcționeze acordeonul jQuery. Scapă de toate astea.
Excelent. Acum avem o bază mult mai curată.
După cum sa menționat mai sus, :ţintă selectorul va indica orice element care face referire în identificatorul fragmentului. Prin urmare, trebuie să ne asigurăm că toate elementele principale din lista noastră au coduri de identificare unice și că ancorele din ele au legături corespunzătoare:
Acum, când faceți clic pe link-uri, veți vedea un identificator de fragmente care apare în url:
În prezent, după ce au fost îndepărtate toți biții și bobii jQuery, acordeonul va fi complet extins. Avem nevoie ca starea sa inițială să fie prăbușită, astfel încât să putem dezvălui fiecare secțiune atunci când se dau clic pe link-uri.
Treceți la fișierul CSS existent, vom adăuga câteva reguli în partea de jos:
/ * stiluri suplimentare * / .menu> li> ul height: 0; overflow: ascuns;
Mergem spre submeniurile noastre aici; orice descendent direct al elementelor din lista .menu. Spunem că înălțimea lor inițială este 0 și că orice depășire este ascunsă pentru a împiedica afișarea conținutului. Acum avem tot ce sa prăbușit. Și așa va rămâne, dacă nu vom face ceva despre asta ...
Vrem ca fiecare submeniu să se extindă, dar numai când am făcut clic pe link-ul său părinte. Să folosim :ţintă pentru a le selecta:
.meniu> li: țintă> ul height: auto;
Puneți pur și simplu, acest lucru spune: "Vedeți că li care este menționat în url? Ei bine, schimbați înălțimea ul în ea la auto". Odată ce faceți clic în altă parte și id-ul nu mai apare în url, submeniul se reia din nou. Incearca-l!
Din punct de vedere vizual, există câteva lucruri de făcut. Starea activă nu mai este atribuită de jQuery, așa că trebuie să ne asigurăm că elementele de listă țintă sunt albastre. Acestea nu mai există:
.meniu> li> a.activ
.meniu> fila activă
Deci, schimba-le pentru acestea:
.meniu> li: țintă> a
.meniu> li: target> a span
De asemenea, vom adăuga o margine în partea de jos a submeniurilor noastre extinse:
.meniu> li: țintă> ul height: auto; frontieră-fund: 1px solid # 51555a;
OK, Orman va fi fericit cu asta :) Verificați ce avem până acum.
Stiu. Urmezi pe ecran "Ce zici de tranzițiile netede ?!" Mă tem că vei fi dezamăgit. Cu excepția cazului în care specificăm o anumită înălțime pentru submeniuri, nu putem folosi tranzițiile CSS pentru a ne extinde și pentru a ne colafoniza acordeonul. Tranzițiile nu vor juca frumos cu înălțime: auto. Desigur tu ar putea specificați o înălțime definită:
.meniul> li: țintă> ul height: 7.9em; frontieră-fund: 1px solid # 51555a;
și apoi aplicați tranziții:
.meniu> li> ul height: 0; overflow: ascuns; -webkit-transition: înălțime 0.3s ușurință în sus; -moz-tranziție: înălțimea de 0.3s ușurință în sus; -o-tranziție: înălțime de 0,3 secunde; -ms-tranziție: înălțime 0.3s ușurință în sus; tranziție: înălțimea de 0.3s ușurință în sus;
... dar meniul nu va mai fi 100% flexibil. Veți fi restricționat la un anumit număr (3) din elementele de submeniu. Check out demo-ul.
Ce noi ar putea face, doar pentru a netezi lucrurile, este o tranziție la o altă proprietate. Nu putem avea trecerea la înălțime, așa că vom face o tranziție de opacitate:
.meniu> li> ul height: 0; overflow: ascuns; opacitate: 0; filtru: alfa (opacitate = 0); / * IE6-IE8 * / -webkit-tranziție: opacitate 0.9s ușurință-out-out; -moz-tranziție: opacitate de 0,9 secunde; -o-tranziție: opacitate de 0,9 secunde; -ms-tranziție: opacitate 0,9 secunde; tranziție: opacitate 0,9 secunde; .menu> li: țintă> ul înălțime: auto; frontieră-fund: 1px solid # 51555a; opacitate: 1; filtru: alfa (opacitate = 100); / * IE6-IE8 * /
Ceea ce am făcut este să setăm opacitatea implicită a submeniului la 0; nu numai că are o înălțime de 0, este și acum transparentă. Am setat apoi și tranzițiile la starea implicită. Pe starea de hover, se fixează încă deschis, dar apoi conținutul se estompează. Un pic mai ușor pe ochi.
O altă problemă este faptul că :ţintă nu este recunoscută de browserele mai vechi (Internet Explorer 8 și de mai jos), astfel încât meniul nostru restrâns este redat inutil în acele browsere. Să aplicăm câteva metode alternative, care vor face cel puțin navigația accesibilă.
În primul rând, vom adăuga un comentariu condiționat (după cererea inițială de CSS) pentru a trage într-un fișier secundar CSS dacă browserul este Internet Explorer 8 sau mai devreme:
Apoi, în acest fișier, pur și simplu repetăm regulile la care tocmai am lucrat, dar în loc să le folosim :ţintă, folosim :planare.
.meniu> li: hover> ul înălțime: 7.9; frontieră-fund: 1px solid # 51555a;
Din nou, verificați demo-ul. Nu exact ceea ce am urmat, dar cel puțin este o navigare compatibilă și accesibilă înapoi.
Având în vedere alegerea, probabil veți opta pentru abordarea jQuery; este acceptat în egală măsură în toate browserele (atâta timp cât este activat JavaScript), iar efectul este mai neted. Cu toate acestea, dacă nu știați :ţintă selector, acest sfat rapid vă va oferi, cu siguranță, o perspectivă asupra potențialului CSS.
