Pokračovaním v príkladoch rôznych prvkov UI webových stránok, ktoré je možné vytvoriť bez Javascriptu, dnes popíšem, ako môžete vytvoriť vysúvacie menu pomocou čistého CSS.
Pre kreatívnych ľudí je tu veľká voľnosť, ale hlavnými parametrami sú šírka a ľavosť. Musia mať rovnakú hodnotu, ale vľavo je záporné. Preto skryjeme našu ponuku naľavo od obrazovky. Pridal som aj prechodovú animáciu: vľavo 0,2 s, aby bol proces odchodu z obrazovky krajší.
Môžete si ho tiež navrhnúť, ako len chcete. Urobila som jednoduchý šedý gombík s bielymi pásikmi v ľavom hornom rohu. Tu som pridal aj animácie pre samotné tlačidlo a pre pruhy (len pre krásu).
Selektory CSS3 nám umožňujú určiť stav začiarkavacieho políčka a v závislosti od toho použiť určité vlastnosti pre susedné prvky: začiarknuté ~ . V tomto príklade so „zaškrtnutým“ vstupom presunieme tlačidlo ponuky.hidden-menu-ticker:checked ~ .btn-menu doľava o 160 pixlov, ponuku na ľavý okraj.hidden-menu-ticker:checked ~ .hidden-menu . Zvyšné štýly sú napísané pre pruhy tlačidla menu tak, aby sa po stlačení zmenili na krížik a naopak.
V súčasnosti môžete pomocou jQuery robiť na webe čokoľvek, len sa musíte rozhodnúť, či to váš web potrebuje. Všetci sa snažíme o to, aby bola stránka užívateľsky čo najpríjemnejšia, aby sa mu na stránke pohybovalo príjemne a bola čo najjednoduchšia. Menu hrá veľkú rolu, keď návštevník „prechádza“ vašou stránkou. A v tomto návode vytvoríme posuvné menu, ktoré sa môže skryť a zobraziť, keď to používateľ potrebuje.
Tiež zaujímavé posuvné menu:
Príklad je možné vidieť tu:
Stiahnuť ▼
V tomto návode použijeme doplnok jQuery – „jQuery.mmenu.js“. Dá sa stiahnuť z odkazu - stiahnuť.
Potom sa rozhodneme pre štruktúru menu. Ako príklad, aby som ukázal, ako to funguje, urobím menu s vnorenými prvkami. Ale ten váš môže byť jednoduchší:
Kúsok nad menu vložíme prepínač, aby ho mohol užívateľ otvoriť/zatvoriť:
So štruktúrou HTML sme skončili, teraz prejdime k štýlom.
Ako navigačné menu na strane, menu užívateľského profilu atď. môžu byť skryté a zobrazia sa po kliknutí a umiestnení kurzora myši. Niekto by mohol povedať, že to ovplyvňuje použiteľnosť stránky. Nemyslím si to, pretože stránka sa stáva čistejšou, čo znamená, že navigácia je jednoduchšia. V kopci odkazov sa človek nepletie. Dnes som pripravila kolekciu posuvné panely, ktoré sú na stránke predvolene skryté. Zavolať Ponuka, musíte kliknúť alebo umiestniť kurzor myši na príslušnú ikonu. Táto technika sa do webdizajnu dostala z mobilných aplikácií, kde nie je možné rozložiť veľa prvkov na jednu obrazovku. Postupom času takéto panely migrovali na webové stránky. Táto zbierka bude užitočná predovšetkým pre mobilných vývojárov. Pri nízkom rozlíšení obrazovky sa objaví toto. odchádzajúca navigácia, a na bežných veľkých monitoroch si spravíte obvyklé menu, na ktoré je každý zvyknutý. Človek s mobilným zariadením tak nebude na vašej stránke zmätený, keďže je už dávno zvyknutý používať posuvné panely, pretože všetky aplikácie v jeho smartfóne fungujú na rovnakom princípe. Chcel by som poznamenať, že táto zbierka zahŕňa pluginy, ktoré sú zaostrené len pre mobilné stránky a na širokých monitoroch bude ich použitie nevhodné. Aj keď existujú aj univerzálne panely, ktoré sú vhodné pre akýkoľvek web. Pozrite si ukážku a vyberte si, čo vyhovuje vašim potrebám. Rozbaľovacie panely fungujú na . Implementácia takéhoto menu na vašom webe nebude náročná a weby vývojárov obsahujú podrobné pokyny, ako ich produkt používať. Čoskoro plánujeme redizajn webovej stránky Postovoy a použijeme jeden z pluginy jquery ktoré sú uvedené nižšie. Takže. Dávame do pozornosti kolekciu 20 doplnkov pre rozbaľovací panel jquery pre váš web. Nezabudnite zanechať komentáre.
Posúvateľná bočná ponuka
Pekné posuvné navigačné menu v jquery vo forme posuvného panela. Ideálne pre mobilné aj bežné stránky.
Prechody pre navigácie mimo plátna
Mimoriadne výkonný doplnok, ktorý vám umožní usporiadať panel snímok, ktorý sa zobrazí s rôznymi animačnými efektmi vrátane 3D. Plugin obsahuje 14 animačných efektov.
jPanelMenu
Navigačný panel je navrhnutý v štýle iOS aplikácií. Jednoduché a rýchle menu, ktoré uľahčí vývoj mobilnej stránky.
Znova vytvorte ponuku Google Nexus
Posuvný panel je vyrobený analogicky s ponukou Google Nexus.
bigSlide - posuvná navigačná lišta v Jquery
Posuvný panel je vhodný pre mobilnú aj bežnú stránku. Ak to chcete zavolať, musíte kliknúť na ikonu zobrazujúcu tri pruhy.
Viacúrovňová ponuka push
Plugin Jqutry funguje podobne ako bigSlide. Panel sa vyvolá po kliknutí na ikonu. Výhodou tohto menu je, že podporuje viacúrovňovú štruktúru.
Box Lead Menu
Veľmi krásna navigačná posuvná lišta s 3D efektom.
Animované hraničné menu
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ý panel je určený pre mobilné zariadenia. Menu sa vyvoláva potiahnutím obrazovky kurzorom myši alebo, ak ide o mobilné zariadenie, prstom.
Posuvné a stláčacie ponuky
|
Meny
Doplnok Jquery, ktorý vám umožňuje implementovať skvelú navigačnú lištu s 3D efektom na váš web.
mb.jquery
Na rozdiel od iných panelov sa zobrazuje v hornej časti obrazovky namiesto toho, aby sa pohyboval. Do bloku môžete vložiť akýkoľvek html, text alebo čokoľvek chcete.
Android Dock
Panel je určený pre mobilné stránky a nachádza sa v spodnej časti obrazovky. Po kliknutí sa zobrazia ikony, do ktorých môžete umiestniť ľubovoľné odkazy.
Posuvný panel s obsahom
Cool slide panel je navrhnutý v dvoch úrovniach. Prvým je menu. Druhým je obsah. Teraz je tento efekt veľmi populárny medzi dizajnérmi a webovými vývojármi. Môžete nájsť veľa aplikácií. Na podobnom princípe funguje aj mailer od Microsoftu.
Nenašli ste odpoveď na svoju otázku? Pozrite sa sem
Vytvorenie posuvného bočného menu pomocou čistého CSS
Aktualizujte rámec na najnovšiu verziu
Náhodná pošta. Generátor e-mailových adries. Možnosť Gmailu na vytvorenie dočasnej e-mailovej adresy