Share
Onlangs hebben we een geweldige tutorial gepubliceerd waarin het verticale navigatiemenu van Orman Clark is ingebouwd in een flexibele, jQuery-aangedreven accordeon. Het is mogelijk om het hele ding te laten werken zonder op jQuery te steunen en het is de perfecte kans om met de CSS te spelen: target selector.
We gaan jQuery vergeten en gebruiken in plaats daarvan de CSS :doelwit pseudo-selector om ons accordeonmenu uit te breiden en samen te trekken.
Ter herinnering: hier is de originele demo van jQuery, dan is hier de benadering met louter CSS.
Accentsconagua
:doelwit Pseudo-selectorU zult ongetwijfeld bekend zijn met URL's die er als volgt uitzien: http://www.w3.org/TR/selectors/#target-pseudo. Het eindigt met een # -teken en een element-id, die wordt gebruikt om de browser rechtstreeks naar dat element te brengen. Deze specifieke URL is het perfecte voorbeeld - het neemt je mee naar de kop met een ID van # Target-pseudo (voel je vrij om te gaan en te lezen).
Wanneer u deze aan het einde van een URL vastzet, staat deze id bekend als een fragment-ID. Het wordt niet alleen gebruikt om de browser naar een locatie op de pagina te brengen, het kan ook via CSS worden gebruikt om het betreffende element te identificeren.
Kortom; we gebruiken :doelwit om het element in de fragmentidentificatie te selecteren en te manipuleren.
Laten we beginnen met het downloaden van de originele bronbestanden van de eerste zelfstudie. De styling is al voor ons gedaan, dus heeft het weinig zin het wiel opnieuw uit te vinden.
Begin door index.html te openen, op regel 10 ziet u dat jQuery wordt vermeld. We zullen dat niet nodig hebben, dus doe het weg.
Verticaal navigatiemenu: CSS3 gecodeerd
Vervolgens vindt u aan de voet van het document de functie waarmee de jQuery-accordeon kan worden gebruikt. Doe dat ook weg.
Uitstekend. We hebben nu een veel schonere basis.
Zoals hierboven vermeld, de :doelwit selector wijst naar elk element waarnaar wordt verwezen in de fragmentidentificatie. We moeten er daarom voor zorgen dat onze primaire lijstitems allemaal unieke ID's hebben en dat de ankers binnen hen overeenkomstige links bevatten:
Wanneer u nu op de links klikt, ziet u een fragment-ID in de URL verschijnen:
Momenteel, na alle jQuery bits en bobs te hebben verwijderd, zal de accordeon volledig worden uitgebreid. We moeten de oorspronkelijke status samenvouwen, zodat we elke subsectie kunnen onthullen wanneer op de koppelingen wordt geklikt.
Ga naar het bestaande CSS-bestand, we gaan onderaan wat regels toevoegen:
/ * extra stijlen * / .menu> li> ul height: 0; overloop verborgen;
We wijzen hier naar onze submenu's; een directe afstammeling van de .menu-lijstitems. We zeggen dat hun initiële hoogte 0 is en dat eventuele overflow verborgen is om te voorkomen dat content zich een weg baant. We hebben nu het hele ding ingestort. En zo blijft het tenzij we er iets aan doen ...
We willen dat elk submenu wordt uitgebreid, maar alleen als we op de bovenliggende link hebben geklikt. Laten we gebruiken :doelwit om ze te selecteren:
.menu> li: target> ul height: auto;
Simpel gezegd, dit zegt: "Zie die li die in de url wordt vermeld? Wel, verander de hoogte van de ul erin naar auto". Zodra u ergens anders klikt en de ID niet langer in de URL wordt weergegeven, klapt het submenu opnieuw in elkaar. Probeer het!
Visueel zijn er nog een aantal dingen te doen. De actieve status wordt niet langer toegewezen door jQuery, dus we moeten ervoor zorgen dat onze: objecten in de doellijst blauw zijn. Deze bestaan niet meer:
.menu> li> a.active
.menu> li a.active span
Dus wissel ze in voor deze:
.menu> li: doel> a
.menu> li: doel> een bereik
We voegen ook een rand toe aan de onderkant van onze uitgebreide submenu's:
.menu> li: target> ul height: auto; border-bottom: 1px solid # 51555a;
OK, Orman zal daar blij mee zijn :) Lees wat we tot nu toe hebben gedaan.
Ik weet. Je schreeuwt tegen het scherm "Hoe zit het met de vloeiende overgangen ?!" Ik ben bang dat je teleurgesteld zult zijn. Tenzij we een definitieve hoogte specificeren voor de submenu's, kunnen we CSS-overgangen niet gebruiken om onze accordeon soepel uit te breiden en samen te vouwen. Overgangen zullen niet goed spelen met hoogte: automatisch. Jij natuurlijk kon geef een definitieve hoogte op:
.menu> li: target> ul height: 7.9em; border-bottom: 1px solid # 51555a;
en pas dan overgangen toe:
.menu> li> ul hoogte: 0; overloop verborgen; -webkit-overgang: inactieve hoogte 0,3s; -moz-overgang: inactieve hoogte 0,3s; -o-overgang: inactieve hoogte 0,3s; -MS-overgang: inactieve hoogte 0,3s; overgang: inactieve hoogte 0,3s;
... maar uw menu is niet langer 100% flexibel. U bent beperkt tot een specifiek aantal (3) submenu-items. Bekijk de demo.
Wat we kon doen, gewoon om dingen glad te strijken, is een overgang toevoegen aan een andere eigenschap. We kunnen de hoogtetransitie niet hebben, dus we doen het met een transformatie van ondoorzichtigheid:
.menu> li> ul hoogte: 0; overloop verborgen; dekking: 0; filter: alpha (opacity = 0); / * IE6-IE8 * / -webkit-overgang: opacity 0.9s ease-in-out; -moz-overgang: opacity 0.9s ease-in-out; -o-transition: opacity 0.9s ease-in-out; -ms-overgang: opacity 0.9s gemak in-uit; overgang: opacity 0.9s ease-in-out; .menu> li: target> ul height: auto; border-bottom: 1px solid # 51555a; dekking: 1; filter: alpha (opacity = 100); / * IE6-IE8 * /
Wat we hebben gedaan, is de standaard dekking van het submenu instellen op 0; het heeft niet alleen een hoogte van 0, het is nu ook transparant. Vervolgens stellen we de overgangen ook in op de standaardstatus. In de zweefstand klikt hij nog steeds wijd open, maar dan verdwijnt de inhoud. Een beetje makkelijker voor het oog.
Een ander probleem is het feit dat :doelwit wordt niet herkend door oudere browsers (Internet Explorer 8 en lager), dus ons samengevouwen menu is onbruikbaar geworden in die browsers. Laten we een aantal alternatieve methoden toepassen, waardoor de navigatie op zijn minst toegankelijk wordt.
Ten eerste voegen we een voorwaardelijke opmerking toe (na ons aanvankelijke CSS-verzoek) om een secundair CSS-bestand binnen te slepen als de browser Internet Explorer 8 of eerder is:
In dat bestand herhalen we gewoon de regels waaraan we zojuist hebben gewerkt, maar in plaats van het te gebruiken :doelwit, we gebruiken : hover.
.menu> li: hover> ul height: 7.9em; border-bottom: 1px solid # 51555a;
Nogmaals, bekijk de demo. Niet precies wat we wilden, maar het is tenminste een achterwaarts compatibele, toegankelijke navigatie.
Gezien de keuze, zult u waarschijnlijk nog steeds kiezen voor de jQuery-aanpak; het wordt ook geaccepteerd in alle browsers (zolang JavaScript is ingeschakeld) en het effect is vloeiender. Toch, als je je niet bewust was van de :doelwit selector, deze Snelle tip heeft u hopelijk inzicht gegeven in meer CSS-mogelijkheden.
