{"id":274,"date":"2024-03-11T01:10:22","date_gmt":"2024-03-11T00:10:22","guid":{"rendered":"https:\/\/intranet.projektninja.com\/?p=274"},"modified":"2024-06-15T17:20:59","modified_gmt":"2024-06-15T15:20:59","slug":"menu-fse-mobile-animowany-zjazd-wyjazd","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/nawigacja\/menu-fse-mobile-animowany-zjazd-wyjazd\/","title":{"rendered":"Animowane mobilne menu w WordPress FSE: P\u0142ynny zjazd i wyjazd"},"content":{"rendered":"\n<p>Tworzenie animowanego mobilnego menu w WordPress Full Site Editing (FSE) pozwala na bardziej p\u0142ynne i estetyczne przej\u015bcia. Poni\u017cej znajduje si\u0119 spos\u00f3b na zaimplementowanie animowanego zjazdu i wyjazdu menu.<\/p>\n\n\n\n<p><strong>Kod CSS<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    #modal-1 {\n\n        transition:top 0.4s;\n        top: -277px;\/* wysoko\u015b\u0107 menu *\/\n        display: flex;\n    }   \n\n\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>   #modal-1.is-menu-open{\n        top: 0px;\n   }<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Wyja\u015bnienia:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Definiowanie stylu zamkni\u0119tego menu<\/strong>: Domy\u015blnie zamkni\u0119te menu ma <code>display: none<\/code> i jest umieszczone poza widocznym obszarem ekranu za pomoc\u0105 <code>top: -277px<\/code>.<\/li>\n\n\n\n<li><strong>Animowanie otwarcia menu<\/strong>: Gdy menu jest otwarte (<code>is-menu-open<\/code>), zmienia si\u0119 <code>top<\/code> na <code>0px<\/code> oraz <code>display<\/code> na <code>flex<\/code>, co powoduje p\u0142ynne zje\u017cd\u017canie menu.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Dowiedz si\u0119, jak stworzy\u0107 animowane mobilne menu w WordPress FSE, kt\u00f3re p\u0142ynnie zje\u017cd\u017ca i wyje\u017cd\u017ca, poprawiaj\u0105c estetyk\u0119 strony.<\/p>\n","protected":false},"author":1,"featured_media":559,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[268],"tags":[102,31,46,48,14],"class_list":["post-274","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nawigacja","tag-fse","tag-js","tag-menu","tag-nawigacja","tag-wp"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=274"}],"version-history":[{"count":1,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/274\/revisions"}],"predecessor-version":[{"id":425,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/274\/revisions\/425"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/559"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}