V tomto článku vás chcem upozorniť na príklad tvorby výsuvné menu... Táto ukážková rozbaľovacia ponuka bola vytvorená pomocou CSS a jQuery.
Ponuka sa vysúva zhora po stlačení „tlačidla“ umiestneného v strede úplne navrchu.
Po opustení ponuky sa zmení na zvyšok stránky neprístupné pre výber s myšou.
Zmeňte rýchlosť ktoré menu ide dole alebo skrýva sa veľmi jednoduché, na to musíte zmeniť hodnoty niekoľkých riadkov skriptu:
Ak chcete zmeniť rýchlosť výstupu z ponuky, zmeňte číselnú hodnotu v riadku:
SlideMenu.slideDown (300);
Ak chcete zmeniť rýchlosť pohybu ponuky nahor, zmeňte číselnú hodnotu v riadku:
SlideMenu.slideUp (300);
Čím väčšia je číselná hodnota, tým pomalší bude účinok vychádzania alebo jazdy v ponuke.
Dôležité! Ak chcete pracovať s týmto príkladom transformácie textu, nezabudnite nevyhnutne pripojiť knižnicu jQuery.
Pozrite sa a stiahnuť demo napríklad môžete postupovať podľa nižšie uvedených odkazov.
Html
Výsuvná ponuka Stlačte
Strelcove revolvery prešli na Rolanda od jeho otca, ale keďže sa Roland ukázal byť väčší a silnejší ako on, boli špeciálne zaťažené kovovými platňami.
Revolvery sú opísané ako obrovské a ťažké so žltými držadlami vyrobenými z najkvalitnejšieho santalového dreva. Keď Roland hľadá v New Yorku náboje do svojej zbrane („Fetching Three“), ukáže sa, že sú to vhodné náboje kalibru Winchester 0,45 (pôvodne z Long Coltu rovnakého kalibru).
Pre porovnanie, prvé „univerzálne“ náboje. 44-40 Winchester boli použité v páčkovej puške Winchester Model 1873 a revolveri Colt Peacemaker 1878; Chambered for the 45 Long Colt, Navy Arms, Rossi, Marlin and Winchester produce Leaver Action rifles with Henry's bracket and a underbarrel magazine for modern "cowboy" shooting, the same cartridge used in the Peacemaker and Colt Single Action Army alterations.
CSS
body (border-top: 10px solid # ff725d;) h1 (margin: 90px 0 50px; color: # 666; text-align: center; font-size: 50px;) .content (margin: 0 auto 20px; max-width : 680px; polstrovanie: 0 3%;) .obsahový obrázok (šírka: 260px; výška: auto; orámovanie: plné 10px #fff; tieň poľa: 0 1px 2px # 999; float: vľavo; okraj: 0 3% 3% ;) p (veľkosť písma: 110%; zarovnanie textu: stred; výška riadka: 1,5; okraj: 0 0 15 pixelov;). slide_container (šírka: 100%; poloha: absolútna; horná časť: 0; z-index: 999;) #ponuka (výplň: 50 pixelov 0; spodný okraj: pevný 10 pixelov #ff725d; pozadie: #fff; displej: žiadny;) #ponuka ul. (Pretečenie: skryté; okraj: 0 auto; výplň: 0; max. Šírka : 800 pixelov; šírka: 100%;) #ponuka li (vznášajúci sa: vľavo; výplň: 0; šírka: 20%; štýl zoznamu: žiadny;) #ponuka li a (displej: blok; okraj: 0 5%; výplň: 20 pixelov 0; orámovanie: 1px # 333; pozadie: #fff; farba: # 666; zarovnanie textu: stred; textová dekorácia: žiadna; veľkosť písma: 18px;) # ponuka a a: hover (orámovanie: plné 1 pix.) # 12a1c6; farba: # 1 2a1c6; ) #menu li a: active (border: solid 1px # 0e7b97; color: # 0e7b97;) #btn (margin: 0 auto; width: 200px; height: 30px; border-radius: 0 0 5px 5px; background: # ff725d ; kurzor: ukazovateľ;) Rozpätie #btn (poloha: relatívna; hore: 12 pixelov; vľavo: 50%; displej: blok; ľavý okraj: -25 pixelov; šírka: 50 pixelov; výška: 5 pixelov; polomer ohraničenia: 5 pixelov; pozadie: #fff; box-shadow: inset 1px 1px 2px #ddd;) .layer (position: fixed; top: 0; width: 100%; height: 100%; color-color: #ff725d; -ms-filter: "progid : DXImageTransform.Microsoft.Alpha (opacita = 50) "; nepriehľadnosť: 0,5;) @mediálna obrazovka a (maximálna šírka: 480 pixlov) ( #ponuka (výplň: 5%;) #ponuka li (šírka: 100%;) # ponuka li a (border-top: none;) #menu li a: hover (margin-top: -1px;) #menu li: first-child a (border-top: solid 1px #333;) #menu li: first -dieťa a: vznášať sa (horný okraj: 0; horný okraj: pevný 1px # 12a1c6;))Js
$ (function () (var openBtn = $ ("# btn"), slideMenu = $ ("# menu"), vrstva = $ (" ") .addClass (" vrstva "); openBtn.on (" klik ", funkcia () (ak (slideMenu.is (": skrytá ")) (vrstva.appendTo (" telo "); slideMenu.slideDown (300) ;) else (slideMenu.slideUp (300); layer.remove ();)));));V tomto článku vás chcem upozorniť na príklad vytvorenia výsuvného menu. Tento príklad rozbaľovacej ponuky bol vytvorený pomocou CSS a jQuery. Ponuka sa vysúva zhora po kliknutí na „tlačidlo“ umiestnené v strede úplne hore. Po opustení ponuky sa zvyšok stránky stane neprístupným pre výber myšou. Je veľmi jednoduché zmeniť rýchlosť, ktorou sa ponuka znižuje alebo skrýva, preto musíte zmeniť hodnoty niekoľkých riadkov skriptu: Ak chcete zmeniť rýchlosť vychádzania z ponuky, zmeňte číselnú hodnotu v riadok: Ak chcete zmeniť rýchlosť pohybu ponuky nahor, zmeňte číselnú hodnotu v riadku: Čím väčšia je číselná hodnota, tým pomalšie bude pohyb v ponuke alebo opustenie ponuky. Dôležité! Pracovať s týmto ...
V súčasnej dobe môžete pomocou jQuery na webe robiť čokoľvek, stačí sa rozhodnúť, či to váš web potrebuje. Všetci sa snažíme, aby bola stránka užívateľsky čo najpríjemnejšia, aby bola pre neho príjemná navigácia a aby bola čo najľahšia. Menu hrá veľkú úlohu, keď sa návštevník „prechádza“ po vašom webe. A v tomto návode vytvoríme rozbaľovaciu ponuku, ktorá sa môže skryť a zobraziť, keď to používateľ potrebuje.
Tiež zaujímavé výsuvné ponuky:
Príklad je možné vidieť tu:
Stiahnuť ▼
V tomto návode budeme používať doplnok jQuery „jQuery.mmenu.js“. Dá sa stiahnuť z odkazu - stiahnuť.
Ako použiť?
Časť HTML
Najprv zahrňme potrebné knižnice a štýly:
| 1 2 3 4 5 | <link type = "text / css" rel = "stylesheet" href = "css / jquery.mmenu.css" /> <link type = "text / css" rel = "stylesheet" href = "css / demo.css" /> <script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> <typ skriptu = "text / javascript" src = "js / jquery.mmenu.js"> |
Potom definujeme štruktúru ponuky. Aby som napríklad ukázal, ako to funguje, vytvorím menu s vnorenými položkami. Ale môžete mať jednoduchší:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Vložíme prepínač tesne nad ponuku, aby ho používateľ mohol otvoriť / zatvoriť:
So štruktúrou HTML sme skončili, teraz prejdeme k štýlom.
V pokračovaní príkladov rôznych prvkov používateľského rozhrania stránok, ktoré je možné vykonať bez Javascriptu, dnes popíšem, ako je možné vytvoriť výsuvné menu v čistom CSS.
A opäť DEMO, na začiatok.
Začnime tým Html-konštrukcie:
Na určenie viditeľnosti ponuky potrebujeme vstup: to znamená, že ak je vybratá, potom je ponuka viditeľná a naopak.
štítok je naše tlačidlo hamburgeru, ktoré je viazané na vstup.
ul je samotný blok ponuky.
Teraz CSS(napísané iba pre prehliadače WebKit: Opera 16+, Safari, Chrome).
Naše menu:
Skryté menu (zobrazenie: blok; poloha: pevná; štýl zoznamu: žiadny; výplň: 10 pixelov; okraj: 0; veľkosť poľa: rámček; šírka: 200 pixelov; farba pozadia: #eee; výška: 100%; hore: 0; vľavo: -200px; prechod: vľavo .2s; z-index: 2; -webkit-transform: translateZ (0); -webkit-backface-visibility: skrytý;)
Tu je veľký priestor pre kreatívy, ale hlavnými parametrami sú šírka a ľavá strana. Musia mať rovnakú hodnotu, ale vľavo je záporné. Preto skryjeme našu ponuku naľavo od obrazovky. Tiež som pridal prechod: ľavá .2s animácia pre krásu procesu mimo obrazovku.
Naše začiarkavacie políčko:
Skrytý ticker ponuky (zobrazenie: žiadne;)
Jednoducho ho robíme neviditeľným.
Burger Button:
Ponuka Btn (farba: #fff; farba pozadia: # 666; výplň: 5 pixelov; poloha: pevná; horná časť: 5 pixelov; vľavo: 5 pixelov; kurzor: ukazovateľ; prechod: vľavo, 0,23 s; z-index: 3; šírka: 25px; -webkit-transform: translateZ (0); -webkit-backface-visibility: hidden;) .btn-menu span (display: block; height: 5px; color-color: #fff; margin: 5px 0 0; transition : všetky .1s lineárne .23s; poloha: relatívna;). btn-menu span.first (margin-top: 0;)
Môžete tiež navrhovať, ako sa vám páči. Práve som vyrobil sivý gombík s bielymi pruhmi v ľavom hornom rohu. Tu som pridal aj animácie pre samotné tlačidlo a pre pruhy (len pre krásu).
Teraz takzvané „kúzlo“:
Skrytý zoznam ponúk: začiarknutý ~ .btn-menu (vľavo: 160 pixelov;). -Skrytý-menu-ticker: začiarknutý ~ .skrytý-ponuka (vľavo: 0;). Skrytý-menu-ticker: začiarknutý ~ .btn-menu span.first (-webkit-transform: rotate (45deg); top: 10px;) .hidden-menu-ticker: checked ~ .btn-menu span.second (opacity: 0;) .hidden-menu-ticker: checked ~ .btn-menu span.third (-webkit-transform: rotate (-45deg); top: -10px;)
Selektory CSS3 nám umožňujú určiť stav začiarkavacieho políčka a v závislosti od toho použiť určité vlastnosti na susedné prvky: začiarknuté ~. V tomto prípade, keď je začiarknutý vstup, presunieme tlačidlo ponuky. Skrytá ponuka-značka: zaškrtnutá ~. .skryté menu. Ostatné štýly sú napísané pre prúžky tlačidla ponuky tak, aby sa po stlačení zmenili na krížik a naopak.
Teraz rýchlo a ľahko vytvoríme zvislú ponuku, ktorá sa bude animovať a bude sa pohybovať zo strany, keď ju vyvoláte stlačením tlačidla.
KROK 1. Pridanie ponuky do súboru HTML
Vložte nasledujúci kód do súboru html:
Môžete vidieť, že pre všetky tlačidlá ponuky, s prihliadnutím na tlačidlo samotnej ponuky, bola pridaná trieda openButton... To sa deje tak, že náš skript, ktorý spojíme, môže viazať stlačenie týchto tlačidiel na akcie otvárania a zatvárania ponuky.
KROK 2. Pridávanie štýlov
Teraz trochu upravíme štýl našej ponuky a všetkých tlačidiel. Vložte do svojho css kód súboru nižšie:
Tlačidlo (pozadie: priehľadné; orámovanie: priehľadné; obrys: žiadne; kurzor: ukazovateľ; okraj: 50 pixelov 90 pixelov; hmotnosť písma: tučné; veľkosť písma: 24 pixelov; farba: # 6c7d96; prechod: 0,2 s;) tlačidlo: vznášať sa ( prechod: 0,2 s; krytie: 0,7;) tlačidlo: aktívne (prechod: 0,2 s; krytie: 0,4;) nav (farba pozadia: # 6c7d96; šírka: 250 pixelov; poloha: relatívna; vľavo: -999 pixelov; prechod: 0,5 s jednoduchosť;) nav ul li (polstrovanie: 20 pixelov 0; zarovnanie textu: stred; prechod: 0,2 s;) nav ul li: vznášanie (kurzor: ukazovateľ; farba pozadia: # 454954; prechod: 0,2 s;) nav ul li : aktívny (farba pozadia: # 23252b; prechod: 0,2 s;) nav ul li a (farba: biela; textová dekorácia: žiadna; hmotnosť písma: tučné; veľkosť písma: 21 pixelov;)
Najdôležitejšia časť kódu je vo voliči nav... S pomocou relatívneho umiestnenia skryjeme našu ponuku mimo viditeľnú časť stránky napísaním zápornej hodnoty pre vľavo.
Poznámka... Pevné určovanie polohy môžete použiť aj vtedy, ak pri posúvaní potrebujete prilepiť ponuku na obrazovku. Toto bude fungovať rovnako ako naša verzia.
KROK 3. Pripojenie skriptu
Do svojho súboru js musíte vložiť tento kód:
$ (document) .ready (function () ($ (". openButton"). click (function () (if (! $ (". openButton"). hasClass ("openDone")) ($ (". openButton" ) .addClass ("openDone"); $ ("nav"). css ("vľavo", "0px");) else ($ (". openButton"). removeClass ("openDone"); $ ("nav" ) .css ("vľavo", "-999px");))); / * Pripojte sa, keď pôvodne chcete, aby ponuka reagovala na určitú veľkosť obrazovky Tento kód rieši problém náhodného zmiznutia ponuky pri zmene veľkosti obrazovky prehliadača Nastaviť šírka, keď to umožňuje responzívny dizajn vašej ponuky $ (okno). zmena veľkosti (funkcia () (ak ($ (okno). šírka ()> 1200) ($ ("nav ul li"). removeAttr ("štýl ");))); * /));
Skript skontroluje udalosť kliknite pre tlačidlá s triedou openButton, ktoré sme im dali skôr. Okamžite prebieha kontrola prítomnosti triedy openDone. Podľa toho, či majú tlačidlá túto triedu, tento skript rozhodne, či ponuku zatvorí alebo otvorí.
Mimochodom, túto triedu sme nikde nepredpisovali. Funguje to ako druh prepínača. Funguje to tak, že keď stlačíte tlačidlo " PONUKA“, Na všetky tlačidlá s triedou openButton trieda sa pridáva openDone. A keď používateľ znova klikne na ktorékoľvek z tlačidiel ponuky, skript triedu odstráni openDone na tieto tlačidlá.
Preto je táto trieda potrebná iba pre skript, aby porozumel, v ktorých okamihoch je potrebné zobraziť ponuku a kedy ju zavrieť. Keby sme nepridali triedu openDone, skript by nefungoval správne a ponuka, keď ju otvoríte kliknutím na tlačidlo, sa jednoducho otvorí a okamžite zatvorí.
Poznámka... Kód komentovaný nižšie je potrebné zahrnúť, ak pomocou tohto skriptu animujete responzívnu verziu horizontálnej ponuky. Rieši problém so zmiznutím ponuky pri zvýšení veľkosti obrazovky.
Zhrnutie
Vytvorili sme najjednoduchšiu animovanú bočnú ponuku, ktorá sa zobrazuje po stlačení tlačidla. Ako vidíte, tu nie je nič komplikované. Tento kód môžete vylepšiť a ľubovoľne ho upravovať.
Ako navigačné menu na strane, ponuka užívateľského profilu a pod. Môžete sa skryť a zobrazia sa, keď kliknete a umiestnite kurzor myši. Niekto by mohol povedať, že tým trpí použiteľnosť stránky. Nemyslím si, že pretože stránka bude čistejšia, znamená to, že je jednoduchšie sa v nej pohybovať. V hore odkazov sa človek nenechá zmiasť.
Dnes som pripravil zbierku posuvné panely ktoré sú predvolene skryté na stránke. Zavolať Ponuka, musíte kliknúť alebo umiestniť kurzor myši na zodpovedajúcu ikonu. Táto technika prišla k webdesignu z mobilných aplikácií, kde nemôžete rozložiť veľa prvkov na jednu obrazovku. V priebehu času sa takéto panely migrovali aj na webové stránky. Táto zbierka bude užitočná predovšetkým pre vývojárov mobilných zariadení. Pri malom rozlíšení obrazovky sa to zobrazí. výstupná navigácia, ale na bežných veľkých monitoroch si môžete urobiť obvyklé menu, na ktoré je každý zvyknutý. Osoba s mobilným zariadením tak nebude na vašom webe zmätená, pretože je na používanie už dlho zvyknutá posuvné panely, pretože všetky aplikácie v jeho smartfóne fungujú na rovnakom princípe.
Chcem poznamenať, že táto zbierka obsahuje doplnky, ktoré sú zaostrené iba pod mobilné stránky a na širokých monitoroch by bolo ich použitie nevhodné. Aj keď existujú aj univerzálne panely, ktoré sa zmestia na akúkoľvek webovú stránku. Pozrite si ukážku a vyberte si, čo vyhovuje vašim potrebám.
Rozbaľovacie panely fungujú. Implementácia takejto ponuky na vašu stránku nebude náročná a stránky vývojárov obsahujú podrobné pokyny na používanie ich produktu.
Čoskoro plánujeme redizajn webu „Postovoy“ a použijeme jeden z doplnky jquery ktoré sú uvedené nižšie.
Takže. Do vašej pozornosti zbierka 20 doplnkov posuvníka v rozbaľovacej ponuke jQuery pre vašu stránku. Nezabudnite zanechať komentáre.
Posúvateľné bočné menu
Simpatická jQuery vysúvateľná navigačná ponuka vo forme posuvnej lišty. Ideálne pre mobilný aj bežný web.
Prechody pre navigácie mimo plátna
Extrémne výkonný doplnok, ktorý vám umožňuje usporiadať panel snímok, ktorý sa bude zobrazovať s rôznymi animačnými efektmi vrátane 3D. Doplnok obsahuje 14 animačných efektov.
jPanelMenu
Navigačná lišta je vyrobená v štýle aplikácií IOS. Jednoduché a rýchle menu, ktoré uľahčí vývoj mobilného webu.
Znova vytvoriť ponuku Google Nexus
Vysúvací panel je vytvorený analogicky s ponukou Google Nexus.
bigSlide - posuvná lišta navigácie Jquery
Posuvník je vhodný pre mobilný aj bežný web. Ak to chcete nazvať, musíte kliknúť na ikonu zobrazujúcu tri pruhy.
Viacúrovňová push ponuka
Doplnok Jqutry funguje podobne ako bigSlide. Panel sa vyvolá kliknutím na ikonu. Výhodou tejto ponuky je, že podporuje vrstvenú štruktúru.
Menu veka boxu
Veľmi pekná posuvná navigačná lišta s 3D efektom.
Animované pohraničné ponuky
Kliknutím na znamienko plus v rohu obrazovky sa zobrazí malý bočný panel s ikonami. Ak ho chcete skryť, musíte kliknúť na ikonu so symbolom „-“.
Snap.js
Posuvník je určený pre mobilné zariadenia. Ponuka sa vyvolá potiahnutím obrazovky kurzorom myši alebo, ak je na mobilnom zariadení, prstom.
Prezentačné a push ponuky
|
Meny
Doplnok jquery, ktorý vám umožňuje implementovať na váš web skvelú navigačnú lištu s 3D efektom.
mb.jquery
Na rozdiel od iných panelov sa zobrazuje skôr ako premiestňovanie v hornej časti obrazovky. Do bloku môžete vložiť ľubovoľný html, text a všeobecne čokoľvek, čo sa vám páči.
Dok pre Android
Panel je prispôsobený pre mobilné weby a nachádza sa v spodnej časti obrazovky. Po kliknutí sa zobrazia ikony, do ktorých môžete umiestniť akékoľvek odkazy.