Ahojte priatelia, v tomto návode vytvoríme animované tlačidlo ponuky. Tlačidlo ponuky je najdôležitejším prvkom webovej stránky a aplikácie. Tlačidlo Menu sa používa na zobrazenie navigačných odkazov. V našom dizajne, keď používateľ umiestni kurzor myši na ikonu, spustí sa pulzná animácia ako tieň ikony. Po kliknutí na tlačidlo sa položky ponuky zobrazia s jednoduchou animáciou prechodu. Po umiestnení kurzora myši na položky ponuky sa pozadie zmení na svetlosivé a farba textu a ikon sa zmení na tmavočiernu. Po kliknutí na tlačidlo ponuky sa ikona ponuky zmenila na krížik. Nakoniec používateľ klikne na ikonu krížika, položky ponuky zmiznú. index.html <!DOCTYPE html> <head> <title>Animované tlačidlo menu</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="list-container"> <button class="more-button" aria-label="Menu Button"> <div class="menu-icon-wrapper"> <div class="menu-icon-line half first"></div> <div class="menu-icon-line"></div> <div class="menu-icon-line half last"></div> </div> </button> <ul class="more-button-list"> <li class="more-button-list-item"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"> <circle cx="12" cy="12" r="3"/> <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/> </svg> <span>Nastavenia</span> </li> <li class="more-button-list-item"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/> </svg> <span>Kopírovať</span> </li> <li class="more-button-list-item"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"> <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13"/> </svg> <span>Zdielať</span> </li> <li class="more-button-list-item"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"> <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"/> </svg> <span>Odstrániť</span> </li> </d> </div> <script type="text/javascript" src="script.js"></script> </body> </html> Tu sme použili SVG na vytvorenie ikon a tlačidlo ikony ponuky je vytvorené pomocou div. <button class="more-button" aria-label="Menu Button"> <div class="menu-icon-wrapper"> <div class="menu-icon-line half first"></div> <div class="menu-icon-line"></div> <div class="menu-icon-line half last"></div> </div> </button> Tu sme použili tlačidlo na vytvorenie vonkajšej časti tlačidla ponuky, potom sa vo vnútri tlačidla vytvorí ďalší div na vytvorenie ikony. Tu sú všetky tri riadky vytvorené pomocou troch ďalších divy v div „menu-icon-wrapper“. Všetky tieto divy sú konvertované na riadky pomocou CSS. style.css Najskôr si importujeme fonty. @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); Potom je univerzálna veľkosť boxu nastavená na border-box a je uvedená šírka tela, výška a hodnota farby. * { box-sizing: border-box; } body { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #ffffff; font-family: "Montserrat", sans-serif; } V tejto časti sme pridelili hodnoty do .list-container a jeho podriadeným prvkom. .list-container { position: relative; } .list-container.active .more-button-list { opacity: 1; transform: scale(1); } Keď používateľ klikne na tlačidlo v tom čase, zobrazí sa iba ponuka, nie ikony. Tu sme použili túto vlastnosť na .list-container, pretože je rodičom pre .more-button-list. .list-container.active .more-button-list-item { animation: fadeInItem 0.6s 0.2s forwards; } .list-container.active .more-button-list-item:nth-child(2) { animation-delay: 0.4s; } .list-container.active .more-button-list-item:nth-child(3) { animation-delay: 0.6s; } .list-container.active .more-button-list-item:nth-child(4) { animation-delay: 0.8s; } Je to najdôležitejšia časť našej fade-in animácie. Aplikovali sme animáciu na položky .more-button-list-item (každá položka nášho zoznamu ponuky) a potom sme použili animation-delay na každý prvok pomocou :nth-child, takže to vyzerá, že každá položka ponuky je zobrazená po prvej. .list-container:hover > .more-button { animation: Pulse 0.6s linear infinite; } .list-container.active .more-button{ animation-play-state: paused; } Keď používateľ podrží kurzor na ikone ponuky, spustí sa animácia pulzu a po kliknutí na tlačidlo sa animácia pozastaví. .list-container.active .menu-icon-wrapper { transform: rotate(-45deg); } .list-container.active .menu-icon-line.first { transform: rotate(-90deg) translateX(1px); } .list-container.active .menu-icon-line.last { transform: rotate(-90deg) translateX(-1px); } Je to kód na zmenu riadkov ikon ponuky, ktoré sa majú krížiť. Po prvé, keď používateľ klikne na ikonu ponuky, otočí sa o 45 stupňov a potom sa horný aj spodný riadok otočí o -90 stupňov, aby vyzerali ako kríž. .more-button { background-color: #5c67ff; box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3); border-radius: 50%; width: 50px; height: 50px; border: none; padding: 0; cursor: pointer; transition: 0.2s ease-in; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; z-index: 2; } .more-button:hover { box-shadow: 0px 0px 0px 8px rgba(92, 103, 255, 0.3); background-color: #4854ff; } .more-button:focus { outline: 0; } V tejto časti sme navrhli naše tlačidlo ponuky. Farba tlačidla ponuky sa zmení pri umiestnení kurzora myši, po kliknutí by nemalo vytvárať obrys, takže hodnotu obrysu nastavíme na 0. .more-button-list { background-color: #fff; border-radius: 8px; list-style-type: none; width: 140px; height: 170px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); padding: 0; position: absolute; right: 24px; bottom: 0; opacity: 0; transform: scale(0); transform-origin: bottom right; transition: all 0.3s ease 0.1s; } .more-button-list li { opacity: 0; } .more-button-list-item { display: flex; align-items: center; color: #1c3991; padding: 10px; border-radius: 4px; cursor: pointer; position: relative; transition: 0.2s ease-in; transform: translatex(-10px); padding: 6pxs; } .more-button-list-item:hover { color: #000000; background-color: #EEEEEE; } .more-button-list-item:after { content: ""; position: absolute; height: 1px; width: calc(100% - 24px); left: 12px; bottom: 0; background-color: rgba(132, 160, 244, 0.1); } .more-button-list-item:last-child:after { display: none; } .more-button-list-item svg { width: 18px; height: 18px; } .more-button-list-item span { display: inline-block; line-height: 20px; font-size: 14px; margin-left: 8px; } Tu sme navrhli naše položky ponuky a nastavili zmenu farby pozadia, keď používateľ umiestni kurzor myši na niektorú z položiek. @keyframes Pulse { 0% { box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3); } 50% { box-shadow: 0px 0px 0px 12px rgba(92, 103, 255, 0.1); } 100% { box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3); } } Animácia pulzu sa aplikuje na tlačidlo ikony ponuky, keď naň používateľ umiestni kurzor myši. @keyframes fadeInItem { 100% { transform: translatex(0px); opacity: 1; } } Toto je naša druhá animácia, keď používateľ klikne na tlačidlo ponuky, zobrazí sa položka ponuky s efektom zoslabovania. .menu-icon-line { background-color: #fff; border-radius: 2px; width: 100%; height: 2px; } .menu-icon-line.half { width: 50%; } .menu-icon-line.first { transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52); transform-origin: right; } .menu-icon-line.last { align-self: flex-end; transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52); transform-origin: left; } script.js document.querySelector('.more-button').addEventListener('click', function () { document.querySelector('.list-container').classList.toggle('active'); }); Tu sme pridali jednoduchú funkciu, keď používateľ klikne na ikonu ponuky, pridá triedu „active“ do kontajnera zoznamu (náš rodičovský div za telom). Dúfam, že sa Vám tento návod páčil a naučili ste sa niečo nové. The post Animované tlačidlo menu first appeared on Tvorba a správa webových stránok | Frontprog.sk.
Our template supports three menu types: GK menu Dropline menu Split menu Each of these menus has different characteristic. It is important to know that in order to gain an additional functionality offered by "GK menu", a user has to install a plug
prejsť na článokMožno ste už v marketingovom žargóne zachytili spojenia ako CTA button, či výzva k akcii. Ide o jedno a to isté. Spravidla sa jedná o tlačidlo, prípadne obrázok, ktorý vyzýva návštevníka webu ku konkrétnemu kroku. Taký CTA button – tlačidlo - je mimoriadn
prejsť na článokV poslednej dobe sa na webových stránkach začalo objavovať dynamické a animované menu, ktoré zmení veľkosť pri posúvaní obsahu nadol minimalizácia hlavnej navigácie, aby zostalo viac miesta pre samotný obsah. V tomto príklade si ukážeme, ako si môžete vy
Milí zákonní zástupci a žáci, do menu Žáci jsme přidali položku Rozvrh hodin.
prejsť na článokBlog typ webovej stránky alebo on line časopisu , ktorý vám umožní publikovať články a rôzne aktuálne články, ktoré si návštevníci môžu prečítať a komentovať . Zobrazenie reklamy reklamy zobrazené na webových stránkach . Grafické reklamy môžu byť stati
prejsť na článok