Hamburger Menu je tlačidlo na webovej stránke a aplikácii, ktoré sa zvyčajne otvára do bočnej ponuky alebo navigačnej zásuvky. Hamburgerové menu zaberá menej miesta ako tradičné menu. Jeho funkciou je prepínanie ponuky alebo navigačnej lišty medzi zbalením za tlačidlom alebo zobrazením na obrazovke. Hamburger menu v CSS Na vytvorenie nášho hamburgerového menu potrebujeme vytvoriť dva súbory s názvom index.html a style.css. index.html Začnite písať kód vo vnútri prvku tela. Najprv vytvorte značku <nav> a </nav>. Potom vytvorte div s ID menuToggle vo vnútri navigačných značiek. <nav> <div id="menuToggle"> </div> </nav> Vytvorte vstup s typom začiarkavacieho políčka. a tiež vytvoríme tri značky span, tieto značky použijeme ako ikonu našej ponuky burgerov. <nav> <div id="menuToggle"> <input type="checkbox" /> <span></span> <span></span> <span></span> </div> </nav> Po span tagoch vytvorte neusporiadaný zoznam pre naše položky menu a vytvorte <a> kotviaci tag a položku zoznamu vo vnútri kotviaceho tagu. <nav> <div id="menuToggle"> <input type="checkbox" /> <span></span> <span></span> <span></span> <ul id="menu"> <a href="#"><li>Home</li></a> <a href="#"><li>About</li></a> <a href="#"><li>Info</li></a> <a href="#"><li>Contact</li></a> </ul> </div> </nav> Tu je náš navigačný panel hotový. napíšme jednoduchý kód skriptu, aby sme získali výšku obrazovky a aplikovali ju na výšku našej ponuky. <body> <nav> <div id="menuToggle"> <input type="checkbox" /> <span></span> <span></span> <span></span> <ul id="menu"> <a href="#"><li>Home</li></a> <a href="#"><li>About</li></a> <a href="#"><li>Info</li></a> <a href="#"><li>Contact</li></a> </ul> </div> </nav> <script> let height = window.innerHeight; document.getElementById("menu").style.height = height + "px"; </script> </body> V značke skriptu sa let používa na deklarovanie premennej, výška je názov našej premennej. Okno.innerHeight sa používa na získanie výšky obrazovky. Vráti hodnotu pixelov.V druhom riadku document.getElementById(“menu”) metóda Document getElementById() vracia objekt Element reprezentujúci element, ktorého vlastnosť id sa zhoduje so zadaným reťazcom.HTML element môžeme naštylovať pomocou JavaScriptu, najskôr vyberte značkudocument.getElementById(“menu”)potom použite bodku (.) na pridanie vlastnosti document.getElementById(“menu”).style.height použite hodnotu rovnajúcu sa (=). document.getElementById("menu").style.height = height + "px"; style.css Ako vždy, najprv vytvoríme premenné: :root{ --hamburgerColor: #000000; --activeHamburgerColor: #ff0000; --linkColor: #232323; --hoverLinkColor: tomato; --menuBgColor: #ededed; --textColor: black; } Teraz napíšeme kód tela: body { margin: 0; padding: 0; background: white; color: var(--textColor); font-family: "Arial", sans-serif; overflow: hidden; } Tu používame hodnotu farby textu ako našu premennú „–textColor“, font-family je nastavený na Arial a overflow:hidden, skryje naše posuvníky (horizontálne aj vertikálne). #menuToggle { display: block; position: relative; top: 50px; left: 50px; z-index: 1; } V tomto kóde sme zarovnali našu ikonu ponuky hamburgeru a navigačné odkazy. #menuToggle a { text-decoration: none; color: var(--linkColor); transition-delay: 0.4s; } #menuToggle a:hover { color: var(--hoverLinkColor); } Najskôr sme odstránili podčiarknutie kotviacej značky pomocou text-decoration:none;.Potom sa farba nastaví na našu premennú hodnotu „–linkColor“ a oneskorenie prechodu: 0,4 s; sa používa na oneskorenie zmeny farby, keď používateľ umiestni kurzor myši na odkaz.V ďalšom #menuToggle a:hover meníme farbu odkazu pri umiestnení kurzora myši pomocou vlastnosti color a premennej ako hodnoty „–hoverLinkColor“. #menuToggle input { display: block; width: 40px; height: 34px; position: absolute; top: -7px; left: -8px; cursor: pointer; opacity: 0; z-index: 2; } Keďže používame efekt prepínania, tak používame začiarkavacie políčko, tu nastavíme nepriehľadnosť na 0, skryje prvok. kurzor: ukazovateľ; sa používa na zobrazenie ruky, keď prejdeme na prvok. #menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: var(--hamburgerColor); border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } V tejto časti navrhujeme ikonu našej ponuky hamburgerov. #menuToggle span:first-child { transform-origin: 0% 0%; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } Je to naša predvolená poloha ikony ponuky hamburgeru. #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: var(--linkColor); } #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } Keď používateľ klikne na ikonu ponuky, otočíme ponuku do kríža, otáčame hornú aj spodnú časť v opačnom smere o 45 stupňov. #menuToggle input:checked ~ span:nth-last-child(3) { animation: moveFromPosition 0.4s forwards; } @keyframes moveFromPosition{ 0%{ transform: translateX(0px); } 30%{ transform: translateX(-40px); } 60%{ transform:translate(-10px, -15px) rotate(90deg); } 100%{ transform: translate(-10px, -100px) rotate(90deg); } } Keď používateľ klikne na ikonu ponuky, urobíme to krížikom, ale nepotrebujeme značku rozpätia na stred, takže ju odstraňujeme pomocou jednoduchej animácie. #menuToggle input ~ span:nth-last-child(3) { animation: backToPosition 0.4s forwards; } @keyframes backToPosition{ 100%{ transform: translateX(0px); } 70%{ transform: translateX(-40px); } 30%{ transform:translate(-10px, -15px) rotate(90deg); } 0%{ transform: translate(-10px, -100px) rotate(90deg); } } Keď používateľ klikne na ikonu krížika, musíme z nej znova urobiť hamburgerovú ponuku, takže tu opäť zobrazujeme stredovú značku rozpätia na vytvorenie ponuky, iba obrátime animáciu, aby bola viditeľná. #menu{ position: absolute; margin: -100px 0 0 -50px; width: 150px; padding: 50px; padding-top: 125px; background: var(--menuBgColor); list-style-type: none; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5); } #menu li { padding: 10px 0; font-size: 22px; } Tento kód sa používa na vytvorenie zoznamu položiek ponuky. #menuToggle input:checked ~ ul { transform: none; } Keď používateľ klikne na ikonu ponuky, tu nastavujeme transform:none; Definuje, že by nemalo dôjsť k žiadnej transformácii. #menuToggle:hover > span{ background-color: var(--activeHamburgerColor); transition-duration: 0.5s; } Tento kód definuje, že po umiestnení myši na ikonu by sa mala zmeniť farba s časovým trvaním 0,5 s. #menu li:hover{ padding-left: 25px; transition-duration: 0.5s; } #menu li:not(:hover){ transition-duration: 0.5s; } Prvá vlastnosť sa používa na zobrazenie toho, že keď sa myšou presuniete na položku zoznamu, položka by sa mala posunúť o 25 pixelov doľava od svojej pôvodnej pozície.A druhá vlastnosť ukazuje, že po odstránení myši z položky zoznamu by sa položka mala presunúť na svoju pôvodnú pozíciu do 0,5 s.The post Hamburger menu v CSS 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ánokMilí zákonní zástupci a žáci, do menu Žáci jsme přidali položku Rozvrh hodin.
prejsť na článokFlowis offers a unique way of setting up permissions for as many different groups of employees as needed. Its complexity allows you to truly set up Flowis and the information in it with precision, making sure everybody can see, access, edit, and delete on
prejsť na článok1. Treba si zvoliť jazyk, z ktorého chcete byť testovaný 2. Na ďalšej stránke je potrebné vyplniť : *osobné údaje *kontakty (meno spoločnosti) *z „drop down“ menu Self-assessment – seba ohodnotenie (zvoliť možnosť basic – základy/ Intermediate – mierne po
prejsť na článokPrezentácia Združenia bezpečnostného a obranného priemyslu. Estetická webka na redakčnom systéme, s členskou zónou, vizitkami členov a fancy animovaným menu.
prejsť na článok