Vorige keer zijn we begonnen met het bouwen van een jQuery plugin. Om de berichten een beetje kort te houden zijn we toen niet verder gekomen dan de HTML mark-up. Vandaag doen we het CSS gedeelte. De CSS wordt in dit geval met name gebruikt om de tabs zowel op smalle als brede schermen op een nette manier weer te geven. Daarnaast geven we wat opmaak mee aan de lijst met links zodat het er iets beter uitziet. In het geval dat je de vorige post hebt gemist volgen hier eerst nog eens de download en demo links:

CSS voor mobiele versie

De CSS voor deze plugin is niet zo heel ingewikkeld, dus laten we beginnen met de mobiele versie van het ding. Het idee is dat de content van het tabblad direct onder het list item komt en de rest van de tabbladen daaronder:

De tabs plugin op een smal scherm (< 672px).

Om dit voor elkaar te krijgen moet er in de ul die de tabblad links bevat een extra li gezet worden die de content van het tabblad bevat. Deze content stoppen we erin met javascript en dat komt de volgende keer 🙂 Waar we wel voor moeten zorgen is dat de div met de lijst erin een breedte heeft van 100%.

Daarnaast gebruiken we een gradient als achtergrond van de li elementen en maken we de links even breed en hoog als de li’s zodat er makkelijk op geklikt kan worden.

CSS voor desktop versie

Op een desktop computer met een breder scherm willen we graag dat de beschrijving rechts naast de links komt. Daarnaast is het wellicht gewenst om ervoor te zorgen dat de actieve li een andere achtergrondkleur krijgt zodat we weten welk item er actief is.

De tabs plugin op een breed scherm: lijst en content staan naast elkaar

Allereerst hebben we dus een breakpoint nodig zodat we een mediaquery kunnen opzetten. In dit voorbeeld ligt dat breakpoint op 42rem dat overeenkomt met 672px (bij een standaard lettergrootte van 16px). Het zou kunnen dat deze plugin het niet doet in oudere versies van IE, dat komt door het gebruik van de rem waardes in de mediaquery.

@media only screen and (min-width:42rem)
{
    /* Code voor desktop versie hier */
}

Binnen dit blokje code moeten we ervoor zorgen dat de content rechts naast de tabs komt. Dat doen we door die divs (voor de tab links en de content) een float:left te geven. Daarnaast passen we de breedte aan: 40% voor de tabs en 60% voor de content. Tenslotte geven we de actieve li een witte achtergrond.

Het witte blokje

Ik vond het mooi om de content een border te geven (voor dedesktop versie), maar het gevolg is dan dat tussen het actieve li element en de content een klein verticaal streepje te zien is. Niet mooi.

Let op het streepje tussen de actieve tab (Tab 1) en de content: niet mooi he?!

Ik heb dit opgelost door er een wit blokje aan toe te voegen (met javascript) dat weer weggehaald wordt als we in de mobiele versie komen. Dit blokje wordt absoluut gepositioneerd en met een z-index boven de rest geplaatst. Het ziet er zo uit als ik het blokje even een andere kleur geef:

De oplossing: een absoluut gepositioneerd blokje

Ik neem aan dat je met me eens bent dat wit een betere kleur is voor dit blokje.

Verder bouwen

Natuurlijk eindigt het hier niet. Immers, met CSS kun je echt helemaal los gaan en je eigen ding maken. Een eerste stap ter verbetering is wellicht de lettergrootte. Daarnaast zijn de links in het tabs menu ook nog wel aan wat verbetering toe. Ik denk dan aan de kleur, text-decoration en de lettergrootte. Maar goed, ik neem aan dat je dat nu wel zelf kunt 😉

Volgende stappen

De volgende keer duiken we in de javascript: het toevoegen en verwijderen van een content block aan de ul (op mobiel) en het witte blokje dat hierboven al even in beeld kwam. Heb je in de tussentijd vragen of opmerkingen, laat dan een reactie achter!