Ako si vyrobiť Bio Dropbox s CSS

Potom, čo som vydal najnovší redizajn tematického laboratória, Do poľa „Bio dropdown“, ktoré mám na navigačnej lište, som mal niekoľko poznámok. Kódoval som to iba niekoľkými riadkami CSS a obrázkom na pozadí.


V tomto príspevku s tipom CSS sa zameriam na to, ako môžete mať podobný efekt vznášania sa na svojich vlastných stránkach.

Príklad

V tomto príklade budem používať textovú miniaplikáciu v Dvadsať jedenásť tému, nové predvolené nastavenie ako WordPress 3.2.

Po umiestnení kurzora myši na div, ktorý obsahuje miniaplikáciu, sa objaví „skrytá“ div, ktorá bude našim biologickým rozbaľovacím zoznamom..

Všimnite si, že na obrázku vľavo sa sivé bio políčko neobjaví, pokiaľ nekliknete na div obsahujúci nadpis „Bio Hover“.

Selektor

Nie je také dôležité mať jedinečný selektor CSS, ktorý by určoval štýl, do ktorého chcete umiestniť svoje rozbaľovacie pole. V podstate je to tak preto, že ak nemáte v tomto diele sprievodné označenie, tak by sa v prípade stav vznášania.

Aj keď v prípade dvadsiatich jedenástich by sme sa mohli zbaviť jednoduchého štýlu triedy „stranou“, je pravdepodobné, že budete chcieť iba rozbaľovaciu schránku na biopalivách v jednom z vašich divov, takže budeme konkrétnejší..

Našťastie s WordPress vyplivuje veľa jedinečných selektorov CSS, ktoré môžete použiť. V tomto príklade vypláva # test-3, ktorý odteraz použijeme.

Poznámka: To sa môže líšiť v závislosti od vašej inštalácie WordPress. Použite niečo ako Nástroje pre vývojárov Chrome, aby ste ľahko našli selektor.

Značenie HTML

V tomto príklade môže byť značka HTML umiestnená priamo do textového widgetu WordPress. Toto by ste vložili:

Leland!

Ahoj. Som Leland Fiegel a som tvorcom a zakladateľom spoločnosti Theme Lab. Rád píšem kód, najmä HTML, CSS a pre WordPress.

Ak nechcete ukradnúť moju identitu, pravdepodobne budete chcieť fotografiu nahradiť obrázkom seba. Môžete ho tiež prípadne odstrániť.

Keďže používame miniaplikáciu WordPress, odľahlé označenie pre nás už bolo vygenerované. To je to, čo je celkom.

Bio Hover

Leland!

Ahoj. Som Leland Fiegel a som tvorcom a zakladateľom spoločnosti Theme Lab. Rád píšem kód, najmä HTML, CSS a pre WordPress.

Ak to robíte na surovom webe HTML, budete potrebovať nejaký obal (ako je tento, ktorý je stranou) pre biologické rozbaľovacie zariadenie s niečím iným na ňom, inak nie je na čo umiestniť kurzor, aby sa rozbaľovacie pole.

Príklad zo skutočného života: Moja bio rozbaľovacia časť je v mojej navigačnej ponuke vo vnútri značky li.

Prvé dve riadky CSS

Prvé dva riadky skutočne nastavili zvyšok, takže som to dal do svojej vlastnej sekcie.

# text-3 {pozícia: relatívna; }
.bio-dropdown {display: none; }

vysvetlenie

  • Prvá línia: Nastavili sme obal biologického rozbaľovania tak, aby mal relatívne umiestnenie. To uľahčuje absolútne umiestnenie biorozbaľovacej skrinky bližšie k pôvodnému obalu.
  • Druhý riadok: To v podstate robí rozbaľovacie pole bio v predvolenom nastavení neviditeľné. Pamätajte, že sa to má ukázať iba vtedy, keď na niečo prejdete?

Poznámka: Ak nie ste fanúšikom displeja: žiadny; alebo si myslíte, že to bolí váš SEO alebo tak niečo, môžete tiež použiť niečo v línii pozícií: absolútne; vľavo: -100000em; ktorý ju v podstate presunie tak ďaleko zo stránky, nikto by ju nikdy nevidel.

Zvyšok CSS

Nasledujúci kód CSS rieši vzhľad a dojem z rozbaľovacej ponuky bio.

# text-3: hover .bio-dropdown {
displej: blok; z-index: 99;
pozícia: absolútna; hore: 25px;
pozadie: #ccc; čalúnenie: 10px 10px 0 10px;
veľkosť písma: 11px; výška riadku: 18px; farba: # 666;
}

vysvetlenie

Toto je miesto, kde konečne používame selektor # text-3 spolu s: hover pseudoclass, aby sa rozbaľovacie pole bio zobrazilo iba vtedy, keď umiestnite kurzor myši na textový widget.

  • Prvá línia: Displej: blok; zviditeľní rozbaľovaciu schránku bio. Z-index: 99; zaisťuje, že pole bude zobrazené nad všetkým ostatným, bez prekážok.
  • Druhý riadok: To umiestni rámček stranou stranou asi 25 pixelov.
  • Tretí riadok: To sú len niektoré kozmetické štýly, ktoré nastavujú pozadie na svetlošedú farbu so slušným čalúnením.
  • Štvrtý riadok: Toto všetko je samovysvetľujúca typografia.

Poznámka: Pokiaľ ide o prvý riadok, ak používate pozíciu: absolútne; vľavo: -100000em; technika namiesto zobrazenia: žiadna; ako som už vysvetlil vyššie, pomocou displeja: tu by blok nebol potrebný (pretože divy sa už aj tak považujú za prvky úrovne bloku). Namiesto toho by ste mali použiť zľavu: 0; presunúť div späť na stránku.

A pre obraz iba jednoduchý plavák a pravý okraj.

.bio-dropdown .photo {float: left; pravý okraj: 10px; }

Integrácia WordPress

Neviem si predstaviť dobrý spôsob, ako to integrovať do dynamickej ponuky WordPress (wp_nav_menu) bez toho, aby som niečo odfiltroval. Najjednoduchší spôsob môže byť pevný kód vašej navigácie a prekonať to (čo robím na všetkých svojich stránkach).

Ak máte nejaké techniky, ako vložiť označenie do položky ponuky WordPress, ktorá je k tomu potrebná, rád by som sa o tom do komentárov dozvedel. Som si istý, že je to možné, ale presahuje rámec tohto príspevku o tipoch CSS.

záver

Áno, uvedomujem si, že by ste pravdepodobne nechceli vložiť biorozbaľovaciu ponuku do bočného panela, umiestnili by ste ju na miesto s obmedzeným priestorom, ktoré nemá priestor na jej úplné zobrazenie (napríklad stiesnený navigačný panel).

Našťastie môžete použiť tento teqhnique takmer kdekoľvek. Len som chcel ísť cez základnú techniku, ako zobraziť celú div na vznášadle.

Nie je to príliš komplikované a nepotrebujete na to žiadne fantastické Javascriptové súbory, hoci ak by ste chceli nejaký high-tech efekt vyblednutia, pravdepodobne by ste museli použiť nejaký Javascript.

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