Codering van een sierlijk broodkruimel navigatiemenu in CSS3
Navigatiemenu's en koppelingen zijn mogelijk de belangrijkste interface-elementen voor een weblay-out. Dit zijn de enige afzetmogelijkheden voor gebruikers reizen tussen pagina's en interactie met alle inhoud die je hebt gemaakt. Breadcrumb biedt vergelijkbare functionaliteit met het extra voordeel van uw huidige positie volgen. Je zult in staat zijn om toon alle vorige koppelingen als de gebruiker uw sitehiërarchie doorloopt.
In deze zelfstudie maken we een briljant breadcrumb-navigatiemenu met enkele CSS3-effecten. Dit is getest om te werken in alle belangrijke CSS3-compatibele browsers, zelfs oudere browsers die CSS3 niet ondersteunen, zullen deze in de meeste gevallen nog steeds correct weergeven.
Voordat we in de code duiken, praten we een beetje over de functionaliteit van onze breadcrumb, volledige tutorial bij een sprong!
Het aanbieden van de Trail
Een broodkruimelpad is niet complexer dan welk ander menu dan ook. Onze stijlen maken gebruik van veel complexere CSS-eigenschappen dan de meeste voorbeelden, maar onze sjabloon voor onbewerkte botten is nog steeds aanwezig om gebruikers van de ene pagina naar de andere te leiden.
In dit voorbeeld zullen we een vergelijkbare stijl opnieuw creëren als het Google-ondersteuningsmenu. Je kunt hun menu bekijken op de Gmail-ondersteuningspagina om een idee te krijgen van waar we naartoe gaan. Uiteindelijk willen we dat onze beste gebruikerservaring bieden voor alle gebruikers, ongeacht hun besturingssysteem of browsersoftware, dus ik heb het gebouwd 2 verschillende codevoorbeelden om sierlijke degradatie onder oudere browsers te ondersteunen.
De eerste is gebouwd met behulp van aangepaste achtergrondafbeeldingen en juiste CSS-alignments. Alle hover-evenementen en actieve evenementen zijn vooraf gebouwd met slechts een paar CSS-stijlen, maar gebruikers met afbeeldingen die zijn uitgeschakeld, kunnen deze effecten niet ervaren! Daarom heb ik ook een soortgelijk menu samengesteld met CSS-verlopen, afgeronde hoeken en doosschaduwen.
Als je nerveus bent over het ondersteunen van beide stijlen, kun je ervoor kiezen om ze te gebruiken voor je eigen site. De meeste bezoekers zullen standaard afbeeldingen gebruiken, maar doorzoek uw website-analysetool als u meer nauwkeurige bezoekersgegevens wilt.
Genoeg woorden, laten we in het project springen! We beginnen met het bouwen van het eenvoudige HTML-framework en gaan over naar verschillende stylingeffecten. Allereerst je moet de afbeelding downloaden vereist voor het project.
Bare-Bones HTML
Ik begin mijn document met de standaard HTML5 paginasjabloon. Dit omvat het standaarddoctype, gekoppelde CSS en alle basiselementen. Ik heb de onderstaande code toegevoegd als u op deze manier uw eigen document wilt starten. Merk op dat dit niet van invloed zou moeten zijn op hoe uw broodkruimel wordt weergegeven, dus voel u vrij om uw eigen paginasjabloon te gebruiken als u dat wenst.
Standaard pagina
Ik zal de code in twee verschillende blokken splitsen. Het eerste blok met afbeeldingen is op een iets andere manier gebouwd, gevolgd door ons menu zonder afbeeldingen. Elke set krijgt zijn eigen stijl ID kaart zodat we de inhoud veel gemakkelijker kunnen identificeren. Als je ook een fan bent van jQuery, kun je de #ID selector om alle interne DOM-elementen te manipuleren.
Eerst hebben we een met div met de id “broodkruimel“. In het demobestand heb ik dit gebruikt om onze code te scheiden en over de pagina te verplaatsen met enkele toegevoegde marges. Je zou deze outer div kunnen verwijderen, maar je zult alles opnieuw moeten stylen om in de nieuwe template te passen. Het doet echt geen kwaad om een container te verlaten, omdat je de positionering veel gemakkelijker kunt regelen.
Intern heb ik de broodkruimels gemaakt met behulp van een ongeordende lijst. Er zijn zoveel unieke manieren om gestileerde HTML-lijsten aan te passen, en broodkruimels zijn er slechts een van. U zult merken dat ik het eerste lijstitem a heb gegeven klasse van “eerste“. Dit is nodig voor wat extra opvulling om de menu-items in de rij te houden. Bovendien een kleine spanblok is toegevoegd, zodat we een goede linkerrand hebben die de achtergrondafbeelding niet overlapt.
Bovendien is elke ankerkoppeling beplant met een afnemend aantal voor de z-index eigendom. Gebruik van afbeeldingen die we nodig hebben laat elk van onze links overlappen om de broodkruimelpijl correct weer te geven. De eenvoudigste manier om dit te bereiken is z-index aanpassen dus elke koppeling overlapt de volgende. Ik begon met 9 en werkte vanaf daar, maar als je meer links in je menu hebt, begin je gewoon met een hoger geheel getal.
Menu zonder afbeeldingen
Naar degradeer ons broodkruimel sierlijk we hebben een secundaire set HTML-lijstitems nodig. Als u probeert terug te vallen op een enkele navigatie, kunt u jQuery gebruiken om de browseragent te detecteren en dienovereenkomstig een ID toe te passen. Helaas is dit niet altijd betrouwbaar (voor bepaalde mobiele gebruikers bijvoorbeeld). Een andere oplossing is om een IE-specifieke stylesheet bevatten en verberg of toon welk menu het beste werkt - maar natuurlijk is deze optie alleen voor Internet Explorer.
breadcrumb2 is onze nieuwe ID gebruikt om het menu zonder afbeeldingen te targeten. Houden met dit patroon dat ik heb gebruikt crumbs2 als de klasse voor de ongeordende lijst. Merk op dat de reden die we gebruiken klassen is voor haar eenvoud om deze menu's te dupliceren, dus als je een paar verschillende broodkruimels op je pagina wilt, wordt dit met deze klassen nooit een probleem.
We hebben de .eerste klasse maar daarnaast toegevoegd .laatstenaar het laatste lijstitem. Zonder afbeeldingen kunnen we de pijlen voor elk onderdeel van het navigatiemenu niet dupliceren, dus heb ik er een paar gebruikt afgeronde hoeken om het secundaire menu wat extra's te geven. .eerste klasse en .laatste manipuleer de grensradius helemaal aan de randen van ons menu om een echt coole web 2.0-stijl te creëren.
CSS achtergrondafbeeldingen schuiven
Voor sommige van de eenvoudigere effecten heb ik beide broodkruimels aan elkaar gekoppeld bij het bouwen van eigenschappen. Dit is handig omdat het niet alleen wat ruimte bespaart, maar wanneer het teruggaat naar bewerkingsstijlen gemakkelijker aan te passen je eigen uiterlijk.
Voor beide #breadcrumb en # breadcrumb2 Ik ben klaar lijststijl: geen; dus alle interne items hebben geen markeringen. Je zou deze kunnen achterlaten als je het effect leuk vindt, maar ik merkte dat HTML vermoeiend om mee te werken is en het is een stuk eenvoudiger om nieuwe iconen te maken. Laten we beginnen met onze .kruimels klasse.
.kruimels weergave: blok; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: visited color: # 666; weergave: blok; zweven: links; lettergrootte: 12px; marge links: -13 px; opvulling: 7px 17px 11px 25px; positie: relatief; tekstdecoratie: geen; .crumbs li a background-image: url ('... /img/bg-crumbs.png'); achtergrondherhaling: geen herhaling; achtergrondpositie: 100% 0; positie: relatief; .crumbs li a: hover color: # 333; achtergrondpositie: 100% -48 px; cursor: pointer; .crumbs li a: active color: # 333; achtergrondpositie: 100% -96 px; .crumbs li.first a span height: 29px; breedte: 3px; border-left: 1px solid # d9d9d9; positie: absoluut; top: 0px; links: 0px; Wij stel onze ongeordende lijst in blok dus kruipt er niets anders in het gebied rond. Let op de lijstitems zijn inline weergegeven terwijl aan elke ankerlink veel meer ruimte wordt gegeven om zich te verspreiden. We willen dat alle ruimte in ons menu kan worden aangeklikt, dus dit vereist onze ankers bouwen als blokelementen.
Ik heb een afbeelding gebruikt genaamd bg-crumbs.png voor de achtergrond. Dit staat bekend als een eenvoudige sprite sheet in CSS, of anders een schuifdeuren techniek. Dit betekent dat wanneer de gebruiker zweeft of klikt op een link, we de achtergrondpositie verschuiven om de bijgewerkte stijl weer te geven. Deze enkele afbeelding bevat alle 3 de ontwerpen die we nodig hebben om de broodkruimelachtergronden op verschillende posities te maken, zodat we de background-position eigendom om te verhuizen op basis van gebruikersinteractie.
Aangepaste effecten met CSS3
Het originele breadcrumb-ontwerp is veel eenvoudiger te maken. Dit is merkbaar, omdat veel van de CSS-eigenschappen fundamenteler zijn dan je zou denken, maar nu beginnen we ons te concentreren op het dupliceren van deze effecten met alleen CSS3!
De afzonderlijke stijlen nemen veel ruimte in beslag, zodat ik ze opsplit in 2 codeblokken.
.crumbs2 weergave: blok; marge links: 27 px; opvulling: 0; padding-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: visited color: # 666; weergave: blok; zweven: links; lettergrootte: 12px; opvulling: 7px 16px 7px 19px; positie: relatief; tekstdecoratie: geen; border: 1px solid # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-gradient (lineair, linksonder, linksboven, kleur-stop (0,45, rgb (241,241,241)), kleur-stop (0,73, rgb (245,245,245))); achtergrondafbeelding: -moz-lineaire gradiënt (midden onderaan, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Voor Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Voor Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
De .crumbs2 menu gebruikt CSS-verlopen om de achtergrondeffecten te dupliceren. Als je hier niet vertrouwd mee bent, raad ik je ten zeerste aan de CSS Tricks-gids over CSS3 Gradients te gebruiken, zodat je CSS3-gradiënten efficiënt kunt gebruiken. Ze hebben een paar meer eigenschappen opgenomen voor Microsoft- en Opera-browsers, maar deze worden in alle gevallen niet volledig ondersteund. Ik heb ze hier niet in de democode opgenomen, maar het is goed om alle opties te begrijpen.
-WebKit-gradiënt en -moz-lineaire gradiënt zijn de kernoplossingen die het grootste deel van het werk doen. Ik heb oude code toegevoegd voor oudere versies van Internet Explorer, maar het is niet gegarandeerd om altijd goed weer te geven (we gebruiken tenslotte krachtige beeldweergave-technieken). Merk op dat ik zowel RGB- als hexagonale kleurcodes heb ingesteld tussen de achtergrondeigenschappen. Je zou je aan de ene of de andere methode kunnen houden als je meer op je gemak bent.
De grensradius code wordt alleen toegepast op onze secundaire breadcrumb-navigatie. Dit geeft een mooi effect op de linkerboven- en rechteronderhoek van ons hele broodkruimelmenu. De balk lijkt bijna van de pagina te springen - echt een fantastisch effect op browsers die de stijlen ondersteunen, maar deze hebben alleen betrekking op standaardstatussen voor onze links. Laten we nu hover-effecten maken die lijken op de afbeeldingen die we hierboven hebben gebruikt.
CSS3-randen en -schaduwen
Wanneer een gebruiker over een link zweeft, willen we een paar dingen bijwerken. Eerst moeten we dat doen verdonkeren de randkleuren aan de boven- en onderkant van ons actieve element. Dit is ook te zien in de afbeeldingen voor zowel zwevende als actieve toestanden.
.crumbs2 li a: hover border-top-colour: # c4c4c4; border-bottom-colour: # c4c4c4; achtergrondafbeelding: -webkit-gradiënt (lineair, linksonder, linksboven, kleur-stop (0,45, rgb (241,241,241)), kleur-stop (0,73, rgb (248,248,248))); achtergrondafbeelding: -moz-lineaire gradiënt (midden onder, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Voor Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Voor Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; kleur: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; vakschaduw: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-colour: # c4c4c4; border-bottom-colour: # c4c4c4; achtergrondafbeelding: -webkit-gradiënt (lineair, linksonder, linksboven, kleur-stop (0,45, rgb (224,224,224)), kleur-stop (0,73, rgb (235,235,235))); achtergrondafbeelding: -moz-lineaire gradiënt (midden onderaan, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Voor Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Voor Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inzet; -webkit-box-shadow: -1px 1px 1px 0px #dadada-inzet; -moz-box-shadow: -1px 1px 1px 0px #dadada-inzet; kleur: # 333;
Ik gebruik exact dezelfde verloopcode die we hierboven hebben gebruikt, maar deze keer zijn de kleuren veel anders als je onze RGB-waarden ziet. In elk van de statussen wordt de tekstkleur donkerder naar # 333, nog andere descriptoren zijn enigszins veranderd om te corresponderen met gebruikerscommando's.
Als je zweeft, zie je a glanzend reliëf effect welke gekoppeld is met donkere randen geeft de pagina-pop-upstijlen. Als u klikt en vasthoudt, komt u in de actieve status met een a verdonkerde achtergrond gradiënt. Dit effect zorgt ervoor dat de knoppen eruit zien alsof ze daadwerkelijk zijn “geperste” op de pagina.
We zijn ook van toepassing box-shadow eigenschappen van de nieuwe CSS3-specificaties. -webkit, -moz, en standaardstijlen worden gebruikt met dezelfde instellingen. Zweven toont een lichte schaduw komt uit de onderkant van de geselecteerde link. Wanneer actief, wordt de schaduw gevormd aan de boven-, rechter- en onderrand. Dit effect wordt gemaakt met de inzet sleutelwoord toegevoegd aan het einde van elke box-shadow eigenschapslijn. Nogmaals, CSS Tricks is hier je beste vriend met een geweldig artikel over box-shadow, omdat het spreekt over de syntaxis en het juiste gebruik ervan in CSS3.
Bonus: meer stijlen
Naast de zelfstudiecode heb ik extra achtergrondafbeeldingen met aangepaste kleurenschema's toegevoegd. Ik heb van de originele achtergronden geproefd en heb Adobe Photoshop gebruikt om een paar variaties te maken die je op je eigen website kunt toepassen.
Deze bonusbestanden zijn opgenomen in het bronbestand die u kunt downloaden in .zip-archiefindeling in de onderstaande sectie.
U kunt de afbeelding hierboven bekijken om een idee te krijgen van waar ik het over heb. Als u een specifiek kleurenschema nodig heeft, open dan Photoshop> Afbeelding> Aanpassingen> Kleurtoon / verzadiging om het kleurenschema aan te passen aan uw eigen sjabloon, onthoud dit vink de optie Colorize aan in het deelvenster Kleuring / verzadiging als de kleur helemaal niet is gewijzigd.
Conclusie
Deze tutorial had je bekend moeten maken met enkele van de nieuwere CSS3-technieken. We hebben twee fantastische broodkruimelmenu's gemaakt die op dezelfde manier zijn gestileerd en zo zijn gebouwd dat deze gracieus kan worden verslechterd in oudere browsers. Daarnaast heb ik mijn democode en enkele bonusbeelden aangeboden waarmee je kunt spelen.
Vind je het vooral leuk de stijlen die we hier hebben gemaakt? Of heeft u misschien vragen of ideeën over het verbeteren van de zelfstudiecode? Deel uw mening met ons in het onderstaande discussiegebied en vergeet niet de bronbestanden te downloaden zodat u met de demo kunt spelen!
Meer CSS3-zelfstudies
Verlangend naar meer CSS3? Hieronder staan onze artikelen om CSS3 theoretisch en praktisch te begrijpen!
- CSS3: maak een RSS-feedlogo
- CSS3: maak een zoekveld aan
- CSS3: maak een AJAX-contactformulier aan
- CSS3: HTML5 / CSS3-webpagina's bouwen
