Hoe maak je een bio dropdown box met CSS

Nadat ik de meest recente Theme Lab-herontwerp, Ik had een aantal opmerkingen over het vak “bio dropdown” dat ik in mijn navigatiebalk heb staan. Ik heb het gecodeerd met slechts een paar regels CSS samen met een achtergrondafbeelding.


In deze CSS-tippost ga ik in op hoe je een soortgelijk zweefeffect kunt hebben op je eigen sites.

Het voorbeeld

In dit voorbeeld gebruik ik een tekstwidget in de Twintig elf thema, de nieuwe standaard vanaf WordPress 3.2.

Kortom, zodra u over de div zweeft die de widget bevat, verschijnt er een “verborgen” div die onze bio dropdown box zal zijn.

Let op in de afbeelding aan de linkerkant, het grijze bio-vak zal niet verschijnen tenzij je de div met de “Bio Hover” -kop zweeft.

De kiezer

Het is niet zo belangrijk om een ​​unieke CSS-selector te hebben om de div te stylen waarin je je bio-vervolgkeuzelijst wilt plaatsen. In feite komt dit omdat als je niet de bijbehorende markup in die div hebt, er toch niets zou verschijnen in het geval van een zweeftoestand.

Hoewel we in het geval van Twenty Eleven weg zouden kunnen komen met het stylen van de “opzij” -klasse, is de kans groot dat je sowieso alleen een bio-dropdown-box op een van je divs wilt, dus we zullen specifieker worden.

Gelukkig met WordPress spuugt het een hoop unieke CSS-selectors uit die je kunt gebruiken. In dit voorbeeld spuugt het # test-3 uit die we vanaf nu zullen gebruiken.

Notitie: Dit kan variëren afhankelijk van uw WordPress-installatie. Gebruik zoiets als Chrome Developer Tools om de selector gemakkelijk te vinden.

HTML-opmaak

In dit voorbeeld kan de HTML-opmaak rechtstreeks in de WordPress-tekstwidget worden geplaatst. Dit is wat je erin hebt gestopt:

Leland!

Hallo. Ik ben Leland Fiegel en ik ben de bedenker en oprichter van Theme Lab. Ik ben dol op het schrijven van code, vooral HTML, CSS en voor WordPress.

Tenzij je mijn identiteit wilt stelen, wil je de foto waarschijnlijk vervangen door een foto van jezelf. U kunt deze optioneel ook verwijderen.

Omdat we een WordPress-widget gebruiken, is de afgelegen opmaak al voor ons gegenereerd. Dit is wat het in totaal is.

Bio Hover

Leland!

Hallo. Ik ben Leland Fiegel en ik ben de bedenker en oprichter van Theme Lab. Ik ben dol op het schrijven van code, vooral HTML, CSS en voor WordPress.

Als je dit op een onbewerkte HTML-site doet, heb je een soort wrapper nodig (zoals deze is terzijde) voor de bio-dropdown met iets anders erin, anders is er niets om over te zweven om naar beneden te vallen.

Voorbeeld uit de praktijk: Mijn bio dropdown div bevindt zich in een li-tag in mijn navigatiemenu.

Eerste twee regels CSS

De eerste twee regels hebben de rest echt opgezet, dus ik heb dit in een eigen sectie geplaatst.

# text-3 {positie: relatief; }
.bio-dropdown {display: geen; }

Uitleg

  • Eerste lijn: We hebben de wrapper van de bio-vervolgkeuzelijst ingesteld op relatieve positionering. Dit maakt het gemakkelijker om de bio dropdown box absoluut dichter bij de originele verpakking te plaatsen.
  • Tweede lijn: Dit maakt de bio dropdown box in wezen standaard onzichtbaar. Het zou alleen moeten verschijnen als je ergens over zweeft, onthoud?

Notitie: Als je geen fan bent van display: geen; of denken dat het je SEO of zoiets schaadt, je kunt ook iets gebruiken in de trant van positie: absoluut; links: -100000em; die het in feite zo ver van de pagina zal verwijderen, dat niemand het ooit zou zien.

De rest van de CSS

De volgende CSS-code behandelt het uiterlijk van de bio-vervolgkeuzelijst.

# text-3: hover .bio-dropdown {
display: blok; z-index: 99;
positie: absoluut; bovenkant: 25px;
achtergrond: #ccc; opvulling: 10px 10px 0 10px;
lettergrootte: 11px; regelhoogte: 18px; kleur: # 666;
}

Uitleg

Dit is waar we eindelijk de # text-3 selector gebruiken samen met de: hover pseudoclass om de bio dropdown box alleen te laten verschijnen als je over de tekst widget zweeft.

  • Eerste lijn: Het display: blok; maakt de bio dropdown box zichtbaar. De z-index: 99; zorgt ervoor dat de box onbelemmerd boven al het andere wordt weergegeven.
  • Tweede lijn: Dit plaatst het vak onder de zijkant ongeveer 25 pixels.
  • Derde regel: Dit zijn slechts enkele cosmetische stijlen, die de achtergrond lichtgrijs maken met fatsoenlijke opvulling.
  • Vierde regel: Dit is allemaal zelfverklarende typografie.

Notitie: Over de eerste regel, als u de positie gebruikt: absoluut; links: -100000em; techniek in plaats van weergave: geen; zoals ik hierboven heb uitgelegd, is het gebruik van display: block hier niet nodig (aangezien divs sowieso al worden verondersteld blokelementen te zijn). In plaats daarvan zou je left: 0 moeten gebruiken; om de div weer op de pagina te verplaatsen.

En voor de afbeelding slechts een simpele zweefstand en rechtermarge.

.bio-dropdown .photo {float: left; margin-right: 10px; }

WordPress-integratie

Ik kan geen goede manier bedenken om dit te integreren in een dynamisch WordPress-menu (wp_nav_menu) zonder de rotzooi ergens uit te filteren. De gemakkelijkste manier is misschien codeer uw navigatie hard en kom er overheen (wat ik doe op al mijn sites).

Als je technieken hebt voor het invoegen van markeringen in een WordPress-menu-item, die hiervoor vereist zijn, dan hoor ik dat graag in de reacties. Ik weet zeker dat het mogelijk is, maar het valt buiten het bestek van deze CSS-tippost.

Conclusie

Ja, ik realiseer me dat je waarschijnlijk geen bio-dropdown in je zijbalk wilt plaatsen, je zou het op een plaats met beperkte ruimte plaatsen waar het niet volledig kan worden weergegeven (zoals een krappe navigatiebalk).

Gelukkig kun je deze techniek vrijwel overal gebruiken. Ik wilde alleen een basistechniek bespreken over hoe je een hele div op hover kunt weergeven.

Het is niet te ingewikkeld en je hebt geen luxe Javascript-dingen nodig om het te doen, maar als je een high-tech vervagend effect wilde, zou je waarschijnlijk wat Javascript moeten gebruiken.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map