Kontakty

Horizontálne menu css3. Nástroje na vytvorenie navigačnej lišty. Skvelé menu v štýle jQuery Apple

  • 28.05.2019

Úloha

Zobraziť zoznam s odrážkami vodorovne bez odrážok.

Rozhodnutie

Značka s odrážkami

    predvolene výstupné položky
  • zvislo nad sebou. Na vytvorenie navigačných prvkov je v niektorých prípadoch vhodné zoznam zobraziť vodorovne. Existuje niekoľko spôsobov, ako získať toto zobrazenie zoznamu.

    Mali by ste už vedieť, že HTML obsahuje blokové a vložené prvky. Vložené prvky nevytvárajú svoje vlastné bloky, príkladom takýchto prvkov sú značky alebo ... Prvky bloku sa zobrazia na novom riadku a vytvárajú obdĺžnikový blok, príklad takýchto značiek

    alebo

    Takže značka

  • je tiež blokový prvok.

    Otagovať

  • sa nespráva ako blokový prvok, môžete ho vložiť pomocou CSS.

    Vlastnosť zobrazenia CSS je zodpovedná za to, ako sa prvok zobrazí v dokumente. Zvážme tri z jeho hodnôt (aj keď ich je viac):

    • blok - prvok sa zobrazí ako blok.
    • vložený - prvok sa zobrazí ako vložený.
    • inline-block - prvok block-inline, prečítajte si viac o tomto type prvkov nižšie, použijeme ho.

    Najskôr urobme horizontálny zoznam prevedením jeho položiek na vložené prvky. V štýle CSS napíšeme pravidlo, v ktorom je selektor li nastavený na vlastnosť display s vloženou hodnotou.

    Uveďte vodorovne

    • Odsek 1
    • Bod 2
    • Bod 3

    Tento štýl teda fungoval a dostal položky zoznamu vodorovne:

    Obrázok 1. Práca z príkladu # 1.

    Táto metóda má nevýhody. Je to preto, že vložené prvky majú v porovnaní s blokovými prvkami určité obmedzenia. Napríklad im nemožno dať šírku a výšku, ale blokové áno.

    Napríklad chceme, aby prvok ponuky, ktorú vytvárame, mal šírku 150 pixelov a výšku 40 pixelov. Pokúsme sa zmeniť štýl na nasledujúci, to znamená pridať dve pravidlá, ktoré nastavujú veľkosť položky ponuky:

    Tieto úpravy nebudú mať za následok žiadne zmeny. Aby boli položky ponuky umiestnené vodorovne a aby bolo možné nastaviť ich šírku a výšku, je potrebné ich nastaviť na typ vloženého bloku. Zmeňme kód nášho príkladu:

    Uveďte vodorovne

    • Odsek 1
    • Bod 2
    • Bod 3

    Tento kód funguje a zmeny sú viditeľné:


    Obrázok 2. Práca z príkladu # 2.

    Môžu však existovať rôzne možnosti, napríklad v ponuke musíme zobraziť vnorené zoznamy:

    Vnorený zoznam.

    • Upraviť
      • Zrušiť
      • Vystrihnúť
      • Kópia
      • Vložiť
    • Nápis
      • Odvážne
      • Kurzíva
      • Podčiarknuté
    • Veľkosť
      • Malý
      • Normálne
      • Stredná
      • Veľký

    Tu je výstup tohto kódu:


    Obrázok 3. Práca z príkladu # 3.

    Vidíme, že bloky nie sú zarovnané do výšky, ako by sme chceli. Samozrejme môžete určiť rovnakú výšku pre všetky bloky, ale nie vždy vieme vopred jej presnú hodnotu a tá sa môže meniť.

    Ale prečo sa to vlastne deje?

    Naše bloky majú vlastnosť zobrazenia nastavenú na vložený blok. To znamená, že majú vlastnosti prvkov bloku (schopnosť špecifikovať šírku a výšku), ako aj vložených prvkov. To, čo vidíme, je kvalita vložených prvkov.

    Pozrime sa na reťazec so znakmi „A“ rôznych veľkostí:

    A A A A A A A

    Vidíme, že všetky písmená sú zvisle zarovnané so spodným riadkom. Presnejšie pozdĺž základnej čiary, ale teraz sa nedostaneme do džungle. To isté sa teda stalo s našimi blokmi.

    Vlastnosť vertical-align sa používa na vertikálne zarovnanie textu. V našom príklade č. 3 chceme použiť hodnotu top, ktorá zarovná horné ohraničenie prvku na vrchol najvyššieho prvku v rade.

    Zatiaľ to aplikujeme na reťazec so znakmi „A“ rôznych veľkostí:

    A A A A A A A

    Zdá sa, že písmená trochu „skákajú“. Okraj CSS som nastavil na najvyššie písmeno, aby ste videli, že vlastne nejde o skok, medzi horným okrajom (pozdĺž ktorého dôjde k zarovnaniu) a horným bodom znaku „A“ je prázdne miesto.

    Vlastnosť vertical-align musí byť použitá na každý vložený prvok, nie je zdedený. Môžete si prečítať viac o tejto vlastnosti: vertical-align.

    Po tomto odbočení budeme pokračovať v horizontálnom usporiadaní položiek zoznamu.

    Druhá cesta

    Položky zoznamu môžete umiestniť vodorovne pomocou vlastnosti float. Táto vlastnosť označuje, na ktorej strane je prvok zarovnaný, má dve polohy: ľavú a pravú.

    Tu je príklad použitia tohto kódu:

    Uveďte vodorovne

    • Odsek 1
    • Bod 2
    • Bod 3

    Tu je výstup kódu:

    Obrázok 4. Práca na príklade.

    Zdá sa, že príklad funguje. Používanie tejto vlastnosti má však jednu výhradu. Teraz sa na to pozrieme. Vezmime si napríklad kód, v ktorom sú dva horizontálne zoznamy s rôznymi spôsobmi horizontálneho usporiadania prvkov: display a float:

    Uveďte vodorovne

    • Odsek 1
    • Bod 2
    • Bod 3
    • Odsek 1
    • Bod 2
    • Bod 3

    Tu je výstup kódu:

    Obrázok 5. Práca na príklade.

    V týchto príkladoch je zoznam kontajnerov

      majú červený okraj 1 pixel. Ale horný zoznam, ktorý používa vlastnosť display, obsahuje položky zoznamu. Ale prvky zoznamu vytvoreného pomocou vlastnosti float vypadnú z ich kontajnera.

      Zároveň na prvý pohľad všetko funguje. Poďme si však vymeniť zoznamy. Dajme zoznam s triedou menu-1 v kóde pred zoznam s triedou menu-2 (teraz je nižšie).

      Výsledkom je toto:

      Obrázok 6. Práca na príklade.

      Položky dolnej ponuky tiež prúdia okolo hornej časti ponuky, pretože účinok vlastnosti float nebol zrušený a vzťahuje sa na všetky nasledujúce položky.

      Ako vyriešiť tento problém?

      Ak to chcete urobiť, musíte použiť vlastnosť clear, ktorá zruší zalamovanie prvku nad iným prvkom, ak má nastavenú vlastnosť float.

      Tu je upravený príklad využívajúci vlastnosť clear:

      Uveďte vodorovne

      • Odsek 1
      • Bod 2
      • Bod 3
      • Odsek 1
      • Bod 2
      • Bod 3

      Je vidieť, že spodný zoznam sa už nelepí na horný, prvky sa navzájom neprebiehajú. Ale v prvom zozname sú značky

    • sú stále mimo kontajnera
        .

        Obrázok 7. Príklad spustenia.

        Okrem toho v našej práci nie vždy vieme, ktorý prvok bude nasledovať za prvkom používajúcim float. Ideálne by bolo uzavrieť plavákovú vlastnosť v rovnakom bloku, v ktorom je otvorená.

        To sa deje pomocou pseudoprvku. Tu je kód:

        Uveďte vodorovne

        • Odsek 1
        • Bod 2
        • Bod 3
        • Odsek 1
        • Bod 2
        • Bod 3

        Teraz máme 100% funkčný kód.

        Obrázok 8. Príklad spustenia.

        Táto technika s vlastnosťou float sa zvyčajne používa pri kódovaní webov na zarovnanie stĺpcov vytvorených značkami

        ... Takto dostaneme normálnu konštrukciu stĺpov s požadovaným výškovým vyrovnaním. Keď vytvárame menu, potom pre nás vo väčšine prípadov nie je dôležitá výška blokov, je to takmer vždy rovnaká. Preto je v týchto prípadoch použitie pravidla (display: inline-block) celkom rozumné.

        Ale pre úplnosť zverejnenia témy sme sa tu oboznámili so všetkými možnými možnosťami. Aj keď môžu existovať aj iné spôsoby, napríklad použitie tabuliek CSS, vyhľadávacie nástroje dôrazne odporúčajú používať tabuľky iba na ich zamýšľaný účel, a nie na usporiadanie navigačných prvkov alebo čohokoľvek iného.

        1. Vertikálne jasné menu jQuery

        2. Cool efekt. Tanečné menu.

        4. Rozbaľovací zoznam pomocou jQuery

        Pekný rozbaľovací štýl prvkov používateľského rozhrania.

        Keď umiestnite kurzor myši na tlačidlo, panel sa vysunie zhora.

        6. Doplnok jQuery „MobilyBlocks“ na zobrazenie radiálnej ponuky

        7. Menu s použitím spritov

        Animované javascriptové menu s efektom žiary.

        Čerstvé pekné menu jQuery.

        9. Ponuka jQuery GarageDoor

        10. jQuery vertikálne rolovacie menu

        Implementácia menu s veľkým počtom položiek. Posúva sa, keď pohybujete kurzorom myši nahor alebo nadol.

        11. styling rozbaľovacej ponuky jQuery

        12. Doplnok na navigáciu po stránke

        Plynulé posúvanie do požadovanej sekcie na stránke. Doplnok „Navigácia na jednej stránke jQuery“.

        13. Doplnok „Menu s animovaným obsahom“

        Nový doplnok jQuery. Vynikajúca implementácia animovanej navigácie po stránkach. Pri prechádzaní položkami ponuky sa vysunie blok s popisom a možnými odkazmi a v závislosti od vybranej položky sa zmení pozadie stránky, ktoré sa roztiahne na celú obrazovku bez ohľadu na veľkosť okna prehliadača. Nezabudnite sa pozrieť na ukážkovú stránku.

        14. Doplnok jQuery Sweet Menu

        Animované menu s pohyblivými položkami.

        15. Opravená ponuka jQuery

        Pri posúvaní stránky nadol zostáva ponuka pevne v hornej časti obrazovky.

        16. Rolovacie ponuky posuvnej súpravy

        Implementovať vertikálne menu s množstvom položiek. Listovanie v položkách sa vykonáva pomocou kolieska myši alebo pomocou odkazov „Previos“ a „Ďalej“.

        17. Štýlové menu CSS3

        18. Nové CSS3 Apple Style Menu

        Nové menu v štýle Apple. Vyzerá tmavšie ako predtým, ale nie menej roztomilý.

        19. Originálne menu jQuery

        Rozbaľovacia ponuka s efektom pozadia. Položky podponuky sa rozširujú nahor. Keď umiestnite kurzor myši na položku ponuky, obrázok na pozadí sa zmení.

        20. Animované menu jQuery

        Animované menu. Položky ponuky sú prezentované ako ikony a popisy. niektoré vynikajúce efekty, keď umiestnite kurzor myši na položku ponuky. Existuje 8 efektov, aby ste ich videli všetky - kliknite na odkazy Exemple1 - Exemple8 na ukážkovej stránke.

        21. „Rolovacie menu“ Rolovacie menu XML

        Posúvanie vertikálnych a horizontálnych ponúk. Dobré riešenie, keď je v ponuke veľa položiek.

        22. Kontextové menu na webe v jQuery

        Po kliknutí pravým tlačidlom myši na konkrétnu oblasť sa zobrazí ponuka.

        23. Kruhové dvojúrovňové menu pre web

        Po výbere položky ponuky sa položky podponuky zobrazia vpravo.

        24. Ponuka jQuery CSS3 s rozmazanou ponukou CSS3

        Originálne menu jQuery CSS3 má 7 rôznych štýlov. Keď umiestnite kurzor myši na jednu z položiek ponuky, zvyšok je akoby rozmazaný.

        25. Niekoľko efektných animovaných ponúk jQuery CSS3

        10 kreatívnych animovaných ponúk. Horizontálne a vertikálne ponuky CSS3 s rôznymi efektmi a prechodmi.

        Archív obsahuje aj pôvodný súbor PSD ponuky.

        27. MagicLine Menu

        Pozadie alebo podčiarknutie položky ponuky sleduje myš s miernym oneskorením, zatiaľ čo pozadie plynulo mení svoju farbu pri prechode z položky na položku. Veľmi krásny efekt, vyzerá nezvyčajne. Pozor: efekt v opere nefunguje

        28. Obrázkové bubliny

        Skvelý efekt, keď umiestnite kurzor myši na jeden z obrázkov. Efekt je trochu podobný vyššie opísanému jQDock.

        31. Zaujímavé ponuky jQuery s rôznymi účinkami

        Horizontálna, vertikálna ponuka. Zaujímavé efekty.

        32. Skvelé jQuery Apple Style Menu

        34. jQuery menu so zaujímavým efektom

        36. Čerstvé menu so zaujímavým efektom jQuery

        Veľmi zaujímavý efekt. Ideálne pre portfóliové stránky.

        Zaujímavý efekt vyskakovacích miniatúr pri umiestnení kurzora myši.

        40. Rozbaľovací zoznam s automatickým posúvaním

        Pekný efekt prechodu medzi odsekmi.

        42. Skvelé menu jQuery

        43. Pekné veľké menu jQuery

        44. Posúvanie ponúk jQuery

        Položky ponuky sú prezentované ako miniatúry.

        46. \u200b\u200bjQuery Navigation Radial Menu

        47 ponúk CSS a jQuery

        Navigačný panel s vyhľadávacím poľom, ktoré sa stane polopriehľadným pri posúvaní stránky nadol.

        48. Horizontálna ponuka jQuery

        49. Vertikálna ponuka jQuery

        Vynikajúce zvislé menu. Keď podržíte kurzor, objaví sa položka ponuky.

        50. Horizontálna ponuka jQuery

        Zaujímavý efekt pri umiestnení kurzora myši na položku ponuky.

        52. Rozbaľovacia ponuka jQuery

        Keď umiestnite kurzor myši na ponuku, zobrazia sa jej položky. Objavené položky sa zobrazujú vo forme oblúka, ktorého polomer môžete nastaviť pri konfigurácii doplnku. V niektorých prehliadačoch neuvidíte oblúkové zobrazenie, menu sa zobrazí priamo, ale stále to nezruinuje celkový dojem z tejto implementácie ponuky jQuery.

        53 Navigačná lišta CSS a jQuery

        Zaujímavý efekt, keď umiestnite kurzor myši na položku ponuky.

        54. vyskakovací panel jQuery

        Nové animované menu v odtieňoch sivej.

        58. Navigácia na stránkach podľa stĺpcov pomocou jQuery

        Zaujímavé riešenie pre navigáciu, ktoré je prezentované vo forme zvislých pruhov. Keď umiestnite kurzor myši na tieto pruhy, zobrazí sa obrázok položky a zoznam podponúk. Po kliknutí na položku podponuky sa zobrazí stránka s popisom. Táto implementácia je ideálna pre propagačné weby alebo prezentácie. Nezabudnite si pozrieť ukážku pluginu.

        59 Navigácia na stránkach jQuery

        Navigácia po stránkach je prezentovaná v podobe 4 obrázkov, pri ktorých prejdením kurzorom myši uvidíte zaujímavý animovaný efekt.

        60. Navigačná lišta roluje s obsahom

        Navigačná lišta. Stlačením šípky sa stránka posúva. Navigácia sa posúva spolu s obsahom stránky.

        61. panel jQuery s rôznymi sociálnymi službami

        62. Elegantné animované menu jQuery

        63. Ponuka jQuery Watercolor Brushes

        Od autora: vitajte v našom blogu o budovaní stránok. Toto je séria článkov venovaných novej špecifikácii a dnes by som vám rád povedal, ako vytvoriť menu v html5 a v čom sa tento proces líši od rovnakých v predchádzajúcich verziách jazyka.

        Aké sú rozdiely

        Najskôr by som chcel povedať, že ani špecifikácia nie je taká nová - začala sa formovať už v roku 2009. Od tej doby došlo k neustálemu vývoju - v html5 sa objavujú nové príležitosti, moderné prehliadače práve tieto schopnosti čoraz viac podporujú, takže čoskoro bude možné hovoriť o úplnej podpore tejto technológie, aj keď to nie je niečo ako jeden celok, skôr je to súbor nových funkcií, z ktorých každá je nezávislá.

        No, no, aký je rozdiel medzi vytvorením hlavnej navigácie (menu), keďže čítate článok o tejto téme, potom by tam určite mali byť určité rozdiely. Ako teda vzniklo menu predtým? Zvyčajne používali zoznam s odrážkami, ktorý bol umiestnený v dodatočnom kontajneri pre celú navigáciu - bežný div.

        S príchodom nových značiek teda teraz môžete robiť správnejšie - namiesto značky div zabaliť ponuku do nav - nový sémantický prvok, ktorý bol vytvorený špeciálne na zhromažďovanie najdôležitejších odkazov v ňom, ich zoskupenie.

        Do navigácie môžete vložiť zoznam alebo iba množinu odkazov. Zdá sa mi, že ide o ešte jednoduchšie a správnejšie riešenie, aj keď v mnohých šablónach stále vidíte implementáciu ponuky pomocou značiek ul, li.

        Je zaujímavé, že navigačný kontajner je navrhnutý špeciálne pre prioritné odkazy na stránke. V skutočnosti môže byť na stránke viac ako jeden takýto obsah, ale mali by sa do nich umiestniť iba odkazy, ktoré skutočne tvoria hlavnú navigáciu (napríklad horná hlavná ponuka a jej duplikát v päte stránky).

        Ako vytvoriť vodorovné menu s html5

        V zozname nepotrebujete ani žiadne orámovanie, všetko sa spočiatku zobrazí v jednom riadku, pretože odkazy sú vložené prvky.

        Ďalšou vecou je, že sú dizajnovo veľmi obmedzené kvôli svojim vloženým vlastnostiam. Môžete pracovať iba s vlastnosťami ako: farba, veľkosť písma, okraje. Ak chcete nastaviť konkrétnu farbu pozadia, vytvoriť oddeľovače a pridať interné zarážky (alebo určiť veľkosť každej položky ponuky), potom to s riadkom nebude fungovať.

        Tu musíme previesť naše položky na blokovanie položiek. Aby to mohli urobiť, musia napísať vlastnosť:

        displej: blok;

        Teraz idú zhora nadol, to znamená, že naša navigácia sa zmenila na zvislú. Aby bola opäť vodorovná, musíte pridať určité vlastnosti. Napríklad namiesto typu bloku pre ne definujte typ vloženého bloku alebo ich nastavte (float: left). Prečítajte si viac informácií o týchto metódach.

        Vertikálna navigácia

        Na vytvorenie vertikálneho menu v html5 zvyčajne používajú zoznam, ale označenie, ktoré som vám uviedol vyššie, je pre nás v poriadku. Ako ste videli, ak prevádzate odkazy na blokované odkazy, automaticky sa zoradia jeden za druhým zhora nadol, pretože dva bloky nemôžu stáť na rovnakom riadku.

        Teraz na ne môžete použiť potrebné pravidlá návrhu. V blokoch je oveľa viac vlastností ako v vloženom prvku, takže máte oveľa viac možností. Napríklad som pridal nasledujúce:

        a (textová výzdoba: žiadna; farba: #fff; výplň: 5px; veľkosť písma: 22px; displej: blok; pozadie: lineárny gradient (vpravo, rgba (96 108 136,1) 0%, rgba (63 766 107) , 1) 100%); šírka: 200px; zarovnanie textu: stred)

        text - dekorácia: žiadny;

        farba: #fff;

        výplň: 5px;

        písmo - veľkosť: 22px;

        displej: blok;

        pozadie: lineárne - gradient (doprava, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%);

        šírka: 200px;

        text - zarovnať: na stred

        Špecifikácia

        Popis

        Označiť

        slúži na zobrazenie zoznamu položiek ponuky. Podobné ako značky
          a
            vnútri nádoby zoznam je tvorený pomocou značiek
          • .

            V HTML4 značka

            zastarané, odporúča sa namiesto toho použiť značku
              ... V HTML5 značka znova povolené, ale v inej funkcii. Teraz funguje ako kontajner pre značku a vytvorenie menu.

              Syntax

              Html
            • položka ponuky
            • položka ponuky
              •
              HTML5 ...

              Atribúty

              Nastaví viditeľný štítok pre ponuku. Určuje typ ponuky.

              Koncová značka

              Požadovaný.

              Validácia

              Používanie tejto značky je v rozpore so špecifikáciou HTML4, platný kód je získaný iba použitím prechodného kódu ... V HTML5 použitie značky

              správne.

              HTML 4.01 IE Cr Op Sa Fx

              Značka MENU

              V tomto probléme:

            • Ruská kuchyňa. Burlatskaya ucho
            • Ukrajinské jedlo. Vareniki
            • Moldavská kuchyňa. Paprikáš
            • Kaukazská kuchyňa. Polievka kharcho
            • Baltská kuchyňa. Krútiť sa
              •

              Výsledok tohto príkladu je znázornený na obr. jeden.

              Obr. 1. Pohľad na zoznam vytvorený štítkom

              HTML5 IE Cr Op Sa Fx

              Značka MENU

              • Väčšina klasických stránok na internete používa ako hlavný navigačný prvok vodorovné menu. Niekedy môže obsahovať rôzne ďalšie funkcie - viacúrovňové štruktúry, ikony pre podpoložky, blok vyhľadávania, zložité zoznamy atď. V poslednej dobe už blog mal malú zbierku a dnes sa pozrieme na 4 praktické príklady, ako urobiť rozbaľovaciu ponuku v CSS + HTML. Tieto informácie sú užitočné pre začínajúcich vývojárov a pre tých, ktorí chcú zmeniť navigáciu na svojich stránkach.

              Prvý tutoriál rozbaľovacej ponuky CSS3 je najnovší v tejto kolekcii (pre apríl 2016). Výhody tohto riešenia: táto horizontálna rozbaľovacia ponuka pre web obsahuje ikony v podpoložkách, implementácia a samotný kód CSS sú celkom ľahko pochopiteľné a implementovateľné.

              Krok 1 - značka HTML

              Prvým krokom je vytvorenie neusporiadaného zoznamu v HTML s ukotvovacími odkazmi (#) pre jeho prvky. Tam v jednej z položiek pridajte ďalší vnorený zoznam, ktorý bude zodpovedný za podponuku.

              • Môj informačný panel
              • Páči sa mi
              • Názory
                • Dokumenty
                • Správy
                • Odhlásiť Sa
              • Načítania
              • Videá
              • Dokumenty

              • Môj informačný panel
              • Páči sa mi
              • Názory
                • Dokumenty
                • Správy
                • Odhlásiť Sa
              • Načítania
              • Videá
              • Dokumenty

              Krok 2 - zobrazte ponuku

              Odstráňte nepotrebné polstrovanie CSS pre horizontálne prvky rozbaľovacej ponuky webu. V rovnakom štádiu nastavíme pevnú šírku a výšku položiek ponuky, ako aj pridáme zaoblené rohy.

              .menu, .menu ul, .menu li, .menu a (okraj: 0; polstrovanie: 0; orámovanie: žiadne; obrys: žiadne;) .menu (výška: 40px; šírka: 505px; pozadie: # 4c4e5a; pozadie: -webkit-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); pozadie: -moz-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); pozadie: -o-lineárny-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); pozadie: -ms-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (position: relative; list-style: none; float: left; display: blok; výška: 40px;)

              Menu, .menu ul, .menu li, .menu a (okraj: 0; polstrovanie: 0; orámovanie: žiadne; obrys: žiadne;). Menu (výška: 40px; šírka: 505px; pozadie: # 4c4e5a; pozadie: - webkit-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); pozadie: -moz-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); pozadie: -o-lineárny-gradient ( hore, # 4c4e5a 0%, # 2c2d33 100%); pozadie: -ms-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (position: relative; list-style: none; float: left; display: block ; výška: 40 pixelov;)

              Krok 3 - návrh odkazu

              Okrem základných štýlových prvkov (písmo, farba, výška) používame a vytvárame plynulý prechod farby textu pri vznášaní. Do ponuky tiež pridáme oddeľovače, pričom odstránime ohraničenie od prvého prvku vľavo a od posledného vpravo.

              .menu li a (display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid # 393942; border-right: 1px solid # 4f5058; font -rodina: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: # f3f3f3; text-shadow: 1px 1px 1px rgba (0, 0, 0, .6); -webkit- prechod: farebný .2s uľahčenie vstupu; -moz-prechod: farebný .2s uľahčenie vstupu; -o-prechod: farebný .2s uľahčenie vstupu; -ms-prechod: farebný .2s uľahčenie vstupu. -out; prechod: farba .2s easy-in-out;) .menu li: prvé dieťa a (orámovanie vľavo: žiadne;) .menu li: posledné dieťa a (orámovanie vpravo: žiadne;) .menu li : hover\u003e a (color: # 8fde62;)

              Ponuka li a (displej: blok; výplň: 0 14px; okraj: 6px 0; výška riadku: 28px; výzdoba textu: žiadna; ľavý okraj: 1px plný # 393942; pravý okraj: 1px plný # 4f5058; písmo- rodina: Helvetica, Arial, sans-serif; váha písma: tučné; veľkosť písma: 13px; farba: # f3f3f3; tieň textu: 1px 1px 1px rgba (0,0,0, .6); -webkit-transition : farebný .2s ľahký vstup-out; -moz prechod: farebný .2s ľahký-dovnútra; -o-prechod: farebný .2s ľahký-dovnútra; -ms-prechod: farebný .2s ľahký-dovnútra out; transition: color .2s easy-in-out;) .menu li: first-child a (border-left: none;) .menu li: last-child a (border-right: none;) .menu li: vznášať sa\u003e a (farba: # 8fde62;)

              Krok 4 - podmenu

              Pretože máme v CSS rozbaľovaciu ponuku webu, mali by sme nastaviť aj vzhľad vnoreného zoznamu. Najskôr nastavte polstrovanie zhora na 40 pixelov a doľava na 0 pixelov + pridajte zaoblené rohy. Ak chcete zobraziť / skryť podponuku, najskôr nastavte vlastnosť krytia na nulu a pri umiestnení kurzora myši na jednu. Ak chcete vytvoriť efekt vzhľadu podponuky, nastavte výšku zoznamu na nulu a pri umiestnení kurzora myši \u003d 36px.

              .menu ul (poloha: absolútna; hore: 40px; vľavo: 0; nepriehľadnosť: 0; pozadie: # 1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; ohraničenie -radius: 0 0 5px 5px; -webkit-transition: nepriehľadnosť 0,25 s ľahkosťou 0,1 s; -moz-prechod: nepriehľadnosť 0,25 s ľahkosťou 0,1 s; -o-prechod: nepriehľadnosť 0,25 s ľahkosťou 1,1; -ms-prechod: nepriehľadnosť 0,25s ľahkosť .1s; prechod: nepriehľadnosť .25s ľahkosť .1s;) .menu li: vznášať sa\u003e ul (opacita: 1;) .menu ul li (výška: 0; prepad: skrytý; výplň: 0; -webkit-prechod : výška 0,25 s ľahkosťou 0,1 s; -moz prechod: výška 0,25 s ľahkosťou 1 s; -o prechod: výška 0,25 s ľahkosťou 1 s; -ms prechod: výška 0,25 s ľahkosťou 1 s; prechod: výška 0,25 s ľahkosťou .1s;) .menu li: hover\u003e ul li (výška: 36px; pretečenie: viditeľné; polstrovanie: 0;)

              Ul ponuky (pozícia: absolútna; hore: 40 pixelov; vľavo: 0; nepriehľadnosť: 0; pozadie: # 1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- polomer: 0 0 5px 5px; -webkit-prechod: nepriehľadnosť 0,25 s ľahkosťou 1,1; -moz prechod: nepriehľadnosť 0,25 s ľahkosťou 1,1; -o-prechod: nepriehľadnosť 0,25 s ľahkosťou 1,1; -ms-prechod: nepriehľadnosť. 25s ľahkosť .1s; prechod: nepriehľadnosť .25s ľahkosť .1s;) .menu li: vznášať sa\u003e ul (opacita: 1;) .menu ul li (výška: 0; prepad: skrytý; výplň: 0; -webkit-prechod: výška 0,25 s ľahkosťou 0,1 s; -moz prechod: výška 0,25 s ľahkosťou 1 s; -o prechod: výška 0,25 s ľahkosťou 1 s; -ms prechod: výška 0,25 s ľahkosťou 1 s; prechod: výška 0,25 s ľahkosťou. 1s;) .menu li: hover\u003e ul li (výška: 36px; pretečenie: viditeľné; polstrovanie: 0;)

              Nastavíme šírku odkazov \u003d 100px, na spodok všetkých prvkov okrem posledného sa pridá orámovanie-olemovanie. Ak chcete, môžete tiež umiestniť obrázky pre položky podponuky (pozor! Nezabudnite zmeniť cesty k obrázkom v kóde k tým, ktoré používate).

              .menu ul li a (šírka: 100px; polstrovanie: 4px 0 4px 40px; okraj: 0; okraj: žiadny; spodný okraj: 1px pevný # 353539;) .menu ul li: posledné dieťa a (okraj: žiadny;) .menu a.documents (background: url (../img/docs.png) no-repeat 6px center;) .menu a.messages (background: url (../img/bubble.png) no-repeat 6px center ;) .menu a.signout (pozadie: url (../img/arrow.png) bez opakovania 6px centrum;)

              Menu ul li a (šírka: 100px; polstrovanie: 4px 0 4px 40px; okraj: 0; okraj: žiadny; spodný okraj: 1px pevný # 353539;). Menu ul li: posledné dieťa a (okraj: žiadny;). ponuka a.doklady (pozadie: url (../ img / docs.png) no-repeat 6px centrum;) .menu a.messages (background: url (../ img / bubble.png) no-repeat 6px centrum; ) .menu a.signout (pozadie: url (../ img / arrow.png) no-repeat 6px centrum;)

              Mne osobne sa páči ľahká implementácia a použitie ikon. Tu je konečný kód s kódovým kódom:

              Verzia Josha Risera je vizuálne podobná predchádzajúcej rozbaľovacej ponuke v HTML a CSS. V kóde nie je "\u003e" selektor podriadeného prvku (vhodný pre viacúrovňové konštrukcie), ale autor pre lepšie výsledky dobre využíva efekty CSS3 (prechod, tieň v boxe a tieň textu). Podľa odkazu v zdroji neexistuje žiadny popis procesu vytvárania horizontálnej rozbaľovacej ponuky, takže okamžite uvediem konečný kód:

              V tomto príklade sa pozrieme na to, ako vytvoriť rozbaľovaciu ponuku v CSS, v ktorej bude okrem položiek aj blok vyhľadávania. Podobnú implementáciu možno často nájsť v moderných. Z hľadiska doby a zložitosti implementácie je riešenie o niečo komplikovanejšie ako tie predchádzajúce. Bol zverejnený v máji 2013, takže možno budete musieť vyladiť niekoľko vecí, aj keď v našom testovaní fungoval výborne.

              HTML kód

              Na navigáciu sa ako vždy používa neusporiadaný zoznam (s triedou nav). Položky bežnej ponuky sú položky zoznamu (li) a obsahujú odkazy (href) bez akýchkoľvek tried a ID. Výnimkou sú 3 špecializované prvky tejto horizontálnej rozbaľovacej ponuky s nasledujúcimi ID:

              • nastavenia - obrázok odkazu;
              • hľadať - blok s hľadaním a zodpovedajúcim tlačidlom;
              • možnosti - obsahuje podponuku (implementovanú prostredníctvom zoznamu s triedou subnav).

              Tiež v kóde uvidíte skript bez predpony pre použitie vlastností CSS bez predpôn. Konečný kód HTML rozbaľovacej ponuky vyzerá takto:

              • Aplikácia
              • Doska
              • možnosti
                • nastavenie
                • Aplikácia
                • Doska
                • možnosti

              • Aplikácia
              • Doska
              • možnosti
                • nastavenie
                • Aplikácia
                • Doska
                • možnosti

              CSS pre menu

              1. Základné štýly a prvky ponuky

              Najskôr zadáme písmo Montserrat, tmavošedé pozadie a pevnú výšku položiek ponuky. Všetky prvky sú zarovnané float: left a relatívne umiestnené, takže neskôr môžete pridať podmenu s position: absolute;

              @import url (http: //fonts.googleapis .com / css? family \u003d Montserrat); * (margin: 0; padding: 0;) .nav (background: # 232323; height: 60px; display: inline-block;) .nav li (float: left; list-style-type: none; position: relative; )

              @ import url (http://fonts.googleapis.com/css?family\u003dMontserrat); * (margin: 0; padding: 0;) .nav (background: # 232323; height: 60px; display: inline-block;) .nav li (float: left; list-style-type: none; position: relative; )

              2. Dizajn odkazu

              Na položky ponuky sa aplikuje základný vzhľad +. Výška je rovnaká ako v triede nav. Zarovnanie je nastavené pre #nastavenia odkazu na obrázok na začiatku ponuky.

              .nav li a (veľkosť písma: 16px; farba: biela; displej: blok; výška riadku: 60px; výplň: 0 26px; výzdoba textu: žiadna; ľavý okraj: 1px pevný # 2e2e2e; rodina fontov: Montserrat , sans-serif; text-shadow: 0 0 1px rgba (255, 255, 255, 0,5);) .nav li a: hover (farba pozadia: # 2e2e2e;) #settings a (výplň: 18px; výška: 24px ; veľkosť písma: 10px; výška riadku: 24px;)

              Nav li a (veľkosť písma: 16px; farba: biela; displej: blok; výška riadku: 60px; výplň: 0 26px; výzdoba textu: žiadna; ľavý okraj: 1px pevný # 2e2e2e; rodina fontov: Montserrat, sans-serif; text-shadow: 0 0 1px rgba (255, 255, 255, 0,5);) .nav li a: hover (background-color: # 2e2e2e;) #settings a (výplň: 18px; výška: 24px; veľkosť písma: 10px; výška riadku: 24px;)

              3. Vyhľadávací blok

              Tento prvok má pevnú šírku a skladá sa z niekoľkých častí - vstupného poľa (#search_text) so zeleným pozadím a vyhľadávacieho tlačidla (#search_button). V niektorých prehliadačoch môže byť farba pozadia sivá.

              #search (width: 357px; margin: 4px;) #search_text (width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-right: 0; color: white; outline: none; background: # 1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s;) :: -webkit-input-placeholder (/ * Prehliadače WebKit * / farba: biela;): -moz-placeholder (/ * Mozilla Firefox 4 až 18 * / color: white;) :: -moz-placeholder (/ * Mozilla Firefox 19+ * / color: white;): -ms-input-placeholder (/ * Internet Explorer 10+ * / color: white;) #search_text: focus (pozadie: rgb (64, 151, 119);) #search_button (ohraničenie: 0 žiadne; pozadie: # 1f7f5c url (search.png) stred bez opakovania; šírka: 60px; plavák: vľavo; odsadenie: 0; zarovnanie textu: stred; výška: 52px; kurzor: ukazovateľ;)

              #search (width: 357px; margin: 4px;) #search_text (width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-right: 0; color: white; outline: none; background: # 1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s;) :: - webkit-input-placeholder (/ * Prehliadače WebKit * / farba: biela;): -moz-placeholder (/ * Mozilla Firefox 4 až 18 * / color: white;) :: - moz-placeholder (/ * Mozilla Firefox 19+ * / color: white;): -ms-input-placeholder (/ * Internet Explorer 10+ * / color: white;) #search_text: focus (pozadie: rgb (64, 151, 119);) #search_button (ohraničenie: 0 žiadne; pozadie: # 1f7f5c url (search.png) stred bez opakovania; šírka: 60px; plavák: vľavo; odsadenie: 0; zarovnanie textu: stred; výška: 52px; kurzor: ukazovateľ;)

              4. Rozbaľovacia podponuka

              Posledný dotyk nám umožní vytvoriť rozbaľovaciu ponuku CSS, ktorá sa spustí pre poslednú položku #options.

              #options a (border-left: 0 none;) #options\u003e a (background-image: url (triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav (viditeľnosť: skryté; pozícia: absolútna; hore: 110%; vpravo: 0; šírka: 200px; výška: auto; krytie: 0; prechod: všetkých 0,1 s; pozadie: # 232323;) .subnav li (float : none;) .subnav li a (border-bottom: 1px solid # 2e2e2e;) # options: hover .subnav (visibility: visible; top: 100%; opacity: 1;)

              #options a (border-left: 0 none;) #options\u003e a (background-image: url (triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav (viditeľnosť: skryté; pozícia: absolútna; hore: 110%; vpravo: 0; šírka: 200px; výška: auto; krytie: 0; prechod: všetkých 0,1 s; pozadie: # 232323;) .subnav li (float : none;) .subnav li a (border-bottom: 1px solid # 2e2e2e;) # options: hover .subnav (visibility: visible; top: 100%; opacity: 1;)

              V štýloch nájdete prílohu obrázka na pozadí trojuholníka (triangle.png) na označenie podponuky - nezabudnite v príklade uviesť správnu cestu pre tento a ďalšie obrázky. Vzhľad podponuky sa implementuje pomocou vlastnosti nepriehľadnosť. Konečné riešenie na codepene:

              Táto verzia využíva hlavne techniky CSS2.1, plus alebo mínus nové riešenie - pre marec 2015. Ak vám v horizontálnej rozbaľovacej ponuke webu chýba jedna podúroveň, potom tento príklad obsahuje tri naraz. Pomocou pseudotriedy: only-child je k položkám pridaný symbol „+“, ktorý označuje prítomnosť podmenu.

              Celkovo dobrý a nekomplikovaný príklad. Proces implementácie preto nebudeme podrobne popisovať je to podobné ako tie predchádzajúce - najskôr vytvoríte drôtový model HTML a potom preň postupne pridávate štýly. Stiahnite si konečný kód z odkazu na zdroj, čiastočne si ho môžete pozrieť v Codepene:

              Celkom

              Vyššie sme sa pozreli na 4 možnosti, ako vytvoriť rozbaľovaciu ponuku v CSS + HTML pre, aj keď podobných príkladov je na internete oveľa viac. Existujú riešenia s jQuery, ale toto je s najväčšou pravdepodobnosťou užitočné iba na implementáciu niektorých špeciálnych efektov a neštandardných úloh. Vo väčšine prípadov bude stačiť veľa CSS + HTML, najmä preto, že hlavnými požiadavkami na ponuku sú teraz pohodlie a rýchla rýchlosť načítania.

              Na záver dva komentáre k vyššie uvedeným kódom. Niektoré príklady používajú obrázky pre rozbaľovaciu ponuku v CSS, takže budete musieť starostlivo preskúmať cesty k obrázkom a poskytnúť správne hodnoty pre svoj web. Po druhé, niektoré z riešení sú staré 2 alebo 3 roky, takže by ste si mali ešte raz skontrolovať ich výkon v rôznych prehliadačoch.

              Ak poznáte ďalšie zaujímavé moderné implementácie horizontálnych rozbaľovacích ponúk pre web, pošlite odkazy v komentároch.




        Súvisiace články

Posledné články
Populárne články
Voľba editora
rzdoro.ru