Behúzható bal oldali menüből tiszta css

előző ◈ a következő

Itt van egy demó változatát mutatja a végeredményt:

Lásd a Pen Awnjk 7661

Kezdjük a HTML-forrás

Ez az alapvető struktúra html kódban:

Az egész elrendezés honlapunkon három fő részből áll: a navigációs menü, egy négyzetet címke, és a tartalmát az oldalon.

    Főbb jelöléseket:
  • navigációs rész az első a jelölés, mert a többi elem a menü hátterében. Használhatja bármilyen HTML, amely meg akarja építeni a menüt. Itt én vagyok a rendezetlen listát.
  • menü gomb egy négyzetet és egy címkét. Általában címke megy jelölőnégyzetet vagy köré. Esetünkben a négyzetet kell menni közvetlenül a címkét. Látni fogjuk, hogy miért ez a helyzet, amikor hozzáadása után CSS.
  • A többi honlapunkon mellékelni kell egy egyedülálló div. Ez azért van, mert amikor a menüt, minden mást tolódik kissé jobbra, hogy bemutassák a rejtett elemeket navigációt.

    • Most, amikor megkapjuk a HTML struktúra tudjuk kezdeni, hogy ki szépen.

    CSS menüpontok

    Kezdjük a menüből, és annak elemei. Először is, meg kell győződnünk arról, hogy a navigációs menü mögött a tartalmat, és hogy a helyén marad, még akkor is, ha a felhasználó mozgatja az oldalt:

    Én hozzá stílusok szabni a design Étlapunkon (háttérszín, határok, színátmenetek, stb.) Nem fogom megismételni a kódot, de megtalálja a demo példa.

    Most van egy szép menüpontok, de a menü alatt az oldal tartalmát. Meg kell adnia stílusok lehet rejteni a menüt, amíg létre az oldalt tartalommal.

    CSS blokk tartalom helyén

    Kezdésként nézzük meg a tartalmát egy webhely teljes mértékben lefedi a menüben. Akkor adjunk hozzá néhány bekezdést RybaTeksta .site-pakolás, ha még nem adott hozzá tartalmat.

    Figyeljük meg, hogy meg kell határozni háttér .site-pakolás, egy másik menü jelenik meg mögötte a tartalmat. Akkor természetesen használja a kívánt hátteret. Én hozzá a következő paraméterekkel:

    CSS menü gombot

    Most add stílusok, hogy növeli jelölőnégyzeteket a címkét, és minden a szokásos formáját, amelyre mind használják.

    Először is, nézzük elrejti a jelölőnégyzetet.

    displa beállítások: block fontos. Alapértelmezésben beviteli elemeket megjeleníteni, mint inline-block. így kell telepíteni, mint egy blokk. így tudjuk beállítani a szélesség és a magasság nulla. Ha szeretnénk használni display: none vagy megjelenéséről: rejtett lenne vágva a billentyűzetet kölcsönhatás a menü, ezért kerülni azt.

    Most Styling elem:

    Először is, akkor állítsa összesen: fix; Most címke lesz a helyhez kötött során görgetés. A bal felső sarokból tulajdonságait határozza meg, hogyan messze a szélén a gomb lesz található. Azt is meg a z-index, hogy lett volna a gomb feletti .site-pakolás.

    Ezután adjuk hozzá egy ikont a gombot.

    Régebben a beépített SVG háttérképet, de használható bármilyen ikonra.

    Felhívjuk figyelmét, hogy én is benne a kurzor: pointer; képernyıkkel interaktív gombokat.

    CSS animáció

    Most, amikor a menü és gombstílusok készek adjunk hozzá néhány sornyi CSS animálni az egészet.

    A második blokk biztosítja, hogy a honlap tartalmának tolódik jobbra 200 pixel. Én is hozzá egy csepp árnyék letiltani tartalmakat, hogy ez egy további vizuális véve azt a tényt, hogy ez a nevetés.

    Egy első választó (.nav-ravaszt: ellenőrzött + címke) figyeli a helyzetét a ravaszt, amikor a menü megnyílik. A értéke 215 nyerik értékek összege 15 (label [a = "nav-trigger"] elhagyta érték) és 200 (.nav-ravaszt: ellenőrzött

    hely-pakolás érték balra)

    A kód, ahol a sorrendben az elemek válik fontossá ravaszt. Második választó felhasználások

    -választó .site-pakolás, amikor .nav trigger kiválasztva.

    Végül fedezi a vízszintes görgetés.

    kész verzió

    Lásd a Pen Awnjk 7661

    Most, hogy tudod, hogy ez megtörtént, akkor a különböző variációk és testreszabás, kísérletezhetsz.

    Kapcsolódó cikkek

    előző ◈ a következő